แก้ไขข้อผิดพลาด LCP "มากกว่า" ใน Core Web Vitals บน GSC

Google เปิดตัวรายงานใหม่ในการค้นหาคอนโซลชื่อ Core Web Vitals รายงานความเร็วที่ถูกแทนที่เหล่านี้และกำลังจะได้รับการพิจารณาให้เป็นปัจจัยการจัดอันดับในปี 2021 Core Web Vitals จะได้รับการพิจารณาให้เป็นปัจจัยในการจัดอันดับควบคู่ไปกับ Page Speed, HTTPS ความเป็นมิตรกับอุปกรณ์เคลื่อนที่และปัจจัยอื่น ๆ บนหน้าเว็บ

Core Web Vital พิจารณาองค์ประกอบ UX และ UI บนเพจเพื่อหาค่าเฉลี่ยของเพจสำหรับเมตริกหลักสามตัว

1. LCP: Contentful Paint ที่ใหญ่ที่สุด
2. FID: ความล่าช้าในการป้อนข้อมูลครั้งแรก
3. CLS: การเปลี่ยนแปลงเค้าโครงสะสม

ไม่มีการแก้ไขรหัสเดียวโดยเฉพาะเพื่อแก้ปัญหาปัญหา แต่คุณสามารถเพิ่มประสิทธิภาพเว็บไซต์เพื่อแก้ไขข้อผิดพลาดได้ ที่นี่ฉันจะแสดงรายการแนวทางปฏิบัติบางอย่างที่สามารถช่วยคุณแก้ไขปัญหาใหญ่ที่สุด Contentful Paint (LCP) ‘มากกว่า' สำหรับหน้าเว็บของคุณ

↑ LCP คืออะไร?

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

↑ องค์ประกอบใดบ้างที่ได้รับการพิจารณาสำหรับ LCP

ประเภทขององค์ประกอบที่พิจารณาสำหรับสีที่มีเนื้อหาใหญ่ที่สุด ได้แก่

• <img> องค์ประกอบ
• <ภาพ> องค์ประกอบภายในไฟล์ <svg> ธาตุ
• <video> องค์ประกอบ
• องค์ประกอบที่มีภาพพื้นหลังโหลดผ่านไฟล์ url () ฟังก์ชัน
• องค์ประกอบระดับบล็อกที่มีโหนดข้อความหรือองค์ประกอบข้อความระดับอินไลน์อื่น ๆ

↑ สาเหตุของ LCP สูงคืออะไร?

• เวลาตอบสนองของเซิร์ฟเวอร์ช้า
• การบล็อกการแสดงผล JavaScript และ CSS
• เวลาในการโหลดทรัพยากรช้า
• การแสดงผลฝั่งไคลเอ็นต์

↑ วิธีเพิ่มประสิทธิภาพเว็บไซต์เพื่อแก้ไข LCP สูง?

ใช้โฮสติ้งที่ดีพร้อมเวลาตอบสนองที่ดีและอัตราเวลาแฝงต่ำ ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มประสิทธิภาพเซิร์ฟเวอร์ใช้ CDN ของบุคคลที่สามฟรีเช่น Cloudflare, jsDelivr, Statically เพื่อส่งมอบเนื้อหาคงที่อย่างรวดเร็ว หากคุณกำลังทำงานกับ WordPress มีปลั๊กอินจำนวนมากที่สามารถช่วยทำงานให้คุณได้

ใช้ภาพบีบอัดกับรูปแบบภาพยุคถัดไปเช่น JPEG XR, JPEG 2000 หรือ WebP รูปแบบที่ทันสมัยเหล่านี้ช่วยเพิ่มความเร็วในการโหลดรูปภาพได้ 50% มีปลั๊กอินสำหรับ WordPress เพียงไม่กี่ตัวที่ช่วยให้คุณบีบอัดและแปลงรูปภาพได้ทันที ใช้อิมเมจ CDN เช่น WP-Photon เพื่อลดแบนด์วิดท์ของเซิร์ฟเวอร์และเพิ่มความเร็วไซต์

คุณสามารถใช้บริการแคชเพื่อโหลด HTML แบบคงที่หน้าที่ไม่เปลี่ยนแปลงในทุกคำขอการแคชสามารถป้องกันไม่ให้สร้างขึ้นใหม่โดยไม่จำเป็น Cache Plugins จะจัดเก็บสำเนาของ HTML ที่สร้างขึ้นบนเซิร์ฟเวอร์ของคุณและเมื่อมีการร้องขอเพจเซิร์ฟเวอร์จะปล่อยการโหลดแคชซึ่งสามารถลด Time to First Byte (TTFB) และลดการใช้ทรัพยากรให้น้อยที่สุด

คุณยังสามารถใช้บริการต่างๆเช่น Cloudflare ซึ่งเรียกใช้พนักงานบริการในพื้นหลังของเบราว์เซอร์และสามารถสกัดกั้นคำขอจากเซิร์ฟเวอร์ได้ พวกเขาใช้แคช HTML ทั้งหมดของหน้าและแสดงหน้า HTML ก่อนแคชซึ่งสามารถลดเวลาในการโหลด

สิ่งสำคัญอื่น ๆ ที่ควรพิจารณาคือการเพิ่มประสิทธิภาพเว็บไซต์สำหรับ LCP ที่ดีคือ

• กำจัด JavaScript และ CSS ที่บล็อกการแสดงผล
• เลื่อน CSS ที่ไม่สำคัญ
• ลดทรัพยากร
• โหลดทรัพยากรที่สำคัญไว้ล่วงหน้า

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

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