เรื่องเล่าบทความเพื่อ เส้นทางการพิชิต Core Web Vitals สายเว็บไซต์เขียนเว็บบล็อกทุนน้อย กำลังค้นหา Core Web Vitals ที่เร็ว โดยใช้ Hosting ในประเทศไทย และใช้ DNS ของ Cloudflare ผมได้เขียนบทความเกี่ยวกับเรื่องนี้มาหลายครั้ง ไม่ว่าจะเป็น การปรับแต่ง Cache ของ WordPress ร่วมกับ Cloudflare หรือเรื่อง เลือกใช้ CDN อะไรดี ระหว่าง QUIC.cloud และ Cloudflare นั่นก็เพราะว่าผมประสบปัญหาในเรื่องของ Core Web Vitals ไม่ว่าจะจูนอย่างไรก็ไม่ผ่านสักที
แนวคิดในการปรับแต่งเพื่อพิชิต Core Web Vitals สายเว็บไซต์เขียนเว็บบล็อกทุนน้อย
ก่อนอื่นก็ต้องบอกในตอนที่เขียนบทความนี้เลยว่า ภาพรวมของ Core Web Vitals ก็ยังไม่ดี อยู่ในขั้นที่แจ้งว่า URL ไม่ดีมาตลอดในรอบ 2 เดือน ถ้ามองจากรูปภาพจะเห็นว่าเคยมีช่วงเวลาที่ Core Web Vitals ดีมาสักพักนึง แต่หน้าเว็บไซต์มันผิดเพี้ยนมาก จึงต้องปรับแต่งเว็บไซต์ใหม่ทั้งหมดอีกครั้ง
ประวัติความเป็นมาของเว็บไซต์
เริ่มจากผู้เขียนไม่ได้มีพื้นฐานในการเขียนเว็บไซต์ แต่อยากมีเว็บบล็อก เป็นการส่วนตัว ผมเคยเขียนบทความที่ Blogger ➡️ https://itguest.blogspot.com แม้จะเป็น Blogger ที่ดี ไม่ต้องปรับแต่งอะไรมากมาย ก็เขียนได้ แต่ด้วยข้อจำกัดในการเขียนบล็อกที่มีหลากหลาย จึงอยากมีเว็บไซต์ส่วนตัวเพื่อเขียนบล็อก จึงได้เริ่มเช่า Hostneverdie -> Link ดูข้อมูลเพิ่มเติ่ม และได้รับการแนะนำให้จด Domain Name ที่ Cloudflare จากเพื่อนของผู้เขียน เนื่องด้วยราคาที่ถูก และเหตุผลในบางประการคือ
- Cloudflare เป็นผู้ให้บริการทางด้านเครือข่ายที่ค้นข้างมีชื่อเสียง
- Cloudflare มี EDGE ที่ให้บริการมากกว่า 250 แห่งทั่วโลก
- Cloudflare มีผลิตภัณฑ์อย่างอื่นให้ใช้งานนอกจาก Domain Name
เส้นทางการรู้จัก Core Web Vitals
ผู้เขียนไม่ได้ทราบว่าการเขียนเว็บบล็อกที่ดีนั้นต้องเป็นอย่างไร ซึ่งในเป้าหมายของผู้เขียนนั้นต้องการเขียนบทความและให้ผู้คนได้เข้ามาอ่านบทความผ่านการค้นหาของ Seach Engine อย่าง Google แต่ในภายหลังจากที่เขียนบทความไปประมาณ 5 โพส ผลปรากฏว่า บทความของผู้เขียนนั้นไม่ได้อยู่ในการค้นหาของ Google ทำให้ผู้เขียนต้องค้นหาการ ทำอย่างไรให้เว็บไซต์ติดอันดับการค้นหา จนได้รู้จักกับ Google Search Console ซึ่งเป็นเส้นทางของการรู้จักกับ Core Web Vitals นั้นคืออะไร
Core Web Vitals คืออะไร ?
คือชุดเมตริกที่วัดประสบการณ์ของผู้ใช้งานจริงสำหรับประสิทธิภาพในการโหลด การโต้ตอบ และความเสถียรของภาพในหน้าเว็บเป็นสิ่งที่จำเป็นสำหรับเจ้าของเว็บไซต์สร้าง Core Web Vitals ที่ดีเพื่อให้ประสบความสำเร็จกับ Search engine และเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ยอดเยี่ยม ซึ่งจะสอดคล้องกับสิ่งที่ระบบหลักในการจัดอันดับเว็บไซต์ให้มีคุณค่าไปพร้อมกับแง่มุมอื่นๆ ของประสบการณ์การใช้งานหน้าเว็บ อ่านเพิ่มเติมได้ที่ → ทําความเข้าใจ Core Web Vitals และผลการค้นหาของ Google
Core Web Vitals สำคัญอย่างไร
การสร้างเว็บไซต์ที่มีความเร็ว มีโครงสร้างที่ดี เป็นการสร้างโอกาสให้กับเว็บไซต์ ซึ่งประกอบไปด้วย
- Largest Contentful Paint (LCP): วัดประสิทธิภาพการโหลด เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี ต้องพยายามให้ LCP เกิดขึ้นภายใน 2.5 วินาทีแรกของการเริ่มโหลดหน้าเว็บ
- Interaction to Next Paint (INP): วัดการตอบสนอง เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี ต้องพยายามทำให้ INP น้อยกว่า 200 มิลลิวินาที
- Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี ต้องพยายามให้มีคะแนน CLS ต่ำกว่า 0.1
ซึ่งเมตริกเหล่านี้จะวัดจากประสบการณ์ของผู้ใช้งานจากการเข้าชมเว็บไซต์ของแต่ล่ะอุปกรณ์ และแต่ละเครือข่าย ซึ่งเริ่มจาก Mobile 3G, Mobile 4G, 5G และเครือข่ายความเร็วสูงระดับไฟเบอร์ออฟติค หากผู้อ่านใช้การทดสอบเว็บไซต์ผ่าน Wi-Fi จะเห็นว่าเว็บไซต์นั้นโหลดได้เร็ว แต่หากใช้ Network Mobile 3G จะเห็นว่าเว็บไซต์โหลดช้าพอสมควร ซึ่งเมตริกเหล่านี้ทาง Google ได้ให้ความสำคัญเป็นอันดับแรกๆ กับเว็บไซต์ที่โหลดช้า มักจะไม่ติดอันดับการค้นหา (SEO)
แนวทางการทำให้เว็บไซต์มี Core Web Vitals ที่ดี
- ตรวจสอบรายงาน Core Web Vitals ใน Search Console เพื่อดูประสิทธิภาพของหน้าเว็บ การแสดงผลรายงานใน Search Console (เมนูด้านซ้าย → ประสบการณ์ → Core Web Vitals) จะแสดงรายงานข้อมูลในรายวัน ซึ่งต้องใช้เวลาในการเก็บรวบรวมข้อมูลเป็นเวลาสูงสุด 28 วัน ดังนั้นการดูรายงานจะทำให้ทราบว่า URL เป็นเช่นไร
- ตรวจสอบความเร็วของเว็บไซต์ด้วย Pagespeed Insights ทำการทดสอบความเร็ว → หัวข้อ “ดูประสบการณ์ที่ผู้ใช้งานจริงได้รับ” จะประกอบไปด้วยเมตริกต่างๆ และขั้นตอนการแก้ปัญหาให้ตรวจสอบตาม “การวินิจฉัย” ด้านล่าง ซึ่งจะบอกให้ทราบถึงรายการที่ต้องแก้ไข
- เพิ่มความเร็วให้เว็บไซต์ด้วย Plugin Cache ระดับ server ช่วยให้ server เก็บ Cache ของหน้าเว็บไว้ โดยที่ไม่ต้องไปโหลดหน้าเว็บอีกครั้งเมื่อไม่มีการเปลี่ยนแปลง
- ใช้ CDN ของ Cloudflare มี CDN Buildin ในตัว เพราะ Cloudflare เป็น edge sever ที่เก็บข้อมูลไว้ในที่ต่างๆ 250 แห่งทั่วโลก หากมีการเรียกใช้เว็บไซต์ Cloudflare จะร้องขอไปที่ edge ที่ใกล้ผู้ร้องขอมากที่สุด ลด Latency ได้อย่างมาก ทำให้มีความเร็วสูง นอกจาก CDN Buildin แล้ว Cloudflare ยังมี Argo Smart Routing ไว้ให้บริการเป็นแผนแบบเสียเงิน
- Cache ในระดับ server ผู้เขียนใช้ WordPress และใช้ Litespeed Cache Plugin อ่านการปรับแต่งได้ที่บทความนี้ การปรับแต่ง Cache ของ WordPress ร่วมกับ Cloudflare
- ปรับแต่ง Page Optimization และ Image Optimization ที่ Litespeed Cache เชื่อมต่อกับ QUIC.Cloud แผนฟรีโควตารายเดือน
- Cache Static Page ไว้ที่ Cloudflare ด้วยการสร้าง Page Rule และ Cache Rule การ Cache หน้าเว็บไซต์ที่ไม่มีการเปลี่ยนแปลงอย่าง Static website ไว้ที่ Cloudflare เป็นเรื่องดี เพราะเป็นด่านแรกที่ต้องเจอก่อนเนื่องจากเป็น Domain Name หากมีการ Cache ไว้ Cloudflare จะตรวจสอบ Cache ของตนเองเสียก่อน หากข้อมูลไม่ตรงกันจึงจะร้องขอไปยัง Origin sever
บทสรุป
ในการตรวจสอบ ประสบการณ์ผู้ใช้งานจริงที่ Search Console จำเป็นต้องใช้เวลารวบรวมข้อมูลจากผู้ใช้งานจริง จะมากหรือน้อยขึ้นอยู่กับเว็บไซต์เป็นที่รู้จักมากน้อยเพียงใด ฉะนั้นหมั่นอัพเดตบทความให้มีความสม่ำเสมอเพื่อบอก Robots.txt เป็นนัยๆว่า เว็บไซต์ยังมีการอัพเดตอย่างต่อเนื่อง
แนวคิดหลักในการปรับแต่งเว็บไซต์สำหรับผู้ที่มีงบประมาณจำกัดเพื่อให้ได้คะแนน Core Web Vitals ที่ดีคือการมุ่งเน้นไปที่การปรับปรุงประสิทธิภาพในส่วนที่สำคัญที่สุด โดยอาจเริ่มจากการตรวจสอบเว็บไซต์ด้วยเครื่องมือต่างๆ เช่น Google PageSpeed Insights เพื่อระบุปัญหาและแนวทางแก้ไข จากนั้นจึงดำเนินการปรับปรุงในส่วนที่ส่งผลกระทบมากที่สุด เช่น การปรับขนาดรูปภาพให้เหมาะสม การใช้ CDN เพื่อเพิ่มความเร็วในการโหลดเนื้อหา และการปรับปรุงการตอบสนองของเว็บไซต์ เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีขึ้น