Bagaimana anda mendiagnos dan menambah baik LCP yang perlahan?

Question

IT Interview Practice · Accepted Answer

Mulakan dengan mencari **apakah elemen LCP itu** dan **mengapa ia lewat**. LCP terurai kepada empat sub-bahagian — betulkan yang terbesar. ## Diagnos: empat sub-bahagian LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server bila fetch BERMULA muat turun imej paint ia ``` Chrome DevTools dan PageSpeed Insights menunjukkan hirisan mana yang mendominasi. Punca lazim: pelayan perlahan (TTFB), imej LCP ditemui lewat, atau skrip/CSS render-blocking yang melengahkan paint. ## Pembetulan mengikut sub-bahagian - **TTFB perlahan** → cache HTML di CDN, guna SSG/ISR, pantaskan origin/pangkalan data. - **Load delay (imej ditemui lewat)** → preload ia dan naikkan keutamaannya supaya browser mengambilnya serta-merta dan bukannya selepas CSS/JS: ```html

``` - **Load time (imej terlalu besar)** → sajikan AVIF/WebP, saizkannya betul dengan `srcset`, mampatkan. - **Render delay** → potong CSS/JS render-blocking; inline-kan CSS kritikal; `defer` skrip. ## Perangkap - Lazy-loading imej LCP (atau menyembunyikannya di sebalik hydration JS) — luka LCP nombor 1 yang dicederakan sendiri. - Web font menyekat teks LCP; guna `font-display: swap` dan `preload` font tersebut. - Mengoptimum LCP makmal (lab) sementara pengguna sebenar di 4G kekal perlahan — sentiasa sahkan dengan data lapangan. ## Mengapa ia penting LCP ialah metrik pemuatan utama dan faktor ranking carian. Mampu menamakan empat sub-bahagian dan memetakan setiap satu kepada pembetulan konkrit ialah pendekatan berstruktur dan dipacu-bukti yang penemu duga cari.

Diagnos: empat sub-bahagian LCP

Pembetulan mengikut sub-bahagian

Perangkap

Mengapa ia penting

Soalan berkaitan