ทำให้ผู้เข้าชมมีส่วนร่วมอยู่เสมอด้วย Core Web Vitals

สร้างประสบการณ์ของผู้ใช้ที่มีคุณภาพบนเว็บไซต์ข่าวของคุณ

Core Web Vitals คืออะไร

Web Vitals เป็นโครงการริเริ่มของ Google ในการให้คำแนะนำแบบครบวงจรเกี่ยวกับสิ่งที่จำเป็นต่อประสบการณ์อันยอดเยี่ยมของผู้ใช้บนเว็บ
Core Web Vitals คือ 3 ตัวชี้วัดจาก Web Vitals การวิจัยพบว่าเมื่อเว็บไซต์เป็นไปตาม Core Web Vitals ผู้ใช้จะมีโอกาสออกจากหน้าเว็บน้อยลง 24%
Core Web Vitals ให้ความสำคัญกับสิ่งต่อไปนี้
- การโหลด
- การโต้ตอบ
- ความเสถียรของภาพ

เริ่มต้นด้วยการวัด Core Web Vitals

การรวบรวมข้อมูลเป็นขั้นตอนแรกในการเพิ่มประสิทธิภาพ Core Web Vitals
- PageSpeed Insights จะวัดผลและรายงานประสบการณ์ของผู้ใช้บนเว็บในอุปกรณ์เคลื่อนที่และอุปกรณ์เดสก์ท็อป รวมถึงให้คำแนะนำเกี่ยวกับวิธีปรับปรุงหน้าเว็บของคุณ
- Search Console จะวัดผลและรายงานว่าหน้าเว็บของคุณเป็นไปตาม Core Web Vitals อย่างไร โดยพิจารณาจากวิธีที่กลุ่มเป้าหมายใช้เว็บไซต์
- ส่วนขยาย Chrome ของ Web Vitals จะวัดผลและรายงานประสิทธิภาพของ Core Web Vitals แบบเรียลไทม์สำหรับหน้าเว็บทุกหน้า และเป็นเครื่องมือที่เหมาะสำหรับนักพัฒนา
💡แนวทางปฏิบัติแนะนำ: แชร์คำแนะนำจากเครื่องมือเหล่านี้กับนักพัฒนาของคุณ

การโหลด

เวลาในการโหลดที่รวดเร็วทำให้กลุ่มเป้าหมายมั่นใจได้ว่าหน้าเว็บนี้มีประโยชน์
- ผู้ใช้ 50% ตัดสินใจออกจากเว็บไซต์หากใช้เวลาโหลดนานกว่า 3 วินาที
- ผู้ใช้ 47% คาดหวังว่าหน้าเว็บจะโหลดภายใน 2 วินาที
- ผู้ใช้ 52% กล่าวว่าเวลาที่ใช้ในการโหลดมีส่วนสำคัญกับการภักดีต่อแบรนด์
การโหลดจะวัดจาก Largest Contentful Paint (LCP) ซึ่งคำนวณตามระยะเวลาที่ใช้ในการแสดงรูปภาพหรือบล็อกข้อความที่ใหญ่ที่สุด
ข้อมูล 75% ของหน้าเว็บควรโหลดภายใน 2.5 วินาที เพื่อให้เป็นไปตาม Core Web Vitals
💡แนวทางปฏิบัติแนะนำ
- เปิดใช้การโหลดแบบ Lazy Loading
- ใช้วิดีโอแทน GIF ขนาดใหญ่
- ลบโค้ดที่ไม่ได้ใช้งาน

การโต้ตอบ

ในขณะที่การโหลดวัดว่าเว็บไซต์แสดงเนื้อหาได้เร็วเพียงใด การโต้ตอบจะวัดว่าเว็บไซต์มีการตอบสนองอย่างไรเมื่อกลุ่มเป้าหมายพยายามเลือกบทความหรือดำเนินการอย่างอื่น
การโต้ตอบจะวัดจาก First Input Delay (FID) ซึ่งคำนวณระยะเวลาตั้งแต่ที่ผู้ใช้คลิกลิงก์หรือปุ่มไปจนถึงเวลาที่เว็บไซต์เริ่มประมวลผลการดำเนินการของผู้ใช้
75% ของหน้าเว็บควรใช้เวลาไม่เกิน 0.1 วินาทีในการเริ่มประมวลผลการคลิกเพื่อให้เป็นไปตาม Core Web Vitals
💡แนวทางปฏิบัติแนะนำ
- เปิดใช้การโหลดแบบ Lazy Loading ซึ่งแบ่งโค้ดออกเป็นงานย่อยๆ
- โหลดโค้ดที่จำเป็นสำหรับหน้าเว็บก่อน
- ลดการใช้โค้ดที่ดึงข้อมูล

ความเสถียรของภาพ

คุณเคยเริ่มอ่านบทความและพบปัญหาข้อความเลื่อนไปก่อนที่จะอ่านจบประโยคจนทำให้คุณไม่ทราบว่าอ่านถึงตรงไหนแล้วหรือไม่
ในหลายๆ ครั้ง ปัญหานี้อาจเพียงแค่ก่อให้เกิดความรำคาญ แต่บางครั้งก็สามารถสร้างความเสียหายอย่างแท้จริงได้
ความเสถียรของภาพวัดจาก Cumulative Layout Shift (CLS) ซึ่งคำนวณจำนวนครั้งสูงสุดที่เกิดการเลื่อนเนื้อหาพร้อมกัน
75% ของหน้าเว็บควรมีค่าคะแนนไม่เกิน 0.1 เพื่อให้เป็นไปตาม Core Web Vitals
💡แนวทางปฏิบัติแนะนำ
- กำหนดสัดส่วนภาพหรือขนาดของรูปภาพและวิดีโอ
- เลือกขนาดโฆษณาที่เป็นไปได้มากที่สุดตามโฆษณาก่อนหน้า
หลีกเลี่ยงการแสดงโฆษณาที่ด้านบนสุดของหน้า

