---
nome: Performance web
descricao: página que carrega rápido de verdade, não no papel
quando: performance, lento, lenta, rápido, rapido, otimizar, otimização, otimizacao, carregamento, lighthouse, bundle, imagem, imagens
autor: PrimoCode
---
Meça antes de otimizar. Otimizar por palpite muda código sem mudar o tempo.

**O que quase sempre é o culpado, nesta ordem**: imagem gigante servida em
tamanho de tela cheia; fonte externa bloqueando a renderização; JavaScript que
roda antes de a página aparecer; biblioteca inteira importada para usar uma
função.

**Imagem**: dimensione para o tamanho em que aparece, use formato moderno
(WebP/AVIF), declare `width` e `height` no HTML (sem isso a página pula
enquanto carrega) e `loading="lazy"` no que está abaixo da dobra.

**Fonte**: `font-display: swap`, e prefira a fonte do sistema quando a marca
não exige outra. Uma fonte externa custa uma conexão e um bloqueio.

**JavaScript**: nada que não seja necessário para a primeira tela. `defer` no
que puder esperar. Antes de adicionar uma biblioteca, escreva a função — três
linhas suas custam menos que 40 KB de dependência.

**CSS**: evite seletor que força recálculo em rolagem; anime só `transform` e
`opacity`.

Prove com número: o tamanho do que é baixado antes e depois.