Core Web Vitals - มันคืออะไรและจะปรับปรุงได้อย่างไร?

Google เปิดตัวโปรแกรมใหม่ในปี 2020 ซึ่งเรียกว่า Web Vitals หมายถึงเทคนิคที่ให้คำแนะนำเกี่ยวกับสัญญาณคุณภาพ ตามข้อมูลของ Google ตัวชี้วัดเหล่านี้มีความสำคัญต่อการนำเสนอประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนเว็บ ในเดือนพฤษภาคม 2564 Google เริ่มใช้ Core Web Vitals เป็นตัวชี้วัดสำหรับการจัดอันดับการค้นหาบนแพลตฟอร์ม

Core Web Vitals คืออะไร?

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

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

กำลังโหลด: เรียกอีกอย่างว่า Largest Contentful Paint (LCP) การโหลดจะวัดความเร็วที่องค์ประกอบที่ใหญ่ที่สุดโหลดและแสดงบนไซต์ องค์ประกอบเหล่านี้รวมถึงภาพเคลื่อนไหว วิดีโอ ข้อความ รูปภาพ และอื่นๆ

การโต้ตอบ: Google เรียกสิ่งนี้ว่า Cumulative Layout Shift (CLS) และทำให้แน่ใจว่าหน้าต่างๆ ในเว็บไซต์ไม่มีคุณลักษณะที่ไม่คาดคิดหรือการเคลื่อนไหวที่สับสนซึ่งน่าจะเบี่ยงเบนความสนใจหรือรบกวนผู้ใช้เมื่อบริโภคเนื้อหาในไซต์ของคุณ

ความเสถียรของภาพ: ในทางเทคนิคเรียกว่า First Input Delay (FID) และสะท้อนถึงระดับการตอบสนองของหน้าเว็บไซต์เมื่อผู้เข้าชมเว็บไซต์โต้ตอบกับพวกเขาในครั้งแรก FID ยังวัดความเร็วที่เบราว์เซอร์สามารถสร้างผลลัพธ์สำหรับผู้ใช้ในเว็บไซต์ของคุณ

วิธีปรับปรุง Core Web Vitals บนเว็บไซต์ของคุณ

สิ่งแรกที่ต้องทำคือเรียกใช้การวิเคราะห์ประสิทธิภาพเว็บไซต์อย่างรวดเร็ว เพื่อดูว่าเว็บไซต์ของคุณมีค่าบริการอย่างไรในเมตริก Web Vitals หลัก คุณสามารถใช้เครื่องมือต่างๆ สำหรับการวิเคราะห์นี้ รวมทั้ง Google Search Console และ Page Speed ​​Insights เป็นต้น หลังจากทำการวิเคราะห์ คุณอาจพบว่าคุณจำเป็นต้องนำเคล็ดลับต่อไปนี้ไปใช้เพื่อช่วยปรับปรุงไซต์ของคุณ

• ลดการทำงานจาวาสคริปต์

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

• ไปที่ไซต์ของคุณแล้วคลิกขวาที่ด้านใดด้านหนึ่งแล้วเลือก "ตรวจสอบ"

• คลิกที่แท็บ "แหล่งที่มา" และตรวจสอบจุดสามจุดที่ด้านล่าง เพิ่มเครื่องมือ "ครอบคลุม" และคลิกฟังก์ชันโหลด รอให้โหลดเสร็จ คุณจะเห็นปริมาณ JS ที่ไม่ได้ใช้บนเพจของคุณ

ด้วยความรู้นี้ คุณสามารถเริ่มลดการดำเนินการ JS ได้ วิธีหนึ่งที่คุณสามารถลดการดำเนินการได้คือการใช้การแยกโค้ด มันทำงานอย่างไร? แบ่งบันเดิล JavaScript ออกเป็นบิตที่เล็กลง JS ที่รวมเป็นไฟล์ที่รวมเข้าด้วยกันเพื่อป้องกันการร้องขอ HTTP มากเกินไปที่จำเป็นในการโหลดหน้าเว็บ

บีบอัดและปรับแต่งรูปภาพ

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

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

เราขอแนะนำให้คุณใช้รูปแบบ PNG สำหรับกราฟิกและ JPG สำหรับภาพแนวนอน นอกจากการบีบอัดรูปภาพแล้ว คุณยังสามารถเปิดใช้งาน CDN (Content Delivery Network) สำหรับรูปภาพในไซต์ของคุณได้

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

ใช้ Lazy Loading

การใช้การโหลดแบบ Lazy Loading เป็นสิ่งสำคัญมากในการแสดงภาพบนไซต์ของคุณ เมื่อคุณใช้เทคนิคนี้ คะแนน Web Vitals หลักและประสบการณ์ผู้ใช้ในไซต์ของคุณจะไม่ได้รับผลกระทบในทางลบ ดังนั้นขี้เกียจโหลดคืออะไร? การโหลดแบบขี้เกียจทำให้ไซต์ของคุณสามารถโหลดภาพได้ในขณะที่ผู้ใช้เลื่อนหน้าลง เพื่อให้แน่ใจว่าความเร็วในการโหลดของไซต์ของคุณจะไม่ลดลง และคุณสามารถบรรลุระดับคะแนน LCP สูงสุดได้ มีประโยชน์มากมายที่เกี่ยวข้องกับการโหลดแบบ Lazy Loading พวกเขารวมถึง:

• ปรับปรุงประสิทธิภาพของเว็บไซต์

• ข้อจำกัดการใช้แบนด์วิดท์

• ปรับปรุง SEO บนเว็บไซต์

• รักษาผู้เข้าชมเว็บไซต์และลดอัตราการตีกลับ

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

ใช้ขนาดที่เหมาะสมสำหรับการฝังและรูปภาพ

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

• ไปที่ YouTube และเปิดวิดีโอที่คุณต้องการฝังในไซต์ของคุณ

• มองหาปุ่มแชร์แล้วเลือก <> ตัวเลือกการฝัง

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

ความคิดสุดท้าย

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