Auditoria de compressão e cache

Uma conversa curta nos cabeçalhos

A cada requisição, o navegador anuncia os formatos de compressão que sabe descompactar:

Accept-Encoding: gzip, deflate, br, zstd

Um servidor com compressão ativada escolhe um deles, encolhe o arquivo e marca a resposta com Content-Encoding: br (Brotli) ou gzip. HTML, CSS e JavaScript são texto repetitivo e costumam perder de 70 a 85% do tamanho. Arquivos JPEG, PNG, WebP, AVIF e WOFF2 já vêm comprimidos pelo próprio formato, então enviá-los do jeito que estão é o certo.

O cache é a outra metade. Cache-Control: max-age=31536000 deixa o navegador reaproveitar um arquivo por um ano sem perguntar nada. Quando esse prazo acaba, um cabeçalho ETag ou Last-Modified permite ao navegador fazer uma pergunta barata, “isso mudou?”, e o servidor responde 304 Not Modified sem corpo.

Quais arquivos são auditados

Começamos pela própria página, depois dos redirecionamentos, e pegamos os arquivos do mesmo domínio registrado encontrados no HTML dela: até quatro folhas de estilo, cinco scripts, três imagens e duas fontes. As vagas que sobram vão para os arquivos restantes, até quinze no total, e as fontes citadas dentro das suas folhas de estilo entram quando há espaço. Cada arquivo é pedido como um navegador faria, oferecendo Brotli e gzip, por HTTP/2 quando o servidor aceita.

Arquivos de outros domínios, como Google Fonts ou um script de estatísticas, ficam de fora. Os cabeçalhos deles não dependem de você.

Como cada coluna é avaliada

Compressão

Verde quando um arquivo de texto chega com um Content-Encoding. Vermelho quando a página, ou um arquivo de texto acima de 20 KB, chega sem compressão. Laranja para arquivos menores sem compressão, e não contamos nada contra arquivos abaixo de 1 KB. Para cada arquivo sem compressão, a auditoria aplica gzip ao conteúdo e mostra o tamanho que você teria. Imagens e fontes WOFF2 aparecem como “não necessário”.

Cache

O prazo vem do max-age, ou do Expires quando não há max-age. Uma folha de estilo, script, imagem ou fonte é marcada quando não tem prazo ou tem um prazo menor que sete dias. no-store e no-cache contam como zero. A página HTML aparece só como informação, com um alerta se puder ser guardada por mais de uma hora, já que quem volta ao site poderia ver uma versão desatualizada.

Protocolo

Passa com HTTP/2, que leva todos os arquivos por uma única conexão, em paralelo. O HTTP/3 é detectado pelo cabeçalho alt-svc, onde o servidor anuncia h3.

Economia

Bytes transferidos contra bytes descompactados, para toda a amostra.

Um site que usa gzip em tudo recebe uma observação sobre o Brotli, que deixa os arquivos de texto cerca de 15 a 20% menores. Veja isso como uma melhoria a planejar. Não há nada de errado sem ele.

Configurando com segurança

Quando algo precisa de correção, o resultado traz blocos prontos para Apache e nginx. Atrás de uma CDN como a Cloudflare, a compressão acontece na borda e os prazos de cache são uma opção no painel. No WordPress, os plugins de cache escrevem as mesmas regras para você.

Para o prazo, uma regra decide tudo. Um cache longo só é seguro se o endereço do arquivo mudar sempre que o conteúdo mudar. Ferramentas de build geram nomes como app.3f9a1c.js, e o WordPress acrescenta ?ver=6.8. Arquivos assim podem levar:

Cache-Control: public, max-age=31536000, immutable

Arquivos com nome fixo ficam melhor com uma semana a um mês. Para o HTML, Cache-Control: no-cache guarda uma cópia e confere com o servidor antes de cada uso.

Para confirmar uma mudança pelo terminal:

curl -sI -H "Accept-Encoding: br, gzip" https://example.com/ | grep -iE "content-encoding|cache-control"

O que a auditoria deixa de fora

É uma amostra de quinze arquivos de uma página, então um problema que só afeta outro modelo de página pode passar. Ela não oferece Zstandard. Lê o max-age e ignora o s-maxage, que só diz respeito a caches compartilhados. E pula os arquivos que a sua própria CDN serve a partir de outro domínio. Cada arquivo é baixado até 3 MB.