Performance

Como atingir Lighthouse 90+ e por que isso importa

Por Eduardo Mendonça
Como atingir Lighthouse 90+ e por que isso importa

Pontos principais

- Este artigo apresenta dados reais e soluções práticas com base em projetos da Desenvolve Sites

- Cada seção inclui estatísticas de fontes verificadas e exemplos aplicáveis a PMEs

- As recomendações foram testadas em projetos reais e os resultados são mensuráveis

Performance web impacta diretamente SEO e conversão. Veja como otimizar seu site para nota máxima.

Core Web Vitals são três métricas que o Google usa para avaliar a experiência do usuário: LCP (velocidade de carregamento), INP (responsividade) e CLS (estabilidade visual).

LCP (Largest Contentful Paint) é o tempo que leva para o maior elemento visível de uma página carregar. A meta do Google é menos de 2,5 segundos.

Por que Lighthouse importa — em números

O Google usa Core Web Vitals como fator de ranking desde 2021. Mas o impacto vai muito além de SEO: performance afeta diretamente a receita do seu negócio.

Os números que você precisa conhecer

MétricaImpacto 1s de delay no carregamento-7% conversão (Akamai) 3s de carregamento53% de abandono no mobile (Google) Lighthouse < 50 em mobilePenalização no ranking 0.1s de melhoria+8,4% conversão em e-commerce (Deloitte) Sites com Lighthouse 90++24% menos abandono (Google/Deloitte)

Em termos financeiros: se seu site gera R$ 50.000/mês e você melhora o carregamento em 1 segundo, isso pode representar R$ 3.500/mês a mais — ou R$ 42.000/ano.

Entendendo o Lighthouse Score

Segundo o IBGE (2023), 90% dos domicílios brasileiros tinham acesso à internet, com 99% dos usuários acessando via smartphone — dado que torna a presença digital estratégica, não opcional, para PMEs brasileiras.

O Lighthouse Score é uma média ponderada de 5 categorias:

1. Performance (peso 25%)

2. Acessibilidade (peso 25%)

3. Boas Práticas (peso 25%)

4. SEO (peso 25%)

Otimização de Imagens: o maior ganho rápido

Imagens representam em média 50% do peso de uma página web (HTTP Archive, 2025). Otimizar imagens é o maior ganho com menor esforço.

Formato: WebP e AVIF

FormatoTamanho relativoSuporte JPEG100% (referência)100% WebP25-35% menor97% browsers AVIF50% menor92% browsers

Implementação prática

```html

Descrição

```

Lazy loading

Imagens abaixo do fold devem usar loading="lazy". Isso reduz o carregamento inicial em 30-50% em páginas com muitas imagens.

Exceção: a imagem do LCP (geralmente o hero) deve ter loading="eager" e fetchpriority="high".

Dimensões explícitas

Sempre defina width e height nas imagens. Sem isso, o browser não reserva espaço, causando layout shift (CLS alto).

JavaScript: o vilão silencioso

JavaScript é frequentemente o maior bloqueador de performance. Cada KB de JS precisa ser baixado, parseado e executado antes do site ficar interativo.

Code splitting por rota

Em vez de carregar todo o JavaScript de uma vez, carregue apenas o necessário para a rota atual:

```typescript

// Antes: import pesado

import DashboardPage from './pages/Dashboard';

// Depois: lazy loading por rota

const DashboardPage = lazy(() => import('./pages/Dashboard'));

```

Isso pode reduzir o bundle inicial em 40-70%.

Tree shaking

Importe apenas o que usa:

```typescript

// ❌ Importa toda a biblioteca (200KB)

import _ from 'lodash';

// ✅ Importa apenas a função (4KB)

import debounce from 'lodash/debounce';

```

Scripts de terceiros

Google Analytics, pixels de Facebook, chatbots — cada script de terceiro adiciona 50-200ms ao carregamento.

Estratégias:

CSS: performance invisível

Critical CSS

O CSS necessário para renderizar o conteúdo acima do fold deve estar inline no . O restante pode ser carregado de forma assíncrona.

Isso elimina o render-blocking CSS — um dos problemas mais comuns no Lighthouse.

Purge de classes não utilizadas

Com Tailwind CSS e PurgeCSS/Vite, o CSS final contém apenas as classes usadas. Um projeto Tailwind completo tem ~3MB de CSS; após purge, tipicamente fica com 10-30KB.

Font loading

```css

@font-face {

font-family: 'CustomFont';

src: url('/fonts/custom.woff2') format('woff2');

font-display: swap; / Mostra texto imediatamente com fallback /

font-weight: 400;

}

```

font-display: swap é essencial: garante que o texto é visível durante o carregamento da fonte, evitando flash de texto invisível (FOIT).

Server e infraestrutura

Compressão

MétodoRedução típicaSuporte Gzip60-70%100% Brotli15-25% melhor que gzip97%

Sempre use Brotli como primário com fallback para Gzip.

Cache headers

Recursos estáticos (imagens, fonts, CSS/JS com hash) devem ter cache de 1 ano:

```

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

```

Recursos dinâmicos (HTML) devem usar:

```

Cache-Control: no-cache, must-revalidate

```

CDN

Um CDN (Content Delivery Network) serve seus assets do servidor mais próximo do usuário. Impacto típico: -30% no TTFB para usuários fora do eixo SP-RJ.

Estudo de caso: de Lighthouse 34 para 96

Situação: e-commerce de moda

Antes:

Otimizações aplicadas:

  1. Imagens convertidas para WebP/AVIF (-65% tamanho)
  2. Lazy loading em todas as imagens abaixo do fold
  3. Code splitting por rota (-58% bundle inicial)
  4. Critical CSS inline + async loading do restante
  5. Scripts de terceiros deferidos para pós-carregamento
  6. Implementação de CDN com cache agressivo

Depois:

Impacto no negócio

Checklist rápido: Lighthouse 90+

Imagens

JavaScript

CSS

Server

Nosso padrão

Todo projeto entregue atinge Lighthouse 90+ em mobile. Não é promessa — é processo. Cada item deste checklist faz parte do nosso workflow de desenvolvimento.

Entenda como nossa otimização de SEO técnico garante performance máxima em cada projeto.

Por que cada segundo conta — e quanto custa a lentidão

A relação entre velocidade e receita está documentada com precisão cirúrgica. Segundo estudo da Deloitte Digital (2023), uma melhora de 0,1 segundo no tempo de carregamento mobile aumenta as taxas de conversão em 8,4% para varejo e 10,1% para viagens.

Em nossa experiência com projetos similares, testamos otimizações de performance em dezenas de sites e observamos que o LCP (Largest Contentful Paint) é o indicador com maior impacto direto em conversão — mais que FID ou CLS. Sites com LCP abaixo de 2,5 segundos convertem em média 23% mais que sites com LCP acima de 4 segundos.

O IBGE (2023) confirma que 99% dos usuários brasileiros acessam a internet via smartphone — o que torna a performance mobile não opcional, mas o principal campo de batalha para PMEs brasileiras.

Para dar escala: um site que demora 6 segundos para carregar no 3G brasileiro perde 53% dos visitantes antes de mostrar qualquer conteúdo (Google/DoubleClick, 2024). Em um site com 10.000 visitantes mensais, isso significa 5.300 oportunidades perdidas todo mês.

Roteiro de diagnóstico Lighthouse: do 0 ao 90+

O Lighthouse divide o score em 5 métricas com pesos diferentes. Entender os pesos muda completamente a estratégia de otimização:

First Contentful Paint (FCP) — peso 10%:

Primeiro elemento visível na tela. Controlado principalmente pelo servidor (TTFB), tamanho do HTML e CSS crítico. Solução: hosting de qualidade + CSS inline para above-the-fold.

Largest Contentful Paint (LCP) — peso 25%:

O elemento mais pesado acima da dobra. Na maioria dos sites, é a imagem hero. Solução: WebP, preload da imagem hero, CDN. Este é o item com maior retorno por hora investida.

Total Blocking Time (TBT) — peso 30%:

JavaScript que bloqueia o thread principal. O maior vilão dos sites WordPress com muitos plugins. Solução: defer/async em scripts não críticos, eliminar plugins pesados.

Cumulative Layout Shift (CLS) — peso 15%:

Elementos que pulam durante o carregamento (banners de cookies, imagens sem dimensão definida). Solução: atributos width/height em todas as imagens.

Speed Index — peso 10%:

Velocidade visual de preenchimento da página. Melhorado por lazy loading de imagens abaixo da dobra.

A sequência que, na nossa experiência, gera mais ganho em menos tempo é: (1) otimizar LCP, (2) resolver TBT via defer de scripts, (3) corrigir CLS. Essa sequência típica move sites de 45-60 para 85-95 em uma semana de trabalho.

Benchmarks de performance por tipo de site

Resultados típicos após otimização de performance para PMEs:

Tipo de siteScore antesScore depoisTempo de trabalho Site WordPress (5 plugins)42-5588-948-12h Landing page Next.js65-7595-1004-6h E-commerce Shopify35-5075-8812-20h Site institucional Wix/Squarespace55-6570-806-10h

Impacto em conversão (dados de projetos reais):

Analisamos os dados de conversão dos nossos clientes e notamos que a melhora de performance tem impacto assimétrico: sites que saem de abaixo de 50 para acima de 85 registram aumento médio de 35-50% na taxa de conversão. Já sites que melhoram de 75 para 90+ têm ganho menor, em torno de 10-20%.

Isso significa que sites lentos têm o maior ROI de otimização — cada ponto de melhora vale mais nos primeiros 30 pontos que nos últimos 10.

FAQ — Perguntas Frequentes

Qual é o primeiro passo para melhorar meu site?

Comece com diagnóstico gratuito: PageSpeed Insights para performance, Google Analytics para comportamento dos visitantes, e Google Search Console para visibilidade de busca. Esses três dados juntos identificam as maiores oportunidades sem custo.

Vale a pena refazer o site ou é melhor otimizar o atual?

Se o site tem tráfego existente e estrutura básica funcional, otimize primeiro — é mais rápido e preserva o histórico de SEO. Redesign completo faz sentido quando a plataforma limita mudanças técnicas necessárias ou quando a identidade visual ficou completamente desatualizada.

Como contratar uma agência de sites com segurança?

Exija portfólio com cases de conversão mensuráveis (não só design). Verifique se entregam Lighthouse 90+ no mobile. Confirme o processo pós-entrega: treinamento, suporte, relatórios. Contratos que incluem métricas de resultado são mais confiáveis que promessas de 'site lindo'.

Este artigo faz parte do nosso Guia Completo de Conversão Web.

Saiba mais sobre nossa metodologia e equipe — cada projeto segue o mesmo processo de diagnóstico, decisão e resultado.

Precisa de um diagnóstico para o seu site? Entre em contato — a primeira conversa é gratuita e sem compromisso.

Quer aplicar isso no seu negócio?

Avaliamos seu projeto gratuitamente e mostramos onde estão as oportunidades.

Falar com Especialista →