Performance real: como chegar a 95+ sem sacrificar o visual

Site bonito e site rápido não são inimigos. O que mata a performance é falta de orçamento: cada efeito precisa ter um custo aceito conscientemente.

Orçamento de bytes

Defino um teto por página antes de começar. Toda imagem, fonte e biblioteca disputa esse espaço — e quem não justifica o custo fica de fora.

Efeito na GPU, nunca no layout

Animações usam apenas transform e opacity. Blur e gradientes ficam em camadas isoladas, evitando repaint da árvore inteira.

Mídia sob controle

Imagens com dimensões declaradas, formatos modernos e carregamento tardio fora da primeira dobra. Vídeo só entra quando o usuário demonstra interesse.

Com essas três regras, sites com shaders líquidos ainda abrem em menos de dois segundos no 4G.