A Regra dos 3 Segundos de Performance Web

Você tem três segundos.

Depois disso, seus usuários vão embora.

Pesquisas do Google mostram que 53% dos usuários de dispositivos móveis abandonam um site se ele demorar mais de 3 segundos para carregar.

Sites lentos custam dinheiro. Melhorar o tempo de carregamento móvel em 0,1 segundo aumenta as conversões no varejo em 8,4%.

Performance não é apenas uma métrica técnica. É uma métrica de negócio.

Para vencer, você deve entender o Core Web Vitals:

• LCP (Largest Contentful Paint): Quão rápido os usuários veem o conteúdo principal. Tente manter abaixo de 2,5s. • INP (Interaction to Next Paint): Quão rápido a página reage a cliques. Tente manter abaixo de 200ms. • CLS (Cumulative Layout Shift): Quão estável é a página. Tente manter abaixo de 0,1.

Pare de adivinhar e comece a otimizar. Veja como vencer o relógio:

Otimização de JavaScript • Envie menos código. Use importações dinâmicas para carregar o código apenas quando necessário. • Use tree-shaking. Mude de CommonJS para ES modules para remover código morto. • Mova tarefas pesadas para Web Workers. Mantenha a thread principal livre para a interação do usuário. • Use defer ou async. Pare de deixar que scripts bloqueiem o parsing do seu HTML.

CSS e Renderização • Faça o inline do CSS crítico. Carregue primeiro apenas o que é visível acima da dobra (above the fold). • Evite layout thrashing. Agrupe suas leituras e escritas para evitar recalculações constantes. • Anime com transform e opacity. Elas utilizam a GPU e evitam mudanças de layout. • Use content-visibility: auto. Pule a renderização de conteúdos que estão fora da tela.

Estratégia de Imagens • Use formatos modernos. WebP e AVIF são muito menores que JPEG. • Defina os atributos width e height. Isso evita mudanças de layout (CLS). • Use lazy-load em imagens abaixo da dobra. Não use lazy-load na sua imagem principal (LCP hero image). • Use srcset. Sirva imagens menores para usuários de dispositivos móveis.

Rede e Cache • Use uma CDN. Aproxime seu conteúdo dos seus usuários para reduzir a latência. • Ative a compressão. Use Brotli ou Zstandard para diminuir o tamanho dos arquivos. • Faça cache de forma agressiva. Use cabeçalhos de cache imutáveis para assets com hash. • Mantenha o bfcache funcionando. Evite usar o evento unload para garantir uma navegação instantânea de voltar/avançar.

O objetivo é simples: evitar trabalho.

O código mais rápido é o código que seus usuários nunca baixam. A requisição mais rápida é aquela que o navegador nunca precisa fazer.

Fonte: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1