Como deixar seu site mais rápido (cache, CDN, imagens)

Um site lento perde visitantes antes de mostrar qualquer coisa. O problema é que "lento" é vago: pode ser o servidor demorando para responder, uma foto de 4 MB no topo ou um script que trava os cliques. Cada causa tem um conserto diferente, e otimizar no escuro costuma gastar tempo no que não pesa.

O caminho que funciona é sempre o mesmo: medir, achar o maior gargalo, corrigir um item por vez e medir de novo. Este guia segue essa ordem e mostra o código de cada ajuste.

Como medir a velocidade do seu site?#

O Google resume a experiência de carregamento em três métricas, chamadas Core Web Vitals:

Cada métrica é avaliada no percentil 75 das visitas, separando celular e computador. A página só passa se as três estiverem dentro da meta.

Para medir, abra o DevTools do Chrome, vá na aba Lighthouse e rode uma análise em modo celular. A aba Network mostra o tamanho e o tempo de cada arquivo, e é nela que você descobre o culpado. O Lighthouse usa um teste simulado; para dados de visitantes reais, use o relatório de Core Web Vitals do Search Console ou o PageSpeed Insights.

Anote os números antes de mexer. Sem eles, não dá para saber se melhorou.

Como otimizar as imagens?#

Imagens costumam ser a maior parte dos bytes de uma página. Quatro ajustes cobrem quase tudo:

1. Formato moderno. AVIF e WebP são menores que JPEG e PNG para a mesma qualidade visual. Ofereça os dois com um fallback.
2. Tamanhos responsivos. Não envie uma imagem de 2000 px para um celular de 400 px de largura.
3. Dimensões declaradas. width e height reservam o espaço e evitam o CLS.
4. Lazy loading só abaixo da dobra.

<picture>
  <source type="image/avif"
    srcset="foto-480.avif 480w, foto-800.avif 800w, foto-1200.avif 1200w"
    sizes="(max-width: 600px) 400px, 800px">
  <source type="image/webp"
    srcset="foto-480.webp 480w, foto-800.webp 800w, foto-1200.webp 1200w"
    sizes="(max-width: 600px) 400px, 800px">
  <img src="foto-800.jpg" alt="Descrição da foto" width="800" height="600" loading="lazy">
</picture>

O navegador usa a primeira <source> cujo formato ele suporta e ignora as outras. O <img> é o fallback.

E a imagem principal do topo?#

Ela é quase sempre o elemento do LCP, então não use loading="lazy" nela: o navegador precisa saber onde a imagem fica antes de decidir carregá-la, e isso a atrasa. Peça prioridade alta:

<img src="hero-1200.webp" alt="Banner principal" width="1200" height="600" fetchpriority="high">

fetchpriority="high" é uma dica, não uma ordem, mas faz o navegador começar a baixar a imagem antes. Se a imagem vier de um background-image no CSS, o navegador a descobre tarde. Nesse caso, use <link rel="preload" as="image" href="hero.jpg" fetchpriority="high"> no <head>.

Como comprimir HTML, CSS e JavaScript?#

Texto comprime muito bem. O navegador envia Accept-Encoding: br, gzip e o servidor responde com Content-Encoding: br (Brotli) ou gzip, junto com Vary: Accept-Encoding para que os caches guardem cada versão separada. Ative a compressão para HTML, CSS, JS, JSON e SVG.

Não comprima de novo imagens, áudio e vídeo: JPEG, WebP, PNG e MP4 já são comprimidos, e comprimir outra vez só gasta CPU e às vezes até aumenta o arquivo.

Depois da compressão, envie menos código:

• Remova bibliotecas que você usa para uma função só.
• Use defer nos scripts que não precisam rodar antes da página aparecer: <script src="app.js" defer></script>.
• Divida o JavaScript por página, para que cada uma baixe só o que usa.

Como configurar o cache do navegador?#

Quem já visitou o site não deveria baixar tudo de novo. O cabeçalho Cache-Control diz por quanto tempo o navegador pode reaproveitar um arquivo. A estratégia mais segura tem duas regras.

Arquivos com hash no nome (como app.3f9a1c.js), que nunca mudam no mesmo endereço, ficam um ano em cache:

Cache-Control: max-age=31536000, immutable

O HTML, que referencia esses arquivos, deve ser revalidado sempre:

Cache-Control: no-cache

Atenção: no-cache não significa "não guarde". Significa "guarde, mas pergunte ao servidor antes de reutilizar". Para proibir qualquer armazenamento, o valor é no-store. Quando você muda um arquivo, o hash muda, o endereço muda e o cache antigo simplesmente deixa de ser usado. Veja a explicação completa em O que é Cache-Control.

Quando uma CDN ajuda?#

Uma CDN guarda cópias dos seus arquivos estáticos em vários pontos do mundo e entrega cada visitante pelo mais próximo. Isso reduz a latência e alivia o seu servidor. O ganho é maior quando o público está espalhado ou longe da região do servidor, e menor quando todos estão perto dele. Detalhes em O que é uma CDN.

Uma CDN costuma respeitar o Cache-Control que você definiu, então os dois ajustes se somam: o cache decide o que pode ser reaproveitado, a CDN decide de onde.

Se o conteúdo não muda a cada requisição, um site estático é o caso mais simples: não há código rodando no servidor para cada visita, só arquivos prontos para cachear.

Como saber se funcionou?#

1. Recarregue a página com o DevTools aberto na aba Network. No segundo carregamento, os arquivos com hash devem aparecer como "(memory cache)" ou "(disk cache)".
2. Confira os cabeçalhos de um arquivo: Cache-Control e Content-Encoding devem estar presentes.
3. Rode o Lighthouse de novo e compare LCP, INP e CLS com os números que você anotou.
4. Acompanhe o efeito em visitantes reais pelo Search Console, que leva dias para refletir mudanças.

Erros comuns#

• Aplicar loading="lazy" na imagem do LCP.
• Esquecer width e height, o que gera CLS.
• Dar max-age longo a arquivos sem hash: os visitantes deixam de ver a versão nova.
• Otimizar o que não pesa: confirme na aba Network antes.
• Testar só no seu computador rápido e na sua conexão boa.

Como fazer isso na Square Cloud#

Na Square Cloud, você faz o deploy do site e controla os arquivos e o código. Sites estáticos têm um runtime próprio, e toda aplicação web ganha um subdomínio *.squareweb.app com HTTPS e certificado TLS automático.

A rede inclui CDN global baseada na Cloudflare, HTTP/3 e tráfego ilimitado, sem cobrança por banda ou por requisição (política de uso justo). Isso cobre a parte de entrega, e a CDN respeita o Cache-Control que a sua aplicação envia. A otimização de imagens, os cabeçalhos de cache e o JavaScript continuam sendo ajustes seus, como descrito acima.

Para medir o resultado, todos os planos têm analytics web sem cookies, com visitas, rotas, países e status codes. Os planos Pro e Enterprise adicionam latência p50/p95/p99 e logs HTTP. O plano Hobby começa em R$ 12,49 por mês.

Veja como publicar o seu site em Hospedagem de sites.