Medir e melhorar o LCP (Largest Contentful Paint) é um indicador de que um site carrega rapidamente.

Desde 2021, ele desempenha um papel fundamental na classificação de sites no Google. Neste post, mostraremos qual meta de LCP você deve definir para o seu site, bem como como otimizar seu LCP.

Qual é a maior Largest Contentful Paint?

Quando um usuário acessa um site, geralmente leva apenas alguns segundos para o conteúdo carregar e ser renderizado no navegador. No entanto, diversos processos ocorrem durante esse breve período:

1.O cliente (navegador) estabelece uma conexão com o servidor onde o site está hospedado. O tempo que leva para o primeiro byte de dados chegar é conhecido como Tempo até o Primeiro Byte (TTFB).
2.Uma das primeiras mudanças perceptíveis é o plano de fundo. Em poucos segundos, logotipos, menus e blocos de texto aparecerão. O tempo que leva para eles serem exibidos é conhecido como First Contentful Paint (FCP).
3.Em seguida, o maior objeto aparece. Pode ser um trecho de texto, uma imagem, uma animação ou um gráfico. No momento em que esse elemento é renderizado, considera-se que a Largest Contentful Paint (LCP) foi atingida.
4.Os usuários podem interagir com o site com ações processadas pelo site em até 50 milissegundos (Tempo de Interação, TTI). Isso pode ocorrer antes ou depois do carregamento do maior elemento.
5.Finalmente, o site está completamente carregado (Fully Loaded Time).

Como o LCP influencia a classificação do meu site no Google?

O Largest Contentful Paint é um dos três chamados Core Web Vitals, que avalia a experiência do usuário em um site.

Enquanto o LCP reflete a velocidade de carregamento, o First Input Delay (FID) oferece insights sobre a qualidade da interação. Para completar, o Cumulative Layout Shift (CLS) mede a estabilidade visual de um site.

Desde a Atualização de Experiência de Página do Google de 2021, todos os três Core Web Vitals são considerados na pontuação de um site.

Como no passado, o conteúdo de um site é o parâmetro que mais influencia sua classificação. No entanto, se dois sites pontuarem igualmente em conteúdo, aquele com os melhores Core Web Vitals receberá maior visibilidade e terá uma classificação mais alta. Impressionantes 25% da sua pontuação de desempenho no Google Lighthouse são derivados do seu LCP.

Por esse motivo, ele é o mais significativo dos três Core Web Vitals.

Quais outros fatores desempenham um papel na determinação da experiência da página?

Além do Core Web Vitals, o Google também considera uma série de aspectos adicionais em seu cálculo de experiência do usuário, que já existiam antes da atualização de 2021. São eles:

Compatibilidade com dispositivos móveis ou quão bem um site é exibido em smartphones e outros dispositivos móveis.
Uso de HTTPS , que melhora a segurança online.
Sem intersticiais intrusivos ou banners da Web perturbadores.
Segurança do navegador ou ausência de malware em um site.

Como posso medir o Largest Contentful Paint?

Para medir o LCP, o Google determina qual é o maior elemento e monitora quanto tempo ele leva para ser renderizado.

Se você quiser verificar a “Largest Contentful Paint” do seu site, você tem várias opções: as chamadas ferramentas de campo pontuam com base na experiência real do usuário, enquanto as ferramentas de laboratório testam o site em um dispositivo final específico.

Para avaliar a experiência da página, o Google usa a primeira opção.

A maioria das ferramentas não exibe apenas o LCP, mas também oferece recomendações sobre como melhorar a métrica, caso ela precise ser aprimorada.

Você pode descobrir o LCP da página em que está usando as Ferramentas de Desenvolvedor do Chrome. Mantenha pressionado Ctrl+Shift+I e clique na aba Desempenho. Em seguida, clique em Gravar (o círculo), e o Google realizará uma análise detalhada.

Outra opção no Chrome é usar a ferramenta Lab do Google Lighthouse. Mantenha pressionado Ctrl+Shift+I novamente e clique nas duas setas no menu superior. Selecione Lighthouse na lista e clique no botão azul “Analisar carregamento de página” para gerar um relatório.

O que é um bom Largest Contentful Paint?

Ferramentas de análise de desempenho avaliam o LCP da seguinte forma:

Um LCP abaixo de 2,5 segundos é considerado ideal.
LCPs variando de 2,5 a 4 segundos são considerados satisfatórios, embora com espaço para melhorias.
Se um LCP exceder 4 segundos, é considerado inaceitável. Se isso se aplica ao seu site, comece realizando uma análise usando as ferramentas listadas acima para entender as causas subjacentes.

Como posso melhorar o Largest Contentful Paint do meu site?

A renderização de elementos grandes é uma das últimas etapas do carregamento de um site.

Por esse motivo, todos os processos anteriores, como a criação de uma conexão entre o cliente e o servidor ou a renderização do primeiro elemento, podem impactar o LCP. Se a sua Largest Contentful Paint não for rápida o suficiente, você pode tentar o seguinte:

Melhore seu TTFB – Caso demore muito para estabelecer uma conexão entre o cliente e o servidor, o LCP será prejudicado. Escolher um provedor de hospedagem com servidores potentes pode otimizar seu Tempo até o Primeiro Byte. Usar redes de distribuição de conteúdo (CDNs) é outra medida útil, pois elas garantem que os usuários estejam conectados a um servidor geograficamente próximo de onde estão fisicamente localizados.
Remova recursos que bloqueiam a renderização – Sites são compostos por elementos HTML, além de scripts Java e CSS. Enquanto este último regula a exibição de um site, o JavaScript é responsável por elementos dinâmicos, como botões, formulários e animações. Sempre que scripts Java ou CSS incluem recursos desnecessários e têm código pesado, a renderização se torna mais difícil. Por esse motivo, todos os arquivos CSS e JavaScript devem ser mantidos o mais compactos possível. Ferramentas como o Webpack ajuda a dividir arquivos JavaScript grandes em vários arquivos mais fáceis de gerenciar.
Compactar imagens – Imagens grandes aumentam seu LCP. Ferramentas como o PageSpeed Insights alertam especificamente sobre o tamanho dos elementos e como ele pode afetar negativamente a velocidade de carregamento das páginas. Em geral, uma imagem deve ser compactada o máximo possível sem comprometer sua qualidade. Adicionar srcset a várias imagens para exibição em diferentes tipos de dispositivos também é altamente recomendado. Isso ajuda a evitar que uma imagem grande seja carregada em um smartphone que não a exiba corretamente.
Use o formato de imagem correto – imagens no formato WebP têm a mesma qualidade que JPG ou PNG, porém com tamanho menor. Como alternativa, JPGs grandes podem ser compactados para minimizar o tempo de carregamento. Para gráficos com fundos transparentes, o PNG é o melhor formato.
Não carregue imagens acima da dobra com preguiça – O carregamento lento indica ao navegador para renderizar apenas elementos grandes depois que o usuário rolar a página até eles. Isso significa que menos elementos precisam ser carregados quando a URL é solicitada pela primeira vez, melhorando o tempo geral de carregamento. No entanto, o carregamento lento requer JavaScript, o que aumenta o LCP. Por esse motivo, imagens acima da dobra devem ser excluídas do carregamento lento. Essas são imagens que podem ser encontradas nas áreas superiores do seu site e provavelmente são vistas primeiro pelos usuários.
Usar pré-busca – A pré-busca indica que determinados elementos são retidos no cache do navegador. Isso pode ser habilitado adicionando rel=dns-prefetch ao código do elemento, informando ao navegador quais elementos ele deve baixar primeiro e manter.
Evite usar muitos plugins – Os plugins oferecem funcionalidades aprimoradas em sites, mas isso tem um custo, pois aumentam o tempo de carregamento. Se quiser diminuir seu LCP, tente encontrar um equilíbrio melhor entre recursos e desempenho.

Medir e melhorar o LCP. Conclusão

O Largest Contentful Paint é uma métrica importante da experiência do usuário, que influencia a classificação de um site no Google que oferece diversas ferramentas para determinar e melhorar o LCP do seu site.

Duas das maneiras mais fáceis de reduzi-lo são evitar encher seu site com imagens grandes e certificar-se de sempre usar o formato de arquivo correto para gráficos e imagens.