Largest Contentful Paint (LCP): คู่มือทางเทคนิคฉบับสมบูรณ์และมาตรฐานการเพิ่มประสิทธิภาพ

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

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

ตอบ-สรุปข้อแรก

Largest Contentful Paint (LCP) คือตัววัด Core Web Vital ที่วัดความเร็วในการโหลดหน้าเว็บที่รับรู้ตามจังหวะเวลาที่บล็อกข้อความที่มองเห็นได้ที่ใหญ่ที่สุดหรือองค์ประกอบรูปภาพในวิวพอร์ตเสร็จสิ้นการเรนเดอร์คะแนน LCP ที่ผ่านคือ 2.5 วินาทีหรือน้อยกว่าสำหรับการเข้าชมหน้าเว็บอย่างน้อย 75% ในข้อมูลภาคสนามของผู้ใช้จริง (CrUX)เวลาแฝงของ LCP ประกอบด้วยส่วนย่อยที่แตกต่างกันสี่ส่วน ได้แก่ เวลาในการแสดงไบต์แรก (TTFB) ความล่าช้าในการโหลดทรัพยากร ระยะเวลาการโหลดทรัพยากร และความล่าช้าในการเรนเดอร์องค์ประกอบการเพิ่มประสิทธิภาพ LCP จำเป็นต้องมีการโหลดเนื้อหาฮีโร่ล่วงหน้า การปรับใช้ Edge Caching การบีบอัดรูปภาพเป็นรูปแบบ WebP/AVIF และกำจัด CSS และ JavaScript ที่บล็อกการแสดงผล

ระดับคะแนน LCP และเกณฑ์ Core Web Vitals

เพื่อมอบประสบการณ์ที่รวดเร็วและน่าดึงดูดแก่ผู้ใช้ หน้าเว็บจะต้องเป็นไปตามเกณฑ์ Core Web Vitals ที่ Google กำหนดไว้สำหรับ Largest Contentful Paint:

เพื่อให้ได้คะแนนผ่านสำหรับการประเมิน Core Web Vitals เว็บไซต์จะต้องได้รับคะแนน LCP ในหมวดหมู่ ดี ($\le 2.5\text{ วินาที}$) เป็นเวลาอย่างน้อย 75% ของการเข้าชมหน้าเว็บ โดยได้รับการประเมินในกลุ่มประชากรตามรุ่นบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ในข้อมูลภาคสนามในโลกแห่งความเป็นจริง

องค์ประกอบ DOM ใดบ้างที่มีสิทธิ์ได้รับการประเมิน LCP

ตามข้อกำหนด W3C Largest Contentful Paint อย่างเป็นทางการ เบราว์เซอร์จะตรวจสอบองค์ประกอบ DOM ที่มองเห็นได้เฉพาะซึ่งอยู่ภายในวิวพอร์ตเริ่มต้น:

• องค์ประกอบ <img> มาตรฐาน (รวมถึงรูปภาพที่แสดงผลภายในแท็ก <picture> แบบตอบสนอง)
• <image> องค์ประกอบที่ฝังอยู่ภายในคอนเทนเนอร์เวกเตอร์ <svg>
• ภาพโปสเตอร์วิดีโอ (แอตทริบิวต์ poster ในองค์ประกอบ <video>)
• องค์ประกอบที่มีภาพพื้นหลัง CSS โหลดผ่านฟังก์ชัน url()
• คอนเทนเนอร์ HTML ระดับบล็อกที่มีโหนดข้อความหรือองค์ประกอบข้อความอินไลน์ลูก (เช่น <h1> ถึง <h6> ส่วนหัว <p> ย่อหน้า หรือ <div> บล็อก)

การถอดรหัส LCP: สี่ส่วนย่อย

เพื่อวินิจฉัยและเพิ่มประสิทธิภาพคะแนน Largest Contentful Paint ที่ช้าได้อย่างมีประสิทธิภาพ วิศวกรด้านประสิทธิภาพจะแบ่งเวลาแฝงของ LCP ออกเป็นสี่ส่วนย่อยที่แตกต่างกัน:

1. Time to First Byte (TTFB): เวลาที่ผ่านไปจากการที่ผู้ใช้ร้องขอเพจจนกระทั่งเบราว์เซอร์ได้รับการตอบกลับไบต์แรกของเอกสาร HTML จากเซิร์ฟเวอร์เป้าหมาย: $< 800\text {ms} $ ($40%$ ของงบประมาณ LCP)
2. ความล่าช้าในการโหลดทรัพยากร: ความล่าช้าระหว่างเวลาที่เอกสาร HTML ได้รับไบต์ตอบสนองเสร็จสิ้น และเวลาที่เบราว์เซอร์ค้นพบและเริ่มดึงทรัพยากร LCP (เช่น รูปภาพหลัก)เป้าหมาย: $< 200\text {ms} $ ($10%$ ของงบประมาณ LCP)
3. ระยะเวลาการโหลดทรัพยากร: ระยะเวลาที่จำเป็นสำหรับเบราว์เซอร์ในการดาวน์โหลดอิมเมจ LCP หรือเนื้อหาแบบอักษรผ่านเครือข่ายเป้าหมาย: $< 800\text {ms} $ ($40%$ ของงบประมาณ LCP)
4. ความล่าช้าในการเรนเดอร์องค์ประกอบ: เวลาระหว่างที่ทรัพยากร LCP ดาวน์โหลดเสร็จสิ้นและเมื่อเบราว์เซอร์คำนวณเค้าโครงและระบายสีองค์ประกอบลงบนหน้าจอเป้าหมาย: $< 200\text {ms} $ ($10%$ ของงบประมาณ LCP)

ในทางคณิตศาสตร์ เวลาแฝงของ LCP ทั้งหมดคือผลรวมของสี่ส่วนย่อยเหล่านี้:

$$\text {LCP} = \text {TTFB} + \text{ความล่าช้าในการโหลดทรัพยากร} + \text{ระยะเวลาการโหลดทรัพยากร} + \text{ความล่าช้าในการเรนเดอร์องค์ประกอบ}$$

เทคนิคที่ได้รับการพิสูจน์แล้วเพื่อเพิ่มประสิทธิภาพ LCP

1. กำจัดความล่าช้าในการโหลดทรัพยากร: เพิ่ม <link rel="preload" as="image" href="..."> หรือ fetchpriority="high" ลงในแท็กรูปภาพหลักของคุณ เพื่อให้เบราว์เซอร์เริ่มการดาวน์โหลดรูปภาพทันทีระหว่างการแยกวิเคราะห์ HTML
2. เพิ่มประสิทธิภาพการตอบสนองของเซิร์ฟเวอร์ (TTFB): ปรับใช้ Edge Caching ผ่าน CDN เพิ่มประสิทธิภาพการสืบค้นฐานข้อมูล และใช้มัลติเพล็กซ์แบบพุชของเซิร์ฟเวอร์ HTTP/2 หรือ HTTP/3
3. บีบอัดและปรับแต่งรูปภาพให้ทันสมัย: ให้บริการรูปภาพหลักโดยใช้รูปแบบ WebP หรือ AVIF สมัยใหม่พร้อมขนาด srcset ที่ตอบสนองซึ่งปรับให้เหมาะกับขนาดหน้าจอมือถือและเดสก์ท็อป
4. ลดทรัพยากรที่บล็อกการแสดงผล: ใส่ CSS ที่สำคัญลงในแท็ก <head> และเลื่อน JavaScript ที่ไม่สำคัญออกไปโดยใช้แอตทริบิวต์สคริปต์ defer หรือ async
5. เพิ่มประสิทธิภาพการโหลดแบบอักษรของเว็บ: ใช้ font-display: swap หรือ font-display: optional ในกฎ CSS @font-face เพื่อให้แน่ใจว่าบล็อกข้อความจะยังคงมองเห็นได้ทันทีในขณะที่แบบอักษรของเว็บดาวน์โหลดผ่านเครือข่ายเสร็จแล้ว

LCP กับ First Contentful Paint (FCP) กับดัชนีความเร็ว

แม้ว่า LCP, FCP และดัชนีความเร็วจะวัดประสิทธิภาพการโหลดทั้งหมด แต่จะบันทึกความก้าวหน้าในการโหลดหน้าเว็บในด้านต่างๆ:

• First Contentful Paint (FCP): วัดเมื่อองค์ประกอบ DOM แรกสุด (เช่น สีพื้นหลัง สปินเนอร์ หรือข้อความส่วนหัว) เสร็จสิ้นการแสดงผลบนหน้าจอ
• Largest Contentful Paint (LCP): วัดเมื่อองค์ประกอบเนื้อหาภาพหลัก (แบนเนอร์หลักหรือบล็อกย่อหน้าหลัก) เสร็จสิ้นการเรนเดอร์
• ดัชนีความเร็ว: วัดความเร็วที่เนื้อหาภาพเต็มวิวพอร์ตในช่วงเวลาหนึ่งระหว่างการบันทึกความคืบหน้าของภาพ

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

การตรวจสอบ LCP อย่างต่อเนื่องด้วย SimpleOps

SimpleOps ทำให้การติดตาม Contentful Paint ที่ใหญ่ที่สุดเป็นไปโดยอัตโนมัติโดยบันทึกการตรวจสอบห้องปฏิบัติการ Lighthouse สังเคราะห์และเมตริกชุดข้อมูลช่องรายงาน Chrome UX (CrUX) ในแดชบอร์ดการตรวจสอบแบบรวมศูนย์เดียวSimpleOps ส่งการแจ้งเตือนเชิงรุกทันทีเมื่อใดก็ตามที่ LCP เปอร์เซ็นไทล์ที่ 75 ของไซต์ของคุณละเมิดงบประมาณด้านประสิทธิภาพ 2.5 วินาทีของคุณ เสริมศักยภาพให้ทีมของคุณปกป้อง Conversion และอันดับการค้นหา