การแสดงผลเนื้อหาขนาดใหญ่ที่สุด

Largest Contentful Paint (LCP) เป็นหนึ่งในเมตริกที่ติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse เมตริกแต่ละรายการจะจับภาพแง่มุมบางอย่างของความเร็วในการโหลดหน้าเว็บ

Lighthouse จะแสดง LCP เป็นวินาที ดังนี้

คะแนน Largest Contentful Paint ของ Lighthouse ที่ไฮไลต์ในส่วนเมตริก
คะแนน Largest Contentful Paint ของ Lighthouse

สิ่งที่ LCP วัด

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

วิธีที่ Lighthouse กำหนดคะแนน LCP

Lighthouse จะดึงข้อมูล LCP จากเครื่องมือการติดตามของ Chrome

ตารางต่อไปนี้แสดงวิธีตีความคะแนน LCP บนอุปกรณ์เคลื่อนที่

เวลา LCP
(เป็นวินาที)
การเขียนโค้ดสี
0-2.5 สีเขียว (เร็ว)
2.5-4 ส้ม (ปานกลาง)
มากกว่า 4 คน สีแดง (ช้า)
เกณฑ์ LCP บนอุปกรณ์เคลื่อนที่ของ Lighthouse

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

ตารางต่อไปนี้แสดงวิธีตีความคะแนน LCP บนเดสก์ท็อป

เวลา LCP
(เป็นวินาที)
การเขียนโค้ดสี
0-1.2 สีเขียว (เร็ว)
1.2-2.4 ส้ม (ปานกลาง)
มากกว่า 2.4 สีแดง (ช้า)
เกณฑ์ LCP บนเดสก์ท็อปของ Lighthouse

วิธีปรับปรุงคะแนน LCP

หาก LCP เป็นรูปภาพ ช่วงเวลาจะแบ่งออกเป็น 4 ส่วนย่อย การทราบว่าส่วนย่อยใดใช้เวลานานที่สุดจะช่วยให้คุณเพิ่มประสิทธิภาพ LCP ได้ Lighthouse จะแสดงองค์ประกอบ LCP พร้อมกับรายละเอียดของส่วนย่อยในการวินิจฉัย "องค์ประกอบ Largest Contentful Paint"

ส่วนย่อยของ LCP คำอธิบาย
เวลาที่ได้รับข้อมูลไบต์แรก (TTFB) ระยะเวลาตั้งแต่ที่ผู้ใช้เริ่มโหลดหน้าเว็บจนถึงเวลาที่เบราว์เซอร์ได้รับไบต์แรกของการตอบกลับเอกสาร HTML ดูข้อมูลเพิ่มเติมเกี่ยวกับ TTFB
ความล่าช้าในการโหลด ส่วนต่างระหว่าง TTFB กับเวลาที่เบราว์เซอร์เริ่มโหลดทรัพยากร LCP
เวลาที่ใช้ในการโหลด เวลาที่ใช้ในการโหลดทรัพยากร LCP เอง
ความล่าช้าในการแสดงผล ค่าต่างระหว่างเวลาที่ทรัพยากร LCP โหลดเสร็จจนกว่าองค์ประกอบ LCP จะแสดงผลอย่างสมบูรณ์

แหล่งข้อมูล