Web e frontend · Avançado

Performance no navegador: o que realmente deixa um site lento

Em uma linha: Na maioria dos sites lentos, o culpado não é o código, mas o peso — imagens grandes, fontes e scripts de terceiros.

Os três suspeitos de sempre

Imagens. Um arquivo de três megabytes exibido a 400 pixels é o desperdício mais comum na web. Sirva em tamanhos ajustados, em formatos modernos e com carregamento preguiçoso para tudo abaixo da dobra.

Fontes. Quatro pesos em duas famílias adicionam espera e piscar do texto. Dois quase sempre bastam.

Scripts de terceiros. Analytics, chat, pixels de marketing. Cada um parece pequeno; juntos costumam ser a maior parte do tempo de execução. Conte-os uma vez por trimestre e delete o que ninguém olha.

Medir o que o usuário sente

Três coisas importam para o usuário: quando o conteúdo principal apareceu, com que rapidez a página respondeu ao primeiro toque e o quanto o layout se deslocou durante o carregamento. As duas primeiras são conhecidas; a terceira é a principal causa da sensação de site barato.

Meça em um dispositivo intermediário e em rede celular, não na sua máquina de desenvolvimento com fibra.

Melhorias em ordem decrescente de retorno

Compressão e entrega a partir de uma rede; dimensões explícitas para as imagens para evitar deslocamentos; adiar scripts não necessários para o primeiro render; dividir o código para que cada página carregue apenas o que precisa.

Indo mais fundo

Defina um orçamento de performance — um peso máximo de página e um número de requisições — e faça valer no build. Sem orçamento, o site engorda silenciosamente ao longo de meses, e cada adição isolada sempre parece insignificante.