← Voltar para o Blog
Performance10 min de leitura

Como Otimizar LCP (Largest Contentful Paint)

10 técnicas práticas para melhorar o LCP do seu site e carregar conteúdo principal mais rápido. Exemplos de código inclusos.

O Que é LCP?

Largest Contentful Paint (LCP) mede quanto tempo leva para o maior elemento visível da página ser renderizado. Esse elemento geralmente é:

  • Uma imagem de destaque (hero image)
  • Um vídeo de fundo
  • Um bloco de texto grande
  • Um banner ou imagem no topo da página

Valores de Referência:

  • ✅ Bom: Menos de 2.5 segundos
  • ⚠️ Precisa melhorar: 2.5 - 4.0 segundos
  • ❌ Ruim: Mais de 4.0 segundos

Um LCP ruim significa que usuários esperam muito tempo para ver o conteúdo principal da sua página - e 53% dos usuários abandonam sites que levam mais de 3 segundos para carregar.

10 Técnicas para Otimizar LCP

1️⃣Otimize e Comprima Imagens

Imagens são frequentemente o elemento LCP. Reduza o tamanho delas sem perder qualidade:

  • Use WebP ou AVIF em vez de JPG/PNG (30-50% menor)
  • Comprima imagens com ferramentas como Squoosh, TinyPNG ou ImageOptim
  • Dimensione imagens para o tamanho real exibido (não sirva 3000x2000px quando exibe 600x400px)

Exemplo Next.js:

import Image from 'next/image';

// ✅ Bom - Next.js otimiza automaticamente
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority  // Carrega essa imagem primeiro
  quality={85}  // 85 é um bom balanço
/>

2️⃣Use Preload para Recursos Críticos

Diga ao navegador para carregar imagens ou fontes importantes imediatamente:

Adicione no <head>:

<!-- Preload da imagem LCP -->
<link rel="preload" as="image" href="/hero.webp" />

<!-- Preload de fonte crítica -->
<link
  rel="preload"
  as="font"
  href="/fonts/inter.woff2"
  type="font/woff2"
  crossorigin="anonymous"
/>

⚠️ Use com moderação! Apenas para 1-2 recursos realmente críticos.

3️⃣Otimize Fontes Web

Fontes customizadas podem atrasar significativamente o LCP:

  • Use font-display: swap para mostrar texto imediatamente
  • Hospede fontes localmente em vez de usar Google Fonts
  • Use apenas os pesos de fonte necessários (não carregue Regular, Medium, Bold, etc se usa só Regular)
  • Formato WOFF2 (melhor compressão)

Exemplo CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* ← Crucial para LCP */
}

4️⃣Minimize CSS e JavaScript Bloqueantes

CSS e JS no <head> bloqueiam a renderização. Otimize:

  • CSS Crítico Inline: Coloque CSS above-the-fold diretamente no HTML
  • Defer JavaScript: Carregue scripts não críticos depois
  • Code Splitting: Carregue apenas o JS necessário para cada página

Exemplo HTML:

<!-- ✅ Defer scripts não críticos -->
<script src="/analytics.js" defer></script>

<!-- ✅ Async para scripts independentes -->
<script src="/chat-widget.js" async></script>

<!-- ❌ Evite isso (bloqueia renderização) -->
<script src="/heavy-lib.js"></script>

5️⃣Use CDN para Servir Recursos

CDN (Content Delivery Network) serve arquivos de servidores geograficamente próximos aos usuários, reduzindo latência:

  • Vercel: CDN automática para Next.js
  • Cloudflare: CDN gratuita e rápida
  • AWS CloudFront: Solução enterprise

Impacto: Redução de 30-50% no tempo de carregamento para usuários distantes do servidor.

6️⃣Implemente Cache Eficiente

Cache permite que o navegador reutilize recursos já baixados:

Headers de Cache (Next.js):

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

7️⃣Otimize Tempo de Resposta do Servidor (TTFB)

LCP não pode começar até que o servidor responda. Melhore o TTFB:

  • Use Edge Functions (Vercel Edge, Cloudflare Workers)
  • Implemente cache server-side (Redis, Memcached)
  • Otimize queries de banco de dados
  • Use Static Site Generation (SSG) quando possível

Next.js SSG:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  // Gera páginas estáticas em build time
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

8️⃣Use Lazy Loading para Imagens Abaixo da Dobra

Não carregue imagens que o usuário não vê inicialmente:

Next.js Image:

import Image from 'next/image';

// ✅ Imagem LCP (above-the-fold)
<Image src="/hero.jpg" priority />

// ✅ Imagens abaixo da dobra (lazy load automático)
<Image src="/feature-1.jpg" loading="lazy" />
<Image src="/feature-2.jpg" loading="lazy" />

9️⃣Remova Recursos Bloqueantes de Third-Party

Scripts de terceiros (ads, analytics, chat) frequentemente bloqueiam LCP:

  • Carregue scripts de terceiros após o LCP
  • Use async ou defer
  • Considere Partytown para rodar scripts em Web Worker

Next.js Script:

import Script from 'next/script';

// ✅ Carrega depois da página estar interativa
<Script
  src="https://analytics.example.com/script.js"
  strategy="afterInteractive"
/>

// ✅ Carrega depois de tudo (ideal para chat widgets)
<Script
  src="https://chat.example.com/widget.js"
  strategy="lazyOnload"
/>

🔟Use Responsive Images

Sirva imagens do tamanho certo para cada dispositivo:

HTML srcset:

<img
  src="/hero-800.jpg"
  srcset="
    /hero-400.jpg 400w,
    /hero-800.jpg 800w,
    /hero-1200.jpg 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
/>

// Ou com Next.js Image (faz isso automaticamente)
<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Checklist de Otimização LCP

  • ✅ Imagens em WebP/AVIF e comprimidas
  • ✅ Imagem LCP com priority ou preload
  • ✅ Fontes com font-display: swap
  • ✅ CSS crítico inline ou minificado
  • ✅ JavaScript com defer/async
  • ✅ CDN configurada
  • ✅ Cache headers configurados
  • ✅ TTFB abaixo de 600ms
  • ✅ Lazy loading para imagens abaixo da dobra
  • ✅ Scripts third-party carregados depois

Ferramentas para Medir LCP

🚀 CheckSpeed

Análise completa de LCP + insights de negócio + plano de ação priorizado.

Testar agora (gratuito) →

Chrome DevTools

Aperte F12 → Lighthouse → Run analysis. Mostra LCP e oportunidades de melhoria.

PageSpeed Insights

Ferramenta oficial do Google com dados reais de usuários (CrUX).

Impacto de Melhorar LCP

Estudos mostram que otimizar LCP resulta em:

  • Redução de 20-30% na taxa de rejeição ao melhorar LCP de 4s para 2s
  • Aumento de 10-15% em conversões em sites de e-commerce
  • Melhoria no ranking do Google - Core Web Vitals são fator de SEO
  • Maior engajamento - usuários navegam mais páginas

Conclusão

Otimizar LCP é uma das melhores maneiras de melhorar a experiência do usuário e conversões do seu site. As técnicas acima são comprovadas e podem ser implementadas progressivamente.

Comece pelos quick wins:

  1. Comprima imagens
  2. Adicione priority à imagem LCP
  3. Configure font-display: swap
  4. Defer scripts third-party

Esses 4 passos sozinhos podem melhorar seu LCP em 1-2 segundos!

Descubra o LCP do Seu Site

Use o CheckSpeed para medir o LCP atual e receber um plano de ação personalizado com as otimizações de maior ROI.

Analisar Meu Site Gratuitamente