คุณจะวินิจฉัยและปรับปรุง LCP ที่ช้าอย่างไร?

Question

IT Interview Practice · Accepted Answer

เริ่มจากการหาว่า **element ที่เป็น LCP คืออะไร** และ **ทำไมมันจึงล่าช้า** LCP แบ่งออกเป็นสี่ส่วนย่อย — แก้ที่ส่วนใหญ่ที่สุด ## วินิจฉัย: สี่ส่วนย่อยของ LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools และ PageSpeed Insights แสดงให้เห็นว่าส่วนไหนครองสัดส่วนมากที่สุด ตัวการที่พบบ่อย: server ที่ช้า (TTFB), รูป LCP ที่ถูกค้นพบช้า, หรือ script/CSS ที่ render-blocking ทำให้การ paint ล่าช้า ## การแก้ไขตามแต่ละส่วนย่อย - **TTFB ช้า** → cache HTML ที่ CDN, ใช้ SSG/ISR, เร่งความเร็ว origin/ฐานข้อมูล - **Load delay (พบรูปช้า)** → preload มันและยกระดับความสำคัญ (priority) เพื่อให้เบราว์เซอร์ fetch มันทันทีแทนที่จะรอหลัง CSS/JS: ```html

``` - **Load time (รูปใหญ่เกินไป)** → เสิร์ฟ AVIF/WebP, กำหนดขนาดให้เหมาะด้วย `srcset`, บีบอัด - **Render delay** → ตัด CSS/JS ที่ render-blocking; ฝัง critical CSS แบบ inline; `defer` script ## ข้อควรระวัง - การ lazy-load รูป LCP (หรือซ่อนมันไว้หลัง JS hydration) — แผล LCP ที่ทำร้ายตัวเองอันดับ 1 - Web font บล็อกข้อความ LCP; ใช้ `font-display: swap` และ `preload` ฟอนต์ - ปรับ LCP ในห้องทดลอง (lab) ในขณะที่ผู้ใช้จริงบน 4G ยังช้า — ยืนยันด้วย field data เสมอ ## ทำไมจึงสำคัญ LCP คือ metric การโหลดตัวหลักและเป็นปัจจัยจัดอันดับใน search การสามารถระบุสี่ส่วนย่อยและแมปแต่ละส่วนเข้ากับการแก้ไขที่เป็นรูปธรรมได้ คือแนวทางที่มีโครงสร้างและอิงหลักฐานที่ผู้สัมภาษณ์มองหาพอดี

วินิจฉัย: สี่ส่วนย่อยของ LCP

การแก้ไขตามแต่ละส่วนย่อย

ข้อควรระวัง

ทำไมจึงสำคัญ

คำถามที่เกี่ยวข้อง