Como diagnosticar e melhorar um LCP lento?

Question

IT Interview Practice · Accepted Answer

Comece descobrindo **qual é o elemento de LCP** e **por que ele está atrasado**. O LCP se divide em quatro subpartes — corrija a maior delas. ## Diagnóstico: as quatro subpartes do LCP ```text [ TTFB ] ─▶ [ Atraso de carga do recurso ] ─▶ [ Tempo de carga do recurso ] ─▶ [ Atraso de render ] servidor quando o fetch COMEÇA baixar a imagem pintá-la ``` O Chrome DevTools e o PageSpeed Insights mostram qual fatia domina. Culpados comuns: servidor lento (TTFB), a imagem de LCP descoberta tarde, ou um script/CSS render-blocking atrasando o paint. ## Correções por subparte - **TTFB lento** → faça cache do HTML em um CDN, use SSG/ISR, acelere a origem/banco de dados. - **Atraso de carga (imagem encontrada tarde)** → faça preload dela e eleve sua prioridade para que o navegador a busque imediatamente em vez de depois do CSS/JS: ```html

``` - **Tempo de carga (imagem grande demais)** → sirva AVIF/WebP, dimensione corretamente com `srcset`, comprima. - **Atraso de render** → corte CSS/JS render-blocking; faça inline do CSS crítico; use `defer` nos scripts. ## Armadilhas - Fazer lazy-load da imagem de LCP (ou escondê-la atrás da hidratação por JS) — a ferida de LCP autoinfligida número 1. - Web fonts bloqueando o texto de LCP; use `font-display: swap` e faça `preload` da fonte. - Otimizar o LCP de laboratório enquanto usuários reais no 4G continuam lentos — sempre confirme com dados de campo. ## Por que isso importa O LCP é a principal métrica de carregamento e um fator de ranking de busca. Ser capaz de nomear as quatro subpartes e mapear cada uma para uma correção concreta é exatamente a abordagem estruturada e orientada a evidências que os entrevistadores buscam.

Diagnóstico: as quatro subpartes do LCP

Correções por subparte

Armadilhas

Por que isso importa

Perguntas relacionadas