LCP (Largest Contentful Paint)

LCP (Largest Contentful Paint) é uma métrica [Core Web Vitals](/glossary/core-web-vitals) que mede o tempo desde o início do carregamento de uma página até que o maior elemento de conteúdo visível termine de ser renderizado no [viewport](/glossary/viewport). Esse elemento é tipicamente uma imagem hero, um grande bloco de texto, um pôster de vídeo ou uma imagem de fundo. O Google define três faixas de desempenho: **bom** (2,5 segundos ou menos), **precisa melhorar** (2,5 a 4,0 segundos) e **ruim** (acima de 4,0 segundos). O LCP é medido no 75° percentil dos carregamentos de página, o que significa que a pontuação reflete a experiência da maioria dos usuários reais, não apenas das conexões mais rápidas.

O LCP é o indicador mais importante de velocidade de carregamento percebida. Enquanto outras métricas medem prontidão técnica ou estabilidade visual, o LCP captura o momento em que um visitante vê o conteúdo principal — o momento em que decide que a página "carregou". Um LCP lento faz os visitantes ficarem olhando para uma página incompleta, aumentando taxas de rejeição e reduzindo o engajamento. O Google usa o LCP como sinal de ranking em seu algoritmo de busca, o que significa que uma pontuação ruim não prejudica apenas a experiência do usuário — ela reduz diretamente a visibilidade orgânica. Para editores que dependem do tráfico de busca, otimizar o LCP pode ser a diferença entre aparecer na primeira página e ficar enterrado.

O FlipLink otimiza o LCP tanto para o site de marketing quanto para os flipbooks publicados. O visualizador de [flipbook](/glossary/flipbook) prioriza a renderização da capa e da primeira página dupla, garantindo que o maior elemento de conteúdo visível apareça antes dos ativos pesados serem carregados. A [tela de carregamento personalizada](/features/custom-loading-screen) fornece feedback visual imediato — um placeholder com a marca que aparece em menos de um segundo — enquanto os recursos de renderização [Three.js](/glossary/three-js) são inicializados em segundo plano. O motor de [experiência e layout de página](/features/page-experience-and-layout) do FlipLink aplica compressão de imagem otimizada, dimensionamento responsivo e renderização progressiva para manter o LCP dentro do limite de 2,5 segundos recomendado pelo Google em desktop e mobile. Quando flipbooks são [incorporados](/glossary/embed) em sites externos, o carregamento lazy garante que a incorporação não concorra com o elemento LCP da página hospedeira.

Entender o LCP requer contexto junto com métricas de desempenho relacionadas: - **LCP bom**: 2,5 segundos ou menos. A página parece instantânea. A maioria dos usuários vê o conteúdo antes de considerar sair. - **Precisa melhorar**: 2,5 a 4,0 segundos. Os usuários percebem um atraso. As taxas de rejeição começam a subir. - **LCP ruim**: acima de 4,0 segundos. Visitantes provavelmente abandonam a página antes que o conteúdo principal apareça. O elemento LCP muda dependendo da página. Em uma página de produto, geralmente é a imagem do produto. Em um post de blog, pode ser o banner hero ou o primeiro parágrafo de texto. Em uma página de flipbook, é a imagem da capa. Identificar qual elemento constitui o LCP em cada página é o primeiro passo para a otimização.

A medição do LCP segue regras específicas definidas pelo Web Performance Working Group. O maior elemento é determinado pelo seu tamanho visível no viewport, não pelo tamanho do arquivo. Os elementos considerados para LCP incluem elementos `<img>`, `<image>` dentro de SVG, imagens de pôster de vídeo, elementos com `background-image` carregada via CSS e elementos de nível de bloco contendo texto. Elementos que se estendem além do viewport são medidos apenas pela sua porção visível. Causas comuns de LCP lento incluem imagens não otimizadas (servir uma foto de 4MB quando um WebP de 200KB seria suficiente), CSS e JavaScript que bloqueiam a renderização, tempos de resposta do servidor lentos ([TTFB](/glossary/core-web-vitals) acima de 800ms) e renderização do lado do cliente que requer execução de JavaScript antes que qualquer conteúdo apareça. Otimizações práticas incluem: pré-carregamento da imagem LCP com `<link rel="preload">`, servir imagens em formatos modernos (WebP, AVIF), usar CDN para ativos estáticos, inline de CSS crítico, defer de JavaScript não essencial e definir `width` e `height` explícitos nas imagens para prevenir mudanças de layout que podem atrasar o LCP.

LCP e [FCP](/glossary/core-web-vitals) (First Contentful Paint) são ambas métricas de tempo, mas medem momentos diferentes. O FCP é disparado quando o navegador renderiza o primeiro conteúdo DOM — mesmo que seja apenas uma barra de navegação, um spinner de carregamento ou uma única linha de texto. O LCP é disparado quando o maior elemento de conteúdo é renderizado. Na prática, o FCP frequentemente dispara um a dois segundos antes do LCP. Uma página pode ter um FCP rápido mas um LCP lento se o cabeçalho e a navegação carregam rapidamente enquanto a imagem hero leva vários segundos para aparecer. Para a experiência do usuário, o LCP é a métrica mais significativa porque reflete quando a página parece completa para o visitante. O FCP é útil para diagnosticar se o navegador começou a renderizar, mas é o LCP que determina se o usuário fica ou sai.

O LCP mede o momento em que sua página parece carregada para os visitantes reais. Mantenha-o abaixo de 2,5 segundos otimizando imagens, minimizando recursos que bloqueiam a renderização e priorizando o conteúdo acima da dobra — seus rankings de busca e o engajamento dos usuários dependem disso.