Como um site cheio de vídeo chegou a 100 no PageSpeed

Pré-renderização, scripts que esperam a vez e animações que nascem visíveis. O que mudou no seomkt entre a primeira versão e a nota máxima.

Existe uma crença confortável no mercado: site bonito é site lento, e site rápido é site sem graça. O seomkt tem vídeo no hero, feixes animados, contadores, carrossel de marcas e um estúdio inteiro de mídia. E marca 100 no PageSpeed. Não foi truque, foi ordem.

O navegador não deveria montar a página

A primeira versão montava o HTML no navegador a partir de um arquivo de dados. Era prático para editar, mas o visitante recebia uma página vazia e esperava o JavaScript desenhar tudo. A solução foi mover esse trabalho para o build: um script em Node percorre as rotas, gera o HTML completo e marca cada bloco pré-renderizado. No navegador, o mesmo código só liga os eventos.

O visitante recebe a página pronta. O JavaScript chega depois, só para dar vida.

Scripts depois da primeira pintura

Nenhum script entra no caminho crítico. O carregador fica no fim de cada template e só injeta os módulos depois que a página já pintou. Parece pouco, mas é a diferença entre o texto aparecer em meio segundo ou em dois.

Revelações que nascem visíveis

Animações de entrada costumam esconder o conteúdo com opacidade zero e esperar o JavaScript revelar. Se o script atrasa, o conteúdo some. No seomkt tudo nasce visível; o JavaScript adiciona uma classe que ativa as animações só quando tem certeza de que vai conseguir terminá-las. Animações infinitas, como o carrossel de marcas, também só rodam depois dessa classe.

O resto é disciplina

• Fotos em WebP, com a imagem de compartilhamento mantida em JPG para as redes.
• Fontes locais, sem ida e volta a servidores externos.
• Vídeos que só tocam dentro da tela e pausam fora dela.
• Contraste revisado cor por cor, porque acessibilidade também entra na nota.

Nenhum desses itens é novidade. O que faz diferença é tratar performance como parte da direção de arte, decidida no começo, e não como faxina no fim.

Guilherme Barroso CostaDireção criativa e design na Rosta. Escreve aqui sobre o que aprende construindo.