การตั้งค่าที่ดีที่สุดสำหรับ Cloudflare เพื่อให้คะแนนสูงสุดใน LCP, TBT และ Web Vital สำหรับร้านค้าของคุณ

ประสิทธิภาพของเว็บไซต์เป็นปัจจัยสำคัญในการสร้างประสบการณ์การช็อปปิ้งที่ไร้รอยต่อสำหรับลูกค้าของคุณ ในบทความนี้ ฉันจะแสดงวิธีการให้คะแนนสูงใน Web Vitals เช่น Largest Contentful Paint [LCP] และ Total Blocking Time [TBT] ด้วย Cloudflare การตั้งค่าเหล่านี้มีตั้งแต่การปรับแต่งง่าย ๆ ไปจนถึงการปรับปรุงขั้นสูง
ก่อนที่จะดำดิ่งลงไป โปรดใช้เวลาสักครู่เพื่อประเมินประสิทธิภาพปัจจุบันของเว็บไซต์ของคุณโดยใช้เครื่องมือเช่น Google PageSpeed Insights ซึ่งจะช่วยให้คุณติดตามความก้าวหน้าหลังจากนำการตั้งค่าเหล่านี้ไปใช้
ทำไม Web Vitals ถึงสำคัญ
Web Vitals วัดด้านสำคัญของประสบการณ์ผู้ใช้ ต่อไปนี้เป็นภาพรวมอย่างรวดเร็วเกี่ยวกับเมตริกที่สำคัญที่สุดที่เราจะมุ่งเน้น:

เมตริก	วัดอะไร	ทำไมมันถึงสำคัญ
LCP	เวลาที่ใช้ในการโหลดองค์ประกอบที่มองเห็นได้ใหญ่ที่สุด	ส่งผลต่อการรับรู้ความเร็วของเว็บไซต์ของผู้ใช้
TBT	เวลาที่ถูกบล็อกโดยงาน JavaScript ที่ยาวนาน	ส่งผลต่อการตอบสนองและการมีส่วนร่วม
CLS	การเลื่อนแบบวางแผนระหว่างการโหลดหน้า	รับประกันความมั่นคงทางสายตาและการใช้งาน

ด้วยการปรับแต่งการตั้งค่า Cloudflare ของคุณ คุณสามารถเพิ่มคะแนนเหล่านี้อย่างมีนัยสำคัญ ส่งผลให้การมีส่วนร่วมที่รวดเร็วและน่าสนใจยิ่งขึ้นสำหรับผู้เยี่ยมชมของคุณ

ขั้นตอนที่ 1: ตั้งค่าชื่อโดเมนของคุณบน Cloudflare และเปิดใช้งาน CDN

เพื่อเริ่มปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณด้วย Cloudflare คุณจะต้อง确保ว่าชื่อโดเมนของคุณถูกตั้งค่าอย่างถูกต้องบนแพลตฟอร์มของพวกเขา และคุณลักษณะ CDN (Content Delivery Network) ได้เปิดใช้งาน

วิธีเปิดใช้งาน CDN ของ Cloudflare

1. เข้าสู่ระบบบัญชี Cloudflare ของคุณและเลือกชื่อโดเมนของคุณ
2. ไปที่ส่วน DNS.
3. ใน DNS Records ค้นหาบันทึก A หรือ CNAME ของชื่อโดเมนของคุณ
4. คลิกที่ไอคอนเมฆสีส้มถัดจากบันทึกเพื่อเปิดใช้งานฟีเจอร์ Proxy Cloud เมื่อติดตั้งใช้งาน เส้นขอบจะเปลี่ยนเป็นสีส้มสดใส สื่อให้รู้ว่าชื่อโดเมนของคุณถูกส่งผ่าน CDN ของ Cloudflare แล้ว

หมายเหตุพิเศษสำหรับผู้ใช้ Selldone

หากคุณใช้ Selldone คุณจะต้องปรับตั้งชื่อโดเมนของคุณอย่างถูกต้องเพื่อเชื่อมต่อกับ CDN ของ Cloudflare อย่างราบรื่น ซึ่งจะทำให้ CDN ภายนอกของ Selldone สามารถทำงานร่วมกับเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพ ส่งเนื้อหาที่ถูกแคชได้อย่างมีประสิทธิภาพในขณะที่ยังคงรักษาความเข้ากันได้กับแพลตฟอร์มของ Selldone
ขั้นตอนการกำหนดค่าเพื่อ Selldone:

1. ตั้งค่าชื่อโดเมนที่กำหนดเองในแดชบอร์ดของ Selldone
2. ตรวจสอบให้แน่ใจว่า CDN ภายนอกชี้ไปที่ Cloudflare โดยการตั้งค่าบันทึก DNS ของคุณอย่างถูกต้อง
3. ยืนยันการตั้งค่าของ Cloudflare ว่าเปิดใช้งานอย่างเต็มที่รวมถึงสถานะ Proxy Cloud ขั้นตอนเหล่านี้จะรับประกันว่าการใช้งานเว็บไซต์ของคุณที่ใช้ Selldone จะได้รับประโยชน์เต็มที่จากฟีเจอร์ที่ปรับปรุงประสิทธิภาพของ Cloudflare

ขั้นตอนที่ 2: ฟีเจอร์การทดสอบความเร็วของ Cloudflare

Cloudflare มีเครื่องมือ Speed Test ที่ให้ข้อมูลที่มีค่าสำหรับประสิทธิภาพของเว็บไซต์ของคุณ ฟีเจอร์นี้วัดเมตริกหลัก เช่น เวลาในการโหลด ความตอบสนอง และการปรับปรุงความเร็วโดยรวมหลังจากใช้บริการของ Cloudflare

ขั้นตอนที่ 3: เปิดใช้งาน Real-Time User Insights ใน Cloudflare

การเข้าใจพฤติกรรมของผู้ใช้ในเวลาเรียลไทม์นั้นสำคัญมากสำหรับการปรับปรุงประสบการณ์ของพวกเขาบนเว็บไซต์ของคุณ ฟีเจอร์ Real-Time User Insights (RUN) ของ Cloudflare ช่วยให้คุณติดตามข้อมูลสดเกี่ยวกับวิธีที่ผู้เข้าชมโต้ตอบกับเว็บไซต์ของคุณ สร้างเมตริกที่สามารถใช้งานได้เพื่อปรับปรุงประสิทธิภาพและการใช้งาน

ขั้นตอนที่ 4: เปิดใช้งานฟีเจอร์ทุกอย่างใน Cloudflare

เพื่อเพิ่มประสิทธิภาพของเว็บไซต์ของคุณให้สูงสุด เปิดใช้งานฟีเจอร์การปรับปรุงที่มีอยู่ใน Cloudflare ภายใต้แท็บ Speed ฟีเจอร์เหล่านี้ได้รับการออกแบบมาเพื่อปรับปรุงเวลาในการโหลด ลดการใช้แบนด์วิธ และเพิ่มประสบการณ์ของผู้ใช้โดยไม่ต้องพยายามมาก
  ฟีเจอร์ที่สำคัญบางอย่างในการปรับปรุงความเร็วของเว็บไซต์ต้องมีใบอนุญาต PRO.
อย่าลืมเปิดใช้งาน “Cloudflare Fonts” และ “Rocket Loader”

ขั้นตอนที่ 5: ผลลัพธ์ทันทีด้วยแผนฟรีของ Cloudflare

แม้บน แผนฟรีของ Cloudflare คุณสามารถเห็นการปรับปรุงประสิทธิภาพที่สำคัญโดยการเปิดใช้ฟีเจอร์ที่ถูกต้อง ฉันได้นำการปรับปรุงเหล่านี้ไปใช้กับ marketplace.hanscristy.com และผลลัพธ์ออกมาทันที การเปลี่ยนแปลงทำให้เกิดการปรับปรุงคะแนน Web Vitals เช่น LCP และ TBT และยังช่วยในการสร้างประสบการณ์ของผู้ใช้โดยรวมที่ดีขึ้น
 

ขั้นตอนที่ 6: วิธีที่การปรับแต่งของ Cloudflare และ Selldone ส่งผลต่อประสิทธิภาพในชีวิตจริง

ทำความเข้าใจกับความท้าทายในการทดสอบประสิทธิภาพ

เครื่องมือเช่น Lighthouse, GTmetrix, และแพลตฟอร์มที่คล้ายคลึงกันถูกออกแบบมาเพื่อตรวจสอบ หน้าเว็บแบบสถิติ หรือเว็บไซต์ที่แสดงเนื้อหาฝั่งเซิร์ฟเวอร์ อย่างไรก็ตาม Selldone ทำงานต่างออกไป:

• 100% PWA: ทุกด้านของแพลตฟอร์ม Selldone ได้แก่ เว็บไซต์หลัก แดชบอร์ด ร้านค้า เป็นต้น ถูกสร้างขึ้นเป็น Progressive Web App (PWA) ซึ่งหมายความว่าการแสดงผลทั้งหมดเกิดขึ้นที่ ฝั่งลูกค้า ทำให้ผู้ใช้งานสามารถออกแบบแดชบอร์ดและร้านค้าแบบกำหนดเองได้อย่างยืดหยุ่น
• การโหลดโดเมนแบบไดนามิก: ผู้ใช้สามารถโหลด Selldone ได้จาก ทุกโดเมน โดยไม่ต้องกังวลเกี่ยวกับการดำเนินการที่ซับซ้อน ฟีเจอร์นี้จัดการทุกอย่างแบบไดนามิกและส่งมอบเป็นไฟล์ JavaScript เดียว

แนวทางที่เป็นเอกลักษณ์นี้มอบความยืดหยุ่นและความเร็ว แต่สร้างความท้าทายเฉพาะเมื่อทำการทดสอบด้วยเครื่องมือที่ออกแบบมาสำหรับหน้าที่เกิดจากเซิร์ฟเวอร์

ทำไม Selldone ถึงเร็วกว่าจริงในชีวิตประจำวัน 10-100 เท่า

ในขณะที่หน้าเว็บแบบสถิติขึ้นอยู่กับเซิร์ฟเวอร์ในการสร้าง HTML สำหรับคำขอของผู้ใช้แต่ละราย แต่แนวทาง PWA ของ Selldone แตกต่างออกไป:
การดึงข้อมูลอย่างมีประสิทธิภาพ:

• แทนที่จะสร้างหน้าเว็บทั้งหมดบนเซิร์ฟเวอร์ Selldone จะส่งโครงสร้าง JSON ที่มีข้อมูลที่จำเป็น
• ตัวอย่างเช่น เมื่อผู้ใช้คลิกที่ผลิตภัณฑ์ แพลตฟอร์มจะดึงข้อมูลที่จำเป็นเท่านั้น (เช่นรายละเอียดผลิตภัณฑ์) แทนที่จะโหลดหรือแสดงผลหน้าเว็บทั้งหมด

ไม่มีความล่าช้าในการสร้างจากเซิร์ฟเวอร์:

• แตกต่างจากแพลตฟอร์มเช่น WooCommerce ที่ที่ทุกคลิกอาจกระตุ้นการสร้างผลจากเซิร์ฟเวอร์ Selldone ขจัดแออัดนี้ได้ทั้งหมด ทุกอย่างถูกจัดการในฝั่งลูกค้า ทำให้ลดความล่าชาลงอย่างมาก

ข้อได้เปรียบด้านความเร็วแบบเรียลไทม์:

• ผู้ใช้จะได้สัมผัสการเปลี่ยนหน้าแบบทันที ข้อได้เปรียบด้านความเร็วนั้นทำให้แพลตฟอร์มรู้สึกเร็วเป็นพิเศษเมื่อเปรียบเทียบกับเว็บไซต์ที่สร้างจากเซิร์ฟเวอร์ แม้ว่าคะแนนการทดสอบแบบดั้งเดิมจะไม่สะท้อนถึงความได้เปรียบดังกล่าว

การฝ่าฟันผ่านอุปสรรคทางเทคโนโลยี

การทำคะแนนการทดสอบสูงสำหรับ PWA ที่สร้างผลบนฝั่งลูกค้าเป็นเรื่องที่ท้าทายเป็นประวัติการณ์เนื่องจาก:

• ความล่าช้าในการประมวลผล JS: การสร้างจากฝั่งลูกค้า ขึ้นอยู่กับ JavaScript ซึ่งเครื่องมือทดสอบมักจะลงโทษ
• เนื้อหาที่เปลี่ยนแปลงได้: ต่างจาก HTML แบบสถิติ การโหลดเนื้อหาที่เปลี่ยนแปลงได้อาจดูช้าลงในเทสที่สร้างจากซินเธติก

แต่ Selldone ได้เอาชนะข้อจำกัดเหล่านี้เป็นครั้งแรกบนอินเทอร์เน็ตโดยการรวม:

• การปรับแต่งของ Cloudflare (เช่น Rocket Loader™ และ Brotli Compression) เพื่อเรียบร้อยการส่งมอบแอสเซ็ท
• สถาปัตยกรรม PWA ขั้นสูง สำหรับการดึงข้อมูลและการแสดงผลแบบเรียลไทม์

ประสิทธิภาพในโลกจริงกับคะแนนสังเคราะห์

แม้ว่าการทดสอบแบบสังเคราะห์อาจแสดงคะแนนที่ต่ำกว่าสำหรับแพลตฟอร์มที่สร้างจากลูกค้าเช่น Selldone แต่ ประสิทธิภาพในชีวิตจริง บอกเล่าเรื่องราวที่แตกต่าง Selldone's แดชบอร์ดและร้านค้าสร้างประสบการณ์ที่เร็วขึ้น 10-100 เท่า เมื่อเปรียบเทียบกับแพลตฟอร์มที่สร้างจากเซิร์ฟเวอร์ ทำให้เป็นทางเลือกที่เหมาะสมสำหรับความต้องการอีคอมเมิร์ซสมัยใหม่
  หากคุณต้องการทำให้การตั้งค่า Cloudflare ของเราสมดุลเพื่อการทำงานที่ดีที่สุด ต่อไปนี้คือรายการฟีเจอร์ที่เปิดใช้งาน:

คำศัพท์เกี่ยวกับประสิทธิภาพของเว็บไซต์

นี่คือคำอธิบายที่เข้าใจง่ายและเป็นมิตรเกี่ยวกับคำศัพท์ประสิทธิภาพบนเว็บไซต์ใน Web Vitals:

LCP (Largest Contentful Paint)

LCP วัดระยะเวลาในการโหลดส่วนที่มองเห็นได้ใหญ่ที่สุดของหน้าเว็บ (เช่นภาพขนาดใหญ่หรือหัวเรื่อง) เพื่อโหลดและมองเห็นโดยผู้ใช้ คิดว่าเป็นเวลาที่ใช้ในการทำให้หน้าเว็บของคุณรู้สึก “พร้อม” สำหรับการอ่านหรือโต้ตอบ

CLS (Cumulative Layout Shift)

CLS ตรวจสอบว่ามีสิ่งใดเคลื่อนที่ไปรอบ ๆ อย่างไม่คาดคิดบนหน้าเว็บในขณะที่มันกำลังโหลด หรือไม่ ตัวอย่างเช่น หากปุ่มเลื่อนตำแหน่งออกไปในขณะที่คุณกำลังจะคลิกมัน นั่นคือการเลื่อนแบบวางแผน คะแนน CLS ที่ต่ำหมายความว่าเว็บไซต์ของคุณรู้สึกเสถียรและราบรื่น

INP (Interaction to Next Paint)

INP วัดว่าหน้าเว็บของคุณตอบสนองต่อการมีปฏิสัมพันธ์ของผู้ใช้ได้เร็วเพียงใด เช่นการคลิกปุ่มหรือพิมพ์ในแถบค้นหา INP ที่เร็วขึ้นหมายความว่าเว็บไซต์ของคุณรู้สึกตอบสนอง และผู้ใช้จะไม่รู้สึกผิดหวังที่ต้องรอให้มีการดำเนินการเกิดขึ้น

TBT (Total Blocking Time)

TBT คำนวณเวลาที่หน้าเว็บของคุณไม่ตอบสนองขณะโหลด เช่นเมื่อผู้ใช้พยายามเลื่อนหรือคลิกแต่ไม่มีอะไรเกิดขึ้น เมื่อ TBT ต่ำ หมายความว่าหน้าเว็บของคุณมีความสามารถในการทำงานหลายอย่างได้ดีกว่า ทำให้ผู้ใช้โต้ตอบได้อย่างราบรื่นในขณะที่โหลด