มีคนทำเว็บจำนวนไม่น้อยต้องประสบปัญหาเวลานำเว็บ URL ของเราไปเช็คที่ Google PageSpeed Insights แล้วต้องหน้าหงายกลับมาเพราะดันไม่ผ่านการประเมิน Core Web Vitals ขึ้นข้อความ Failed สีแดงกลับมาซะงั้น เดี๋ยวเราจะมาลองหาวิธีแก้ไขกันครับ
หากเว็บไซต์ของเรามีคะแนน Core Web Vitals หรือ CWV ต่ำ อาจส่งผลต่ออันดับการค้นหา (SERP) ของ Google บทความนี้เราจะมุ่งวิเคราะห์สาเหตุที่พบบ่อยของการ Failed ในการประเมิน CWV พร้อมเสนอวิธีแก้ไขที่นำไปใช้ได้จริงครับ
Core Web Vitals คืออะไร
Core Web Vitals (CWV) เป็นชุดของเมตริกที่ Google ใช้เพื่อวัดประสบการณ์การใช้งานเว็บ (UX) บนอุปกรณ์มือถือและเดสก์ท็อป CWV ประกอบด้วย 3 เมตริกหลัก ได้แก่ Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift (CLS) อย่าเพิ่งงงว่าแต่ละตัวมันคืออะไร เรามีคำตอบมาให้ครับ
1. Largest Contentful Paint (LCP)
เป็นเมตริกที่สำคัญที่ผู้ใช้เป็นศูนย์กลางในการวัดความเร็วในการโหลด คือการแสดงผลของบล็อกรูปภาพหรือข้อความที่ใหญ่ที่สุดที่มองเห็นได้ในวิวพอร์ต โดยสัมพันธ์กับเวลาที่ผู้ใช้เข้าชมหน้าเว็บเป็นครั้งแรก เว็บไซต์ควรพยายามให้มี LCP ไม่เกิน 2.5 วินาที เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นที่ 75 ของการโหลดหน้าเว็บตามกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
ตัวอย่างการโหลดข้อมูลเว็บตั้งแต่วินาทีแรกจนข้อมูลส่วนที่ใหญ่ๆ โหลดเข้ามา
องค์ประกอบใดบ้างถูกนำมาพิจารณา
ตามที่ระบุไว้ใน Largest Contentful Paint API ประเภทองค์ประกอบที่จะใช้พิจารณาสำหรับ Largest Contentful Paint มีดังนี้ครับ
– องค์ประกอบ <img> (เวลานำเสนอเฟรมแรกใช้สำหรับเนื้อหาภาพเคลื่อนไหว เช่น GIF หรือ PNG แบบเคลื่อนไหว)
– องค์ประกอบ <image> ภายในองค์ประกอบ <svg>
– องค์ประกอบ <video> (ใช้เวลาในการโหลดภาพโปสเตอร์หรือเวลานำเสนอเฟรมแรกสำหรับวิดีโอ โดยขึ้นอยู่กับว่ากรณีใดจะเกิดขึ้นก่อน)
– องค์ประกอบที่มีภาพพื้นหลังที่โหลดโดยใช้ฟังก์ชัน url() (ตรงข้ามกับการไล่ระดับสี CSS)
– องค์ประกอบระดับบล็อกที่มีโหนดข้อความหรือองค์ประกอบข้อความระดับอินไลน์อื่นๆ
2. First Input Delay (FID)
FID จะวัดระยะเวลาตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก เช่น เมื่อผู้ใช้คลิกลิงก์ แตะปุ่ม หรือใช้การควบคุมที่กำหนดเองด้วย JavaScript ไปจนถึงตอนที่เบราว์เซอร์เริ่มประมวลผลตัวแฮนเดิลเหตุการณ์เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง เพื่อมอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ เว็บไซต์ควรพยายามให้มี First Input Delay ไม่เกิน 100 มิลลิวินาที เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นที่ 75 ของการโหลดหน้าเว็บตามกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
หมายเหตุ : ตั้งแต่เดือนมีนาคม 2024 เป็นต้นไป Interaction to Next Paint (INP) จะเป็น Core Web Vital ที่มาแทนที่ FID
3. Cumulative Layout Shift (CLS)
CLS คือการวัดคะแนนการเปลี่ยนแปลงของเลย์เอาต์ที่เพิ่มขึ้นมากที่สุดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดซึ่งเกิดขึ้นตลอดอายุการใช้งานของหน้าเว็บ การเปลี่ยนเลย์เอาต์จะเกิดขึ้นทุกครั้งที่องค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งจากเฟรมที่แสดงผลหนึ่งไปยังเฟรมถัดไป
การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นอย่างรวดเร็ว หรือที่เรียกว่ากรอบเวลาเซสชัน คือการเปลี่ยนแปลงเลย์เอาต์อย่างน้อย 1 รายการเกิดขึ้นติดต่อกันอย่างรวดเร็วโดยมีการเปลี่ยนแปลงแต่ละครั้งไม่ถึง 1 วินาที ในช่วงเวลาไม่เกิน 5 วินาที
การเปลี่ยนเลย์เอาต์จะเกิดขึ้นเมื่อองค์ประกอบที่มีอยู่เปลี่ยนตำแหน่งเริ่มต้นเท่านั้น หากมีการเพิ่มองค์ประกอบใหม่ลงใน DOM หรือขนาดองค์ประกอบที่มีอยู่เปลี่ยนแปลง ระบบจะนับเป็นการเปลี่ยนเลย์เอาต์ก็ต่อเมื่อการเปลี่ยนแปลงดังกล่าวทำให้องค์ประกอบอื่นๆ ที่มองเห็นได้เปลี่ยนตำแหน่งเริ่มต้น
เว็บไซต์ต้องมีคะแนน CLS เท่ากับ 0.1 หรือน้อยกว่าเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี
ตัวอย่างเมื่อองค์ประกอบเปลี่ยนตำแหน่ง ทั้งตำแหน่งก่อนหน้าและปัจจุบัน รูปภาพนี้แสดงองค์ประกอบที่ใช้พื้นที่ครึ่งหนึ่งของวิวพอร์ตในเฟรมเดียว ทีนี้ในเฟรมถัดไปองค์ประกอบจะเลื่อนลง 25% ของความสูงของวิวพอร์ต สี่เหลี่ยมผืนผ้าเส้นประสีแดงแสดงถึงพื้นที่ที่มองเห็นได้ขององค์ประกอบในทั้ง 2 เฟรม ซึ่งในกรณีนี้คือ 75% ของวิวพอร์ตทั้งหมด ดังนั้น เศษส่วนผลกระทบจึงเป็น 0.75
ทำไมการผ่านเกณฑ์ Core Web Vitals จึงมีความสำคัญ
มีสถิติผู้ใช้ 40% ออกจากเว็บไซต์หากใช้เวลาโหลดนานกว่าสามวินาที แต่ผู้ใช้เข้าชมหน้าเว็บเพิ่มขึ้น 60% หากเว็บไซต์โหลดภายใน 3 วินาที ทีนี้เราเริ่มเห็นความสำคัญของมันหรือยังครับ
สาเหตุที่ไม่ผ่านเกณฑ์ Core Web Vitals
คราวนี้เราจะมาดูสาเหตุที่ทำให้ Core Web Vitals ของเราสอบตกกันครับ
เซิร์ฟเวอร์ตอบสนองช้า
ถ้าเซิร์ฟเวอร์ของเราใช้เวลานานเกินไปในการเริ่มส่งข้อมูลไปยังเบราว์เซอร์ของผู้ใช้ อาจส่งผลเสียต่อคะแนน Largest Contentful Paint (LCP) ได้ สาเหตุนี้เกิดจากปัญหาโฮสต์เลยครับ ตำแหน่งทางกายภาพของเซิร์ฟเวอร์ที่เกี่ยวข้องกับผู้ใช้ หรือแม้แต่การกำหนดค่าเซิร์ฟเวอร์ไม่ถูกต้อง อาจจะต้องพิจารณาดูเรื่อง Content Delivery Network หรือ CDN เพิ่มเติม รวมถึงการเพิ่มประสิทธิภาพของเซิร์ฟเวอร์สามารถแก้ปัญหานี้ได้ครับ
รูปภาพไม่ได้บีบอัดขนาดไฟล์
บางคนออกแบบภาพสวยแต่ไม่ได้บีบอัด ขนาดไฟล์ภาพใหญ่เกินไปทำให้โหลดหน้าเว็บช้า รูปภาพจำนวนมากไม่ได้รับการปรับให้เหมาะสม รวมถึงวิดีโอและภาพเคลื่อนไหว ทำให้เวลาในการโหลดหน้าเว็บช้าลงอย่างมาก ซึ่งส่งผลต่อเกณฑ์ LCP เราควรพิจารณาใช้รูปแบบไฟล์เป็นนามสกุล WebP บีบอัดรูปภาพโดยไม่เสียคุณภาพ และใช้การโหลดแบบ Lazy Loading สำหรับรูปภาพครึ่งหน้าล่าง ถ้าเราสามารถลดขนาดไฟล์ จะช่วยเพิ่มความเร็วของหน้าได้
ปัญหา JavaScript และไฟล์ CSS
ถ้าไฟล์ JavaScript และ CSS ไม่ได้ Optimize อาจทำให้การแสดงผลบนเว็บล่าช้า สคริปต์หรือสไตล์ชีตเหล่านี้อาจส่งผลเสียต่อทั้ง LCP และ First Input Delay (FID) วิธีการแก้ไขให้ลดขนาดและบีบอัดไฟล์ หรือใช้การ Delay JS ที่ไม่สำคัญ รวมถึงการปรับ CSS ให้เป็นแบบ inline
การปรับแต่งหน้าเว็บบนหน้าจอมือถือยังไม่ดีพอ
ถ้าการเข้าชมเว็บบนมือถือโหลดนานเกิน 3 วินาที ควรตรวจสอบปัญหาต่างๆ เช่น การออกแบบที่ไม่ Responsive และเนื้อหาที่ไม่ได้รับการปรับปรุงประสิทธิภาพ ซึ่งอาจทำให้ไม่ผ่านเกณฑ์ Core Web Vitals โดยเฉพาะในเครือข่ายมือถือที่ช้า
มีการเรียก HTTP Requests มากเกิน
เมื่อเริ่มโหลดหน้าเว็บ เว็บเพจจะส่งคำขอหลายรายการสำหรับองค์ประกอบทั้งหมดไปยังเบราว์เซอร์ เพื่อเริ่มต้นกระบวนการเรนเดอร์ คำขอ HTTP เพิ่มเติมทุกคำขอสำหรับสคริปต์ รูปภาพ CSS จะเพิ่มเวลาในการโหลดหน้าเว็บ การลดคำขอเหล่านี้ด้วยการรวมไฟล์จะช่วยเพิ่มความเร็วของหน้าได้
ปัญหาสคริปท์จากปลั๊กอินอื่นๆ
วิดเจ็ตที่ฝังไว้ สคริปท์ข้อมูลวิเคราะห์ โฆษณา และสคริปต์ของบุคคลที่สามอื่นๆ อาจทำให้หน้าเว็บช้าลงมาก ซึ่งส่งผลต่อ Core Web Vitals หลายรายการ ให้เราตรวจสอบผลกระทบด้านประสิทธิภาพของสคริปต์บุคคลที่สาม ให้ใช้การ defer non-critical ที่ไม่สำคัญ และโหลดเฉพาะทรัพยากรภายนอกที่จำเป็นเท่านั้น
ท้ายที่สุดให้ลองใช้ปลั๊กอินที่ช่วยในการปรับแต่งความไว เช่น WP Rocket หรือปลั๊กอินแคชอื่นๆ ที่ช่วย Optimize ไฟล์ CSS และ JavaScript ก็จะช่วยให้เราผ่านด่าน Core Web Vitals ได้ง่ายยิ่งขึ้นครับ
สรุป
การปรับปรุง Core Web Vitals ของเว็บไซต์ย่อมส่งผลดีต่อประสบการณ์ผู้ใช้และ SEO การวิเคราะห์สาเหตุของการ Failed และนำวิธีแก้ไขไปใช้ จะช่วยยกระดับคะแนน CWV ของเว็บ ส่งผลดีต่ออันดับการค้นหาและสร้างความพึงพอใจให้กับผู้ใช้งาน
Related Posts
