A privacidade é importante para nós, então você tem a opção de desativar certos tipos de armazenamento que podem não ser necessários para o funcionamento básico do site. O bloqueio de categorias pode afetar sua experiência no site. Mais informações
Otimização do Largest Contentful Paint (LCP): reduza LCP para menos de 2,5 segundos. Guia de otimização de imagens, melhorias de TTFB e diferimento de JavaScript.
.webp){kind=small}
.webp){kind=small}
O LCP é uma métrica crítica de experiência do utilizador e um fator de classificação do Google. Quando um utilizador navega para a sua página, não se importa com o tempo total de carregamento da página. Importa-se quando consegue ver o conteúdo principal e começar a ler ou interagir. O LCP mede exatamente esse momento: quando o maior elemento de conteúdo fica visível. Se otimizar o LCP corretamente, a sua página parece rápida. Se errar, a sua página parece lenta, mesmo que outras métricas estejam bem.
Otimizar o LCP requer uma abordagem de três frentes: melhorar o tempo de resposta do servidor (TTFB), eliminar recursos bloqueadores de renderização e otimizar imagens. Cada abordagem aborda diferentes limitações de LCP. A combinação entrega melhorias dramáticas.
O Largest Contentful Paint (LCP) é o tempo de renderização do maior elemento de conteúdo visível na sua página. Isto poderia ser uma imagem grande, vídeo, título ou bloco de texto. O LCP mede desde quando o utilizador navega para a sua página até esse elemento ficar visível. A documentação de LCP do Google fornece informações técnicas detalhadas e estratégias de otimização.
O LCP não é uma métrica de passar/falhar binária. É uma pontuação contínua. O Google determinou que LCP inferior a 2,5 segundos é "bom", LCP entre 2,5-4 segundos precisa de melhorias, e LCP superior a 4 segundos é fraco. Os utilizadores percebem páginas com LCP inferior a 2 segundos como muito rápidas. Páginas com LCP de 3-4 segundos parecem notavelmente mais lentas. Páginas com LCP superior a 5 segundos são frequentemente abandonadas.
O LCP muda durante o carregamento da página conforme elementos de conteúdo maior aparecem. Se uma imagem enorme carregar no intervalo de 3 segundos, o LCP salta de 1 segundo para 3 segundos. Isto é importante: não pode simplesmente otimizar o tempo de pintura inicial. Deve garantir que todos os grandes elementos de conteúdo carregam rapidamente.
Time to First Byte (TTFB) é o tempo desde o início da navegação até o servidor devolver o primeiro byte do documento HTML. O TTFB determina o limite para o LCP. Se o TTFB for 2 segundos, o LCP não pode ser melhor do que 2 segundos porque o navegador ainda não recebeu o HTML. Reduzir o TTFB é um pré-requisito para reduzir o LCP.
Um bom TTFB é inferior a 600 milissegundos. TTFB entre 600-1800ms precisa de melhorias. TTFB superior a 1800ms é fraco. Se o seu TTFB for lento, concentre-se primeiro na otimização do servidor. Nenhuma quantidade de otimização de front-end pode compensar um servidor lento.
Causas comuns de TTFB lento: código de back-end ineficiente, consultas de base de dados ou sobrecarga do servidor. O alojamento lento também causa TTFB alto. O alojamento partilhado é muitas vezes extremamente lento. Atualize para alojamento VPS ou na nuvem para melhor desempenho. Utilize um CDN para reduzir o TTFB servindo conteúdo de servidores próximos dos seus utilizadores.
O PageSpeed Insights mostra o seu TTFB na secção "Tempo de resposta do servidor". Se o TTFB for um limitante, será destacado como prioridade.
O LCP depende do que é o maior elemento de conteúdo na sua página. Num artigo de blogue, o maior elemento poderia ser uma imagem de herói grande. Numa página de produto, poderia ser uma foto de produto. Num site de notícias, poderia ser um título de artigo. Identificar o elemento LCP é o primeiro passo para otimizá-lo.
Utilize o Chrome DevTools para identificar o elemento LCP. Abra o DevTools, vá ao separador Performance, comece a gravar e recarregue a página. Na gravação de Performance, procure a marca "Largest Contentful Paint". Passe o rato sobre ela para ver qual elemento acionou o LCP. Uma vez que saiba qual é o elemento, otimize-o.
O elemento LCP é frequentemente uma imagem. As imagens são grandes e carregam após o HTML ser analisado. Otimizar o carregamento de imagens tem o maior impacto no LCP para a maioria dos sites. As imagens que estão abaixo da linha de dobra podem ser carregadas diferidamente, acelerando o LCP para o conteúdo acima da dobra.
O pré-carregamento diz ao navegador para começar a descarregar um recurso cedo, antes de ser necessário para renderização. Pré-carregue a sua imagem LCP ou outros recursos críticos utilizando etiquetas `` no cabeçalho HTML. Isto diz ao navegador "comece a descarregar este recurso imediatamente".
Exemplo: `` diz ao navegador para começar a descarregar a imagem de herói imediatamente, não esperando que o CSS seja analisado. Isto pode reduzir o LCP por 100-500ms dependendo do tamanho do recurso.
Seja cauteloso com o pré-carregamento. O pré-carregamento de muitos recursos desperdiça largura de banda. Pré-carregue apenas os recursos mais críticos (imagem de herói, tipos de letra críticos, CSS essencial). O guia de otimização de Core Web Vitals do Google explica as melhores práticas de pré-carregamento.
Se o seu elemento LCP for uma imagem, otimize o tamanho do ficheiro de imagem e a estratégia de carregamento. Três táticas:
Comprima a imagem. Utilize ferramentas como TinyPNG, ImageOptim ou Squoosh para comprimir sem perder qualidade. A compressão JPEG pode reduzir o tamanho do ficheiro 10-40x. Cada 100KB de tamanho de imagem adiciona 100-200ms ao LCP em redes 4G. A compressão é de alto ROI.
Utilize formatos modernos. O WebP é 25-35% menor do que o JPEG. O AVIF é ainda menor. Utilize o elemento HTML `
Especifique dimensões de imagem. Incluir atributos de largura e altura previne mudanças de disposição e permite ao navegador reservar espaço antes de a imagem carregar. Isto não melhora diretamente o LCP, mas melhora o Cumulative Layout Shift (CLS), outra métrica de Core Web Vitals.
O CSS bloqueador de renderização previne que o navegador renderize a página até o CSS ser descarregado e analisado. Ficheiros CSS grandes atrasam a renderização. Minimize o CSS bloqueador de renderização inline de CSS crítico e diferir o resto.
CSS Crítico é CSS necessário para conteúdo acima da dobra. Coloque este CSS inline em etiquetas `
