Otimização de Sites · Core Web Vitals

Como acelerar o carregamento do seu site: guia completo 2026

Q: O que é lazy loading e devo usar no meu site?

Lazy loading é uma técnica que adia o carregamento de imagens e vídeos até que o usuário role até eles. Basta adicionar loading='lazy' nas tags img. É especialmente valioso em páginas longas com muitas imagens, podendo reduzir o peso inicial da página em 40-60%.

Publicado: 10 dez 2018 Atualizado: 21 mai 2026 11 min de leitura Por Agência Fort

Como Acelerar o Carregamento do Site: Guia Completo 2026

Infográfico: Escala de velocidade de carregamento (LCP) e impacto na taxa de rejeição. © Agência Fort.

Em 30 segundos

Sites lentos perdem posição no Google e até 35% das conversões potenciais.
Core Web Vitals (LCP, INP, CLS) são fatores oficiais de ranqueamento desde 2021.
As 3 maiores causas de lentidão: imagens sem otimização, hospedagem ruim e JavaScript excessivo.
Com as 14 técnicas deste guia, sites alcançam pontuação 90+ no PageSpeed Insights.

Por que a velocidade do site importa tanto?

Você pode ter o melhor produto do mercado, os melhores textos e um design deslumbrante — mas se o seu site demorar mais de 3 segundos para carregar, metade dos seus visitantes já foi embora. Isso não é achismo; é dado do Google.

Um estudo do Google/Think with Google mostra que a taxa de rejeição aumenta 32% quando o tempo de carregamento passa de 1 para 3 segundos. A 5 segundos, a taxa sobe 90%. A 10 segundos, 123%.

No Brasil, onde 70% do acesso à internet é feito pelo celular em redes 4G variáveis, a latência é ainda mais crítica. Um site que carrega bem em fibra óptica pode ser um pesadelo em 4G.

Fator de ranqueamento oficial: desde maio de 2021, o Google usa o Page Experience (que inclui os Core Web Vitals) como critério de ranqueamento. Sites que passam nos limites ganham vantagem competitiva direta no Google.

Velocidade e conversão: a relação direta

A Amazon calculou que cada 100ms de latência reduz as vendas em 1%. O Walmart aumentou as conversões em 2% para cada segundo de melhoria na velocidade de carregamento. Esses dados se aplicam a qualquer negócio online.

Para um consultório médico, uma imobiliária ou uma loja local, isso significa: a velocidade do site é diretamente proporcional à quantidade de leads gerados.

O que são Core Web Vitals?

Core Web Vitals são três métricas específicas que o Google usa para medir a experiência do usuário em termos de velocidade e estabilidade visual. Entender cada uma é essencial para saber o que otimizar.

Métrica	O que mede	Meta (Ótimo)	Aceitável	Ruim
LCP Largest Contentful Paint	Tempo até o maior elemento visível aparecer	≤ 2,5s	2,5s – 4,0s	> 4,0s
INP Interaction to Next Paint	Responsividade a cliques e toques (substituiu FID)	≤ 200ms	200ms – 500ms	> 500ms
CLS Cumulative Layout Shift	Estabilidade visual (quanto o layout "pula")	≤ 0,10	0,10 – 0,25	> 0,25

LCP: o mais impactante para SEO

O LCP mede quanto tempo leva para o maior elemento da tela — geralmente uma imagem hero ou o primeiro bloco de texto — aparecer para o usuário. É a métrica mais correlacionada com a experiência percebida de velocidade. Otimizar o LCP geralmente significa otimizar a imagem principal da página.

INP: responsividade que os usuários sentem

O INP substituiu o FID (First Input Delay) em março de 2024 como métrica oficial. Ele mede o atraso entre uma interação do usuário (clique, toque) e a atualização visual da tela. Um INP alto geralmente indica JavaScript pesado bloqueando a thread principal.

CLS: o "salto" que irrita e atrapalha

CLS ocorre quando elementos da página se movem inesperadamente enquanto o usuário tenta interagir — o botão que "escapa" do dedo, o texto que pula quando uma imagem carrega. Além de irritante, prejudica diretamente cliques em CTAs e taxas de conversão.

Como medir a velocidade do seu site

Antes de otimizar, é preciso medir. Use estas ferramentas:

PageSpeed Insights — a ferramenta oficial do Google. Mostra dados reais dos seus usuários (CrUX) e sugestões específicas de melhoria. Indispensável.
GTmetrix — detalha cada recurso que está sendo carregado e quanto tempo leva. Excelente para identificar gargalos específicos.
Google Search Console — aba "Experiência da Página" mostra dados reais agregados dos seus visitantes, separados por mobile e desktop.
Chrome DevTools (F12 → Network) — para análise técnica em tempo real diretamente no navegador.

Dica: sempre meça no mobile primeiro. O Google usa indexação mobile-first, então a pontuação do PageSpeed no mobile é a que realmente importa para o ranqueamento.

Otimização de imagens: a maior alavanca

Imagens representam, em média, 65% do peso total de uma página web. Otimizá-las é, de longe, a ação com melhor retorno em redução de tamanho e melhoria de LCP.

Escolha o formato correto

Formato	Melhor para	Vantagem
WebP	Fotos e imagens complexas	25-35% menor que JPEG com qualidade similar
AVIF	Fotos de alta qualidade, transparências	Até 50% menor que PNG; suporte crescendo
SVG	Ícones, logos, ilustrações	Vetorial, escala sem perda, minúsculo
JPEG	Fotos (fallback para WebP)	Amplo suporte, boa compressão
PNG	Imagens com transparência (evite para fotos)	Sem perda de qualidade, mas arquivo maior

Dimensionamento correto

Nunca envie uma imagem de 3000×2000 pixels para exibir em 800×400. Redimensione as imagens para o tamanho real de exibição antes de fazer upload. Use o atributo srcset para servir versões diferentes conforme a resolução do dispositivo.

Compressão sem perda perceptível

Ferramentas como Squoosh (online, do Google), TinyPNG ou plugins como ShortPixel (WordPress) comprimem imagens sem degradação visual perceptível. Uma foto de 2MB pode chegar facilmente a 200KB mantendo qualidade excelente.

Lazy loading: carregue só o necessário

Lazy loading adia o carregamento de imagens e iframes que estão fora da área visível inicial da tela. O visitante não precisará baixar uma imagem que está no rodapé da página se ele for sair antes de chegar lá.

Implementação: basta adicionar o atributo loading="lazy" em todas as tags <img>, exceto na imagem principal (acima da dobra), que deve ter loading="eager" ou nenhum atributo para priorizar o LCP.

Em páginas com 20+ imagens, o lazy loading pode reduzir o peso inicial da página em 40-60%, melhorando drasticamente o LCP e o tempo até a página ser interativa.

Minificação de CSS, JS e HTML

Minificação é o processo de remover caracteres desnecessários do código-fonte sem alterar sua funcionalidade: espaços em branco, comentários, quebras de linha, nomes longos de variáveis. O resultado é um arquivo menor que o navegador baixa mais rápido.

CSS: redução típica de 20-30%
JavaScript: redução típica de 30-50%
HTML: redução típica de 15-25%

Ferramentas recomendadas:

WordPress: plugins como W3 Total Cache, WP Rocket ou LiteSpeed Cache fazem isso automaticamente
Sites customizados: Webpack, Vite, Parcel ou Gulp/Grunt no pipeline de build
Online: CSS Minifier, JS Minifier para otimizações pontuais

Bundle e tree-shaking

Além de minificar, certifique-se de não carregar JavaScript e CSS desnecessários. O tree-shaking (eliminar código não utilizado) em frameworks modernos como React e Vue pode reduzir o bundle final em 40-70%. Importe apenas os componentes que realmente usa.

Cache do navegador e do servidor

Cache é a técnica de armazenar cópias de arquivos localmente para que não precisem ser baixados novamente em visitas futuras. Para visitantes que retornam, o cache é a otimização mais impactante de todas.

Cache do navegador (Cache-Control)

Configure cabeçalhos HTTP no servidor para informar ao navegador por quanto tempo guardar cada tipo de arquivo:

CSS, JS, imagens: 1 ano (max-age=31536000) — adicione hash no nome do arquivo para invalidar ao atualizar
HTML: curto (no-cache ou 1 hora) — precisa estar sempre atualizado
Fontes: 1 ano — raramente mudam

Cache de servidor (Redis, Memcached, OPcache)

Para sites dinâmicos (WordPress, e-commerce), o cache de servidor guarda o HTML gerado e o serve diretamente sem processar PHP/banco de dados a cada requisição. O WP Rocket e o LiteSpeed são os plugins de cache mais eficientes para WordPress.

CDN: entrega de conteúdo distribuída

Uma CDN (Content Delivery Network) é uma rede de servidores distribuídos pelo mundo. Quando um usuário acessa seu site, os arquivos estáticos (imagens, CSS, JS) são servidos do servidor mais próximo geograficamente, reduzindo a latência.

Para um site hospedado em São Paulo, um visitante de Manaus pode receber os arquivos de um servidor em Brasília ou Rio de Janeiro, ao invés de São Paulo — reduzindo o tempo de resposta em 50-70ms, o que é significativo para o LCP.

Recomendação gratuita: o Cloudflare oferece CDN gratuita com pontos de presença no mundo inteiro, incluindo São Paulo e Rio de Janeiro. É a solução mais fácil de implementar para qualquer tipo de site.

CDN também protege contra DDoS

Além de velocidade, as CDNs atuam como escudo contra ataques DDoS, pois absorvem o tráfego malicioso antes de chegar ao seu servidor. O Cloudflare, em particular, oferece proteção DDoS ilimitada mesmo no plano gratuito.

TTFB e a importância da hospedagem

O TTFB (Time to First Byte) é o tempo entre a requisição e o primeiro byte de resposta do servidor. É a base sobre a qual todas as outras otimizações são construídas: se o servidor demora 1,5 segundos para responder, é impossível ter um LCP abaixo de 2,5 segundos.

Tipo de hospedagem	TTFB típico	Avaliação
Hospedagem compartilhada barata	800ms – 2.000ms	Ruim
Hospedagem compartilhada premium	300ms – 800ms	Aceitável
VPS / Cloud (DigitalOcean, AWS, GCP)	100ms – 300ms	Bom
Hospedagem gerenciada (WP Engine, Kinsta)	50ms – 150ms	Ótimo

Para a maioria das empresas brasileiras, um VPS com servidor em São Paulo é a melhor relação custo-benefício. Um VPS na DigitalOcean ou AWS custando R$60-120/mês entrega performance significativamente melhor do que hospedagens compartilhadas de R$20/mês.

Compressão Gzip e Brotli no servidor

A compressão de transferência reduz o tamanho dos arquivos transmitidos entre servidor e navegador. O texto (HTML, CSS, JS) comprime excepcionalmente bem: um arquivo CSS de 100KB pode ser transferido como 20KB com Brotli.

Gzip: suporte universal, compressão de 60-70%
Brotli: mais moderno, compressão 15-25% melhor que Gzip, suportado por todos os navegadores modernos

Configure no Apache (via .htaccess) ou Nginx (gzip on; brotli on;). A maioria dos painéis de controle de hospedagem (cPanel, Plesk) tem essa opção ativável em um clique.

Fontes web sem bloquear renderização

Fontes externas (Google Fonts, Adobe Fonts) são um dos principais culpados por atrasar a renderização do texto. Se a fonte não carregar a tempo, o navegador bloqueia a exibição do texto — o chamado FOIT (Flash of Invisible Text).

Boas práticas para fontes:

Use <link rel="preconnect"> para o domínio das fontes
Adicione font-display: swap no CSS para exibir texto com fonte fallback enquanto a fonte real carrega
Limite a no máximo 2 famílias tipográficas e 3-4 pesos
Considere hospedar as fontes localmente (auto-hosted) para eliminar a dependência de DNS externo
Use fontes variáveis (Variable Fonts) que combinam todos os pesos em um único arquivo

Eliminar recursos que bloqueiam renderização

Recursos "render-blocking" são arquivos CSS e JS no <head> que o navegador precisa baixar e processar antes de mostrar qualquer conteúdo ao usuário. Cada arquivo desse tipo adiciona centenas de milissegundos ao LCP.

Estratégias para JavaScript

Adicione defer em scripts não críticos — eles carregam em paralelo mas executam após o HTML ser parseado
Use async para scripts independentes (como analytics) que não precisam de ordem de execução
Mova scripts para o final do <body> quando possível

Estratégias para CSS

Use CSS crítico inline: extraia o CSS necessário para o conteúdo "acima da dobra" e coloque-o inline no <head>
Carregue o restante do CSS de forma assíncrona usando media="print" onload="this.media='all'"
Remova CSS não utilizado com ferramentas como PurgeCSS

🏆 Diagnóstico gratuito de velocidade com a Fort

Seu site precisa de uma auditoria completa de velocidade? A Agência Fort faz diagnóstico técnico gratuito e entrega um plano de ação com as otimizações de maior impacto. Conheça também a otimização de sites da Fort.

Checklist completo de velocidade (2026)

Use este checklist para auditar qualquer site. Cada item marcado é um ponto a mais na pontuação do PageSpeed:

Imagens

☐ Imagens no formato WebP ou AVIF
☐ Imagens dimensionadas para o tamanho de exibição real
☐ loading="lazy" em imagens abaixo da dobra
☐ srcset para diferentes resoluções (retina)
☐ width e height explícitos em todas as imagens (evita CLS)

Código

☐ CSS minificado e sem código morto
☐ JavaScript minificado e com tree-shaking
☐ Scripts com defer ou async
☐ CSS crítico inline no head
☐ HTML minificado

Servidor e entrega

☐ Compressão Gzip ou Brotli ativada
☐ Cache-Control configurado para assets estáticos
☐ CDN ativa (Cloudflare recomendado)
☐ TTFB menor que 200ms
☐ HTTP/2 ou HTTP/3 no servidor

Fontes

☐ preconnect para domínios de fontes
☐ font-display: swap declarado
☐ Máximo 2 famílias tipográficas

Como a Agência Fort otimiza sites

Na criação de sites, a Agência Fort já entrega sites otimizados por padrão, sem necessidade de plugins adicionais. Nosso processo inclui:

Auditoria inicial: PageSpeed Insights e GTmetrix com relatório detalhado
Pipeline de build: Vite com minificação, tree-shaking e code splitting automáticos
Imagens automáticas: conversão para WebP, dimensionamento responsivo e lazy loading
Servidor otimizado: VPS em São Paulo com Nginx, Brotli e HTTP/2
CDN Cloudflare: ativada por padrão em todos os projetos
CSS crítico: extração e inlining automático do CSS above-the-fold
Meta: pontuação mínima de 90/100 no PageSpeed mobile antes de qualquer entrega

Para sites existentes com baixa performance, realizamos uma auditoria técnica completa e um plano de otimização priorizado por impacto.

Veja também: 8 diferenciais de um site de alto nível e como a usabilidade afeta suas conversões.

Seu site está lento e perdendo clientes?

A Agência Fort realiza diagnóstico técnico gratuito e aplica as otimizações de maior impacto. Nossos sites chegam com 90+ no PageSpeed por padrão.

Diagnóstico gratuito via WhatsApp Otimização de sites da Fort

Perguntas frequentes sobre velocidade de site

Qual é o tempo de carregamento ideal para um site?

O Google recomenda que o LCP (maior conteúdo visível) carregue em até 2,5 segundos. Sites que carregam em menos de 1s têm vantagem competitiva clara. Acima de 3s, a taxa de rejeição cresce significativamente — a cada segundo extra, você perde visitantes e potenciais clientes.

O que são Core Web Vitals e por que importam?

Core Web Vitals são as três métricas de experiência que o Google usa como fator de ranqueamento desde 2021: LCP (velocidade de carregamento), INP (responsividade a interações) e CLS (estabilidade visual). Sites que passam nos limites recomendados ganham vantagem de posicionamento direta nos resultados do Google.

Como medir a velocidade do meu site?

Use o PageSpeed Insights (pagespeed.web.dev) para ver pontuação e sugestões específicas. O GTmetrix e o WebPageTest oferecem detalhes técnicos adicionais. Para monitoramento contínuo, configure o Google Search Console — ele exibe dados reais dos seus usuários, separados por mobile e desktop.

Qual formato de imagem é mais rápido para a web?

WebP é o formato ideal para a maioria dos casos — é 25-35% menor que JPEG com qualidade similar. Para imagens com transparência, AVIF é ainda mais eficiente (até 50% menor que PNG). Use SVG para ícones e logos. Nunca use BMP ou TIFF em páginas web.

O que é lazy loading e devo usar no meu site?

Lazy loading adia o carregamento de imagens e vídeos até que o usuário role até eles. Basta adicionar loading="lazy" nas tags img. É especialmente valioso em páginas longas com muitas imagens, podendo reduzir o peso inicial da página em 40-60% e melhorar drasticamente o LCP.

O que é CDN e preciso de uma?

CDN (Content Delivery Network) é uma rede de servidores distribuídos geograficamente que entrega os arquivos do seu site a partir do servidor mais próximo do visitante. Sites brasileiros com Cloudflare (CDN gratuita) reduzem o tempo de resposta em 40-70% para usuários fora da cidade onde o servidor está hospedado. Sim, você deve usar.

Minificação de CSS e JS realmente faz diferença?

Sim. Minificação remove espaços, comentários e caracteres desnecessários do código, reduzindo o tamanho em 20-40%. Combinada com compressão Brotli no servidor, pode reduzir o tráfego de dados em até 80%. Em WordPress, plugins como WP Rocket fazem isso automaticamente sem necessidade de conhecimento técnico.

Cache de navegador melhora a velocidade?

Para visitantes que retornam, o cache do navegador é uma das otimizações mais impactantes — permite que o site carregue em menos de 0,5s na segunda visita. Configure cabeçalhos Cache-Control com expiração longa (1 ano) para assets estáticos como CSS, JS e imagens, usando hash no nome do arquivo para invalidar quando necessário.

Hospedagem barata atrasa meu site?

Com certeza. Hospedagens compartilhadas de baixo custo têm TTFB de 800ms a 2s, o que já compromete toda a experiência antes mesmo de qualquer conteúdo aparecer. Um servidor VPS ou hospedagem gerenciada de qualidade tem TTFB abaixo de 200ms, melhorando todos os outros tempos automaticamente.

Quantas fontes posso usar sem prejudicar a velocidade?

O ideal é usar no máximo 2 famílias de fontes, com 3-4 variações de peso. Prefira fontes variáveis (variable fonts) que combinam todos os pesos em um único arquivo. Use font-display: swap para evitar que fontes bloqueiem a renderização e considere hospedar as fontes localmente para eliminar dependência de DNS externo.