Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Largest Contentful Paint (LCP) เป็นเมตริก Core Web Vitals ที่เสถียรสําหรับการวัดความเร็วในการโหลดที่รับรู้ ซึ่งจะระบุจุดในไทม์ไลน์การโหลดหน้าเว็บเมื่อเนื้อหาหลักของหน้าโหลดขึ้น LCP ที่รวดเร็วช่วยให้ผู้ใช้มั่นใจได้ว่าหน้าเว็บมีประโยชน์

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

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

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

LCP คืออะไร

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

คะแนน LCP ที่ดีคืออะไร

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

องค์ประกอบใดบ้างถูกนำมาพิจารณา

ตามที่ระบุไว้ใน Largest Contentful Paint API ประเภทองค์ประกอบที่จะใช้พิจารณาสำหรับ Largest Contentful Paint มีดังนี้

• องค์ประกอบ <img> (เวลานำเสนอเฟรมแรกใช้สำหรับเนื้อหาภาพเคลื่อนไหว เช่น GIF หรือ PNG แบบเคลื่อนไหว)
• องค์ประกอบ <image> ภายในองค์ประกอบ <svg>
• องค์ประกอบ <video> (ใช้เวลาในการโหลดภาพโปสเตอร์หรือเวลานำเสนอเฟรมแรกสำหรับวิดีโอ โดยขึ้นอยู่กับว่ากรณีใดจะเกิดขึ้นก่อน)
• องค์ประกอบที่มีภาพพื้นหลังที่โหลดโดยใช้ฟังก์ชัน url() (ตรงข้ามกับการไล่ระดับสี CSS)
• องค์ประกอบระดับบล็อกที่มีโหนดข้อความหรือองค์ประกอบข้อความระดับอินไลน์อื่นๆ

การจำกัดองค์ประกอบให้อยู่ในกลุ่มที่จำกัดนี้มีวัตถุประสงค์เพื่อลดความซับซ้อน เราอาจเพิ่มองค์ประกอบอื่นๆ (เช่น การรองรับ <svg> เต็มรูปแบบ) ในอนาคตเมื่อมีการค้นคว้าเพิ่มเติม

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

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

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

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

ระบบกำหนดขนาดขององค์ประกอบอย่างไร

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

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

สำหรับองค์ประกอบของข้อความ LCP จะพิจารณาเฉพาะสี่เหลี่ยมผืนผ้าที่เล็กที่สุดที่มีโหนดข้อความทั้งหมด

สำหรับองค์ประกอบทั้งหมด LCP จะไม่พิจารณาการใช้ระยะขอบ ระยะห่างจากขอบ หรือเส้นขอบโดยใช้ CSS

ระบบจะรายงาน LCP เมื่อใด

หน้าเว็บมักจะโหลดเป็นระยะ องค์ประกอบที่ใหญ่ที่สุดในหน้าจึงอาจเปลี่ยนแปลงระหว่างการโหลด

ในการรับมือกับโอกาสที่จะเกิดการเปลี่ยนแปลงนี้ เบราว์เซอร์จะจ่าย PerformanceEntry ประเภท largest-contentful-paint เพื่อระบุองค์ประกอบที่มีเนื้อหาขนาดใหญ่ที่สุดทันทีที่เบราว์เซอร์ได้แสดงผลเฟรมแรก หลังจากแสดงผลเฟรมถัดไปแล้ว เฟรมจะส่งต่อไปอีกPerformanceEntry ทุกครั้งที่องค์ประกอบที่มีเนื้อหาเต็มมีการเปลี่ยนแปลงมากที่สุด

เช่น ในหน้าที่มีข้อความและรูปภาพหลัก เบราว์เซอร์อาจแสดงผลเฉพาะข้อความในตอนแรก และเบราว์เซอร์จะส่งรายการ largest-contentful-paint ซึ่งพร็อพเพอร์ตี้ element อ้างอิงถึง <p> หรือ <h1> หลังจากรูปภาพหลักโหลดเสร็จแล้ว ระบบจะส่งรายการ largest-contentful-paint รายการที่ 2 โดยมีพร็อพเพอร์ตี้ element อ้างอิง <img>

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

นอกจากรูปภาพและแบบอักษรที่โหลดล่าช้าแล้ว หน้าเว็บอาจเพิ่มองค์ประกอบใหม่ลงใน DOM เมื่อมีเนื้อหาใหม่พร้อมใช้งาน หากองค์ประกอบใหม่เหล่านี้มีขนาดใหญ่กว่าองค์ประกอบเนื้อหาขนาดใหญ่ที่สุดก่อนหน้านี้ ระบบจะสร้าง PerformanceEntry ใหม่

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

เบราว์เซอร์จะหยุดการรายงานรายการใหม่ทันทีที่ผู้ใช้โต้ตอบกับหน้าเว็บ (ผ่านการแตะ เลื่อน หรือกดแป้น) เนื่องจากการโต้ตอบของผู้ใช้มักเปลี่ยนแปลงสิ่งที่แสดงต่อผู้ใช้ (โดยเฉพาะเมื่อเลื่อน)

เพื่อวัตถุประสงค์ในการวิเคราะห์ โปรดรายงานเฉพาะ PerformanceEntry ที่ส่งไปยังบริการข้อมูลวิเคราะห์ครั้งล่าสุด

เวลาที่ใช้ในการโหลดกับเวลาที่ใช้ในการแสดงผล

ด้วยเหตุผลด้านความปลอดภัย การประทับเวลาการแสดงผลของรูปภาพจะไม่แสดงสำหรับรูปภาพข้ามต้นทางที่ไม่มีส่วนหัว Timing-Allow-Origin แต่จะมีเฉพาะเวลาในการโหลดที่ API อื่นๆ แสดงอยู่แล้วเท่านั้นที่ใช้ได้

ซึ่งอาจนำไปสู่สถานการณ์ที่ดูจะเป็นไปไม่ได้หาก API ของเว็บรายงาน LCP เร็วกว่า FCP ที่เป็นเช่นนี้เพราะข้อจำกัดด้านความปลอดภัยนี้เท่านั้น และไม่ได้แสดงถึงสิ่งที่เกิดขึ้นจริงๆ

ถ้าเป็นไปได้ เราแนะนำให้ตั้งค่าส่วนหัว Timing-Allow-Origin เพื่อทำให้เมตริกแม่นยำยิ่งขึ้น

การเปลี่ยนแปลงเลย์เอาต์และขนาดองค์ประกอบมีการจัดการอย่างไร

เพื่อรักษาประสิทธิภาพที่เพิ่มขึ้นในการคำนวณและจ่ายรายการประสิทธิภาพใหม่ให้ต่ำ การเปลี่ยนแปลงขนาดหรือตำแหน่งขององค์ประกอบจะไม่สร้างตัวเลือก LCP ใหม่ ระบบจะพิจารณาเฉพาะขนาดและตำแหน่งเริ่มต้นขององค์ประกอบในวิวพอร์ต

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

ตัวอย่าง

ตัวอย่างเมื่อ Largest Contentful Paint เกิดในเว็บไซต์ยอดนิยมบางแห่ง

ในไทม์ไลน์ทั้ง 2 นี้ องค์ประกอบที่ใหญ่ที่สุด (ไฮไลต์ด้วยสีเขียว) จะเปลี่ยนไปเมื่อโหลดเนื้อหา ในตัวอย่างแรก จะมีการเพิ่มเนื้อหาใหม่ลงใน DOM โดยเปลี่ยนองค์ประกอบที่ใหญ่ที่สุด ในตัวอย่างที่ 2 เลย์เอาต์จะเปลี่ยนไปโดยนำองค์ประกอบเนื้อหาที่ใหญ่ที่สุดก่อนหน้าออกจากวิวพอร์ต

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

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

วิธีวัด LCP

LCP สามารถวัดได้ในห้องทดลองหรือในการทดลอง และมีให้ใช้งานในเครื่องมือต่อไปนี้

เครื่องมือภาคสนาม

• รายงานประสบการณ์ของผู้ใช้ Chrome
• PageSpeed Insights
• Search Console (รายงาน Core Web Vitals)
• ไลบรารี JavaScript web-vitals รายการ

เครื่องมือสำหรับห้องทดลอง

• เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
• Lighthouse
• PageSpeed Insights
• WebPageTest

วัด LCP ใน JavaScript

หากต้องการวัด LCP ใน JavaScript ให้ใช้ Largest Contentful Paint API ตัวอย่างต่อไปนี้แสดงวิธีสร้าง PerformanceObserver ที่รอฟังรายการ largest-contentful-paint และบันทึกไว้ในคอนโซล

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

ในตัวอย่างก่อนหน้านี้ รายการ largest-contentful-paint ที่บันทึกไว้แต่ละรายการแสดงถึงตัวเลือก LCP ปัจจุบัน โดยทั่วไปค่า startTime ของรายการสุดท้ายที่ปล่อยออกมาจะเป็นค่า LCP อย่างไรก็ตาม รายการlargest-contentful-paintบางรายการไม่ถูกต้องสำหรับการวัด LCP

ส่วนต่อไปนี้แสดงความแตกต่างระหว่างรายงาน API และวิธีคำนวณเมตริก

ความแตกต่างระหว่างเมตริกกับ API

• API จะส่ง largest-contentful-paint รายการสำหรับหน้าที่โหลดในแท็บเบื้องหลัง แต่ระบบจะไม่สนใจหน้าเหล่านั้นเมื่อคำนวณ LCP
• API จะยังคงส่ง largest-contentful-paint รายการต่อไปหลังจากที่หน้าเว็บทำงานอยู่เบื้องหลัง แต่ระบบควรละเว้นรายการเหล่านั้นเมื่อคำนวณ LCP ระบบจะพิจารณาองค์ประกอบได้ก็ต่อเมื่อหน้าเว็บอยู่เบื้องหน้าตลอดเวลา
• API จะไม่รายงาน largest-contentful-paint รายการเมื่อกู้คืนหน้าจาก Back/Forward Cache แต่ควรวัด LCP ในกรณีเหล่านี้เนื่องจากผู้ใช้พบว่าหน้าเหล่านั้นเป็นการเข้าชมหน้าที่แตกต่างกัน
• API ไม่พิจารณาองค์ประกอบภายใน iframe แต่เมตริกดังกล่าวพิจารณาเพราะองค์ประกอบเหล่านี้เป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้หน้าเว็บ ในหน้าที่มี LCP ใน iframe เช่น ภาพโปสเตอร์ในวิดีโอที่ฝัง จะแสดงความแตกต่างระหว่าง CrUX กับ RUM คุณต้องระบุ iframe เพื่อให้วัด LCP ได้อย่างถูกต้อง เฟรมย่อยสามารถใช้ API เพื่อรายงานรายการ largest-contentful-paint ของตนไปยังเฟรมหลักเพื่อการรวมได้
• API จะวัด LCP จากจุดเริ่มต้นการนําทาง สำหรับหน้าที่แสดงผลล่วงหน้า ให้วัด LCP จาก activationStart แทน เนื่องจากระยะเวลาดังกล่าวสอดคล้องกับเวลา LCP ที่ผู้ใช้พบ

เราขอแนะนำให้นักพัฒนาแอปใช้ไลบรารี JavaScript web-vitals เพื่อวัด LCP เพื่อรับมือกับความแตกต่างส่วนใหญ่เหล่านี้ให้คุณ แทนการจดจำความแตกต่างเล็กๆ น้อยๆ เหล่านี้ (ไม่ครอบคลุมถึง ปัญหาเกี่ยวกับ iframe)

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

โปรดดูซอร์สโค้ดของ onLCP() เพื่อดูตัวอย่างทั้งหมดเกี่ยวกับวิธีวัด LCP ใน JavaScript

จะเกิดอะไรขึ้นถ้าองค์ประกอบที่ใหญ่ที่สุดไม่ใช่องค์ประกอบที่สำคัญที่สุด

ในบางกรณี องค์ประกอบที่สำคัญที่สุด (หรือหลายองค์ประกอบ) ในหน้าเว็บอาจไม่เหมือนกับองค์ประกอบที่ใหญ่ที่สุด และนักพัฒนาซอฟต์แวร์อาจสนใจที่จะวัดเวลาในการแสดงผลขององค์ประกอบอื่นๆ เหล่านี้แทน ซึ่งทำได้โดยใช้ Element Timing API ตามที่อธิบายไว้ในบทความเกี่ยวกับเมตริกที่กำหนดเอง

วิธีปรับปรุง LCP

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

แหล่งข้อมูลเพิ่มเติม

• บทเรียนที่ได้รับจากการตรวจสอบประสิทธิภาพใน Chrome โดย Annie Sullivan ที่ performance.now() (2019)

บันทึกการเปลี่ยนแปลง

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

การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคําจํากัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยให้คุณจัดการเรื่องดังกล่าวได้

หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดระบุไว้ในกลุ่ม Google web-vitals-feedback