Otimize seus assets no build, não a cada requisição

A maioria dos assets de um site é conhecida muito antes de um único visitante aparecer. A imagem principal, os ícones, o CSS empacotado, as fontes: eles vivem no seu repositório e são idênticos de uma requisição para a seguinte. Só há dois lugares para otimizá-los. Uma vez, quando você faz o build. Ou repetidamente, na edge, toda vez que uma página carrega.

Para os assets que você mesmo entrega, o build é o melhor lugar.

Por que no build

Você faz o trabalho uma vez. A saída é pequena no momento em que é entregue e continua pequena, sem CPU por requisição, sem cache de transformação para aquecer, e sem uma conta de transformação em tempo real que cresce com o seu tráfego.

O resultado também é algo que você pode ver. Os arquivos otimizados estão ali mesmo, na saída do seu build, então você pode compará-los, pesá-los e saber exatamente o que está saindo. Uma transformação na edge é uma caixa-preta em que você confia; um artefato de build é um arquivo que você pode abrir.

E cobre mais do que imagens. Seu build já cuida de JavaScript, CSS, SVG e fontes, e todos eles também encolhem. Um TTF bruto entregue no lugar de WOFF2 são cerca de dois terços desperdiçados por si só.

Onde a edge ainda merece seu lugar

A otimização no build só toca os assets que passam pelo seu build. Dois casos realmente precisam do caminho da requisição:

• Uploads de usuários. Se as pessoas enviam imagens enquanto o seu site está no ar, você não pode otimizá-las no build. Isso precisa de algo no caminho da requisição: uma API ou um plugin de CMS.
• Catálogos enormes e variados que precisam de tamanhos por dispositivo. Se você realmente serve um tamanho diferente por dispositivo em milhões de imagens, um serviço em tempo real se paga.

Para um site normal, que é a maioria dos sites, nenhum desses é o gargalo, e o build é mais simples e mais barato.

Fazendo isso

Duas maneiras, ambas rodando sobre a API do Patu para que a codificação aconteça fora da sua máquina.

Um comando, em qualquer script de build ou tarefa de CI:

PATU_KEY=your_key npx @patu.dev/cli ./dist

Ele percorre a pasta, otimiza as imagens, o SVG, o JS, o CSS e as fontes no lugar, e pula tudo o que não consegue realmente superar. Adicione --cdn para enviá-los e reescrever as referências para cdn.patu.dev em vez de gravar de volta no disco.

Ou integre-o ao Vite, para que cada build seja coberto sem você pensar nisso:

import patu from '@patu.dev/vite'
export default { plugins: [patu()] }

O ponto

A edge não está errada. Mas há uma boa chance de você estar pagando para transformar, em cada requisição, assets que nunca mudam entre elas. Otimize-os uma vez, no build que você já executa, e entregue-os pequenos. A página de integrações tem o CLI, o plugin do Vite e o resto.