Como fazer lazy-load de imagens e componentes, e por quê?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** adia o download de algo até que seja realmente necessário — geralmente quando está prestes a entrar na área visível ao rolar. Isso reduz o payload inicial para que a parte visível da página carregue mais rápido. ## Lazy-loading de imagens O navegador faz isso nativamente com um único atributo: ```html

``` Sempre mantenha `width`/`height` para que o navegador reserve o espaço (evita layout shift). Nunca faça lazy-load da sua imagem de LCP — isso atrasa justamente aquilo que está sendo medido. ## Lazy-loading de componentes (código) Separe UI pesada ou raramente usada (modais, gráficos) em um chunk separado carregado sob demanda: ```js // Em vez de um import estático que vai no bundle principal: const Chart = React.lazy(() => import("./Chart")); // chunk separado, buscado quando renderizado }> ``` O `import()` dinâmico diz ao bundler para criar um arquivo separado que só é baixado quando `` renderiza pela primeira vez. ## Por que isso importa Lazy-loading é a vitória mais simples e de maior alavancagem para uma página pesada: menos a baixar de início significa LCP mais rápido e menos JS a parsear. Entrevistadores querem ver você *não* fazer lazy-load da imagem de destaque — um erro clássico que prejudica a métrica que você está tentando ajudar.

Lazy-loading de imagens

Lazy-loading de componentes (código)

Por que isso importa

Perguntas relacionadas