Bagaimana kamu mendiagnosis dan memperbaiki LCP yang lambat?

Question

IT Interview Practice · Accepted Answer

Mulai dengan menemukan **apa elemen LCP-nya** dan **mengapa ia terlambat**. LCP terbagi menjadi empat sub-bagian — perbaiki yang terbesar. ## Diagnosis: empat sub-bagian LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server kapan fetch DIMULAI unduh gambar paint gambar ``` Chrome DevTools dan PageSpeed Insights menunjukkan irisan mana yang mendominasi. Penyebab umum: server lambat (TTFB), gambar LCP ditemukan terlambat, atau script/CSS yang render-blocking menunda paint. ## Perbaikan berdasarkan sub-bagian - **TTFB lambat** → cache HTML di CDN, gunakan SSG/ISR, percepat origin/database. - **Load delay (gambar ditemukan terlambat)** → preload dan naikkan prioritasnya agar browser mem-fetch-nya segera alih-alih setelah CSS/JS: ```html

``` - **Load time (gambar terlalu besar)** → sajikan AVIF/WebP, ukuran yang tepat dengan `srcset`, kompres. - **Render delay** → pangkas CSS/JS yang render-blocking; inline CSS kritis; `defer` script. ## Jebakan - Melakukan lazy-load gambar LCP (atau menyembunyikannya di balik hidrasi JS) — luka LCP nomor 1 yang ditimbulkan sendiri. - Web font memblokir teks LCP; gunakan `font-display: swap` dan `preload` font tersebut. - Mengoptimalkan LCP lab sementara pengguna nyata di 4G tetap lambat — selalu konfirmasi dengan field data. ## Mengapa ini penting LCP adalah metrik loading utama dan faktor ranking pencarian. Mampu menyebutkan empat sub-bagian dan memetakan masing-masing ke perbaikan konkret adalah persis pendekatan terstruktur berbasis-bukti yang dicari pewawancara.

Diagnosis: empat sub-bagian LCP

Perbaikan berdasarkan sub-bagian

Jebakan

Mengapa ini penting

Pertanyaan terkait