Core Web Vitals: ทุกสิ่งที่คุณต้องการทราบ

1. การปรับปรุงคะแนน LCP

ตามหลักเกณฑ์ของ Google LCP เกณฑ์มาตรฐานดังกล่าวได้แบ่งออกเป็นสามเกณฑ์มาตรฐาน

• ดี : 0 ถึงน้อยกว่า 2.5 วินาที
• จำเป็นต้องปรับปรุง: 2.5 วินาทีเป็น 4.0 วินาที
• แย่: มากกว่า 4.0 วินาที

การมีคะแนน LCP ที่ดี คุณจะต้องเข้าชมทุกหน้าเว็บในเว็บไซต์ของคุณให้ต่ำกว่า 2.5 วินาที ซึ่งอาจเป็นเรื่องที่ท้าทายมากสำหรับเว็บไซต์ขนาดใหญ่ที่มีหลายหน้าและฟีเจอร์ที่ซับซ้อน

ตัวอย่างเช่น หากหน้าเว็บของคุณมีรูปภาพที่มีความละเอียดสูงจำนวนมาก คะแนน LCP ของหน้าเว็บอาจนานกว่า 4.0 วินาที และเชื่อฉันเถอะว่าจะไม่ปรับปรุงแม้ว่าคุณจะติดตั้ง CDN เพียงอย่างเดียวก็ตาม

ในกรณีนี้ คุณจะต้องปรับแต่ละหน้าให้เหมาะสม หรือถ้าเป็นไปได้ ให้ลบบางหน้าที่ไม่สำคัญออก นอกจากนี้ยังเพิ่มประสิทธิภาพโค้ดของหน้าอีกด้วย

อาจฟังดูเป็นงานที่น่ากังวลมาก แต่ก็คุ้มค่า และคุณจะเห็นการเปลี่ยนแปลงด้านประสิทธิภาพอย่างมาก

โปรดทราบว่าคุณสามารถทำสิ่งต่างๆ ได้มากขึ้นจากฝั่งของคุณ เช่น:

• อัปเกรดหรือย้ายไปยัง เว็บโฮสติ้งที่มีการจัดการอย่างรวดเร็ว: เว็บโฮสติ้งที่เร็วกว่าและดีกว่าจะปรับปรุงประสิทธิภาพของเว็บไซต์และด้วยเหตุนี้คะแนน LCP ที่ดีขึ้น
• ลบสคริปต์ที่ไม่ต้องการ: สคริปต์บุคคลที่สามที่ไม่ต้องการทำงานในพื้นหลังและทำให้การโหลดล่าช้าโดยไม่จำเป็น
• เปิดใช้งานการแคชเพจ: จะช่วยให้เพจถูกจัดเก็บไว้ในเซิร์ฟเวอร์หลังจากโหลดเป็นครั้งแรก และสามารถเรียกข้อมูลเว็บไซต์ได้อย่างง่ายดายทุกครั้งที่ผู้เยี่ยมชมร้องขอเพจ
• ปิดการใช้งานปลั๊กอิน Lazy Loading: แม้ว่าการโหลดแบบ Lazy Loading จะเป็นฟีเจอร์ในตัวที่มีให้ใน WordPress 5.5 หากคุณกำลังใช้งาน (ขับเคลื่อนโดย JavaScript โดยเฉพาะ) ให้กำหนดค่าใหม่เพื่อหลีกเลี่ยงการโหลดรูปภาพหลักบนเพจของคุณแบบ Lazy Loading หรืออย่างอื่นที่ต้องการปิดใช้งานการโหลดแบบ Lazy Loading

หากต้องการเรียนรู้เพิ่มเติม คุณสามารถดูโพสต์เฉพาะของเราใน "Largest Contentful Paint (LCP): A Guide to Web Performance"

2. ปรับปรุง CLS

CLS หรือ Cumulative Layout Shift วัดความเสถียรของการมองเห็นของเว็บเพจ หมายถึงจำนวนองค์ประกอบของหน้าเว็บที่มีเสถียรภาพในขณะที่หน้าเว็บกำลังโหลด

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

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

Google วัดคะแนน CLS ด้วยวิธีต่อไปนี้:

• ดี: ค่าต่ำกว่า 0.1
• จำเป็นต้องปรับปรุง: 0.1 ถึง 0.25
• แย่: มากกว่า 0.25

เคล็ดลับง่ายๆ ในการปรับปรุงคะแนน CLS ของคุณมีดังนี้

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

3. ปรับปรุง FID

ณ ตอนนี้ คุณได้ปรับปรุง CLS และ FCP แล้ว แต่คำถามหลักคือผู้เยี่ยมชมโต้ตอบกับหน้าเว็บหรือไม่

นี่คือที่มาของ FID: โดยพื้นฐานแล้วจะวัดเวลาโต้ตอบของผู้ใช้กับหน้าเว็บ

การโต้ตอบอาจเป็นอะไรก็ได้ เช่น การคลิกปุ่ม กรอกแบบฟอร์ม การคลิกตัวเลือกในเมนู ฯลฯ

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

ด้วยเหตุนี้ Google จึงวัด FID ดังนี้

• ดี: ต่ำกว่า 100 ms
• ต้องการการปรับปรุง: ระหว่าง 100 ms ถึง 300 ms
• ไม่ดี: มากกว่า 300 ms

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

ทุกหน้าอาจมีคะแนน FID ที่แตกต่างกัน ขึ้นอยู่กับเนื้อหาและฟีเจอร์ที่มี

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

อย่างไรก็ตาม หากเป็นหน้าลงทะเบียน FID อาจมีขนาดใหญ่ เนื่องจากจะถูกวัดเมื่อผู้ใช้เริ่มพิมพ์รายละเอียดการเข้าสู่ระบบ

โปรดคำนึงถึงสิ่งเหล่านี้ทั้งหมด นี่คือเคล็ดลับบางส่วนที่คุณสามารถปฏิบัติตามเพื่อปรับปรุง FID ของคุณ

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

4. ปรับปรุง INP

ตัวชี้วัดนี้เหมือนกับ FID แต่จะมีความเฉพาะเจาะจงมากกว่าในการวัดการตอบสนองโดยรวมตลอดการโต้ตอบของผู้ใช้กับหน้าเว็บ

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

หากต้องการปรับปรุง INP ต่อไปนี้เป็นเคล็ดลับบางส่วนที่คุณสามารถปฏิบัติตามได้:

• ใช้ CDN หรือเครือข่ายการจัดส่งเนื้อหา
• ลบสคริปต์บุคคลที่สาม
• เปิดใช้งานการแคชเบราว์เซอร์
• ปรับภาพให้เหมาะสม
• ลดเวลาในการโหลด JavaScript ให้เหลือน้อยที่สุด