Falamos dos três Core Web Vitals em nosso artigo anterior sobre otimização em preparação para a atualização do Core Web Vitals do Google. No entanto, não podemos falar do Core Web Vitals sem tratar em detalhes de um fator-chave: o LCP, também conhecido como Largest Contentful Paint.
Neste guia, vamos explorar o que é o LCP, por que é importante, seus benefícios e quais melhorias você pode fazer para otimizar seu site.
- O que é LCP e por que ele importa?
- O que define um LCP bom ou ruim
- Quais são as causas de um LCP ruim?
- Como consertar um LCP ruim
- Descubra seu LCP
- O que a Semrush pode fazer para ajudar?
O que é LCP e por que ele importa?
LCP é a sigla de Largest Contentful Paint. O LCP é uma medida da velocidade da página. Ele informa o tempo em que o conteúdo principal de uma página leva para ser carregado (basicamente quando o usuário consegue ler a página).
O LCP é essencial para experiência do usuário. Os usuários geralmente não querem ficar esperando que um site carregue quando podem ter uma experiência melhor imediatamente em outro lugar.
Se seu LCP é ruim, talvez sua taxa de rejeição seja mais alta, e isso pode afetar seus posicionamentos gerais. Um LCP ruim pode até levar a uma taxa de conversão mais baixa — o que não é bom para negócios emergentes.
Graças à atualização do Core Web Vitals do Google, o LCP está se tornando um fator mais significativo para o posicionamento nas SERPs. Para manter o posicionamento orgânico e esses visitantes, é super importante ter o melhor LCP possível.
O LCP se aplica apenas ao conteúdo principal na parte superior da página. Isso inclui imagens, vídeos ou blocos de texto que aparecem sem que o usuário tenha que descer a página para encontrá-los. Tenha isso em mente ao notar áreas problemáticas.
O que define um LCP bom ou ruim
De acordo com as orientações do Google, o conteúdo principal da sua página deve ser carregado nos primeiros 2,5 segundos da visita de um usuário para obter um bom LCP. O gráfico abaixo mostra isso em mais detalhes:
Se seus usuários tiverem que esperar cinco segundos ou mais para que o conteúdo principal seja carregado (ou seja, se seu LCP for ruim e precisar de melhorias), é muito provável que eles desistam e procurem em outro lugar.
As orientações do Google especificam ainda que seu LCP precisa ser classificado como "bom" pelo menos 75% do tempo. Se você conseguir fazer isso, seu desempenho vai aumentar muito.
Daremos uma olhada no seu LCP específico daqui a pouco. Por enquanto, vamos nos concentrar nas causas gerais de LCP ruins e em como resolvê-las.
Quais são as causas de um LCP ruim?
A lista do que poderia causar um LCP ruim pode ser muito longa.
Basicamente, pode ser qualquer coisa que ocupe muito espaço: reprodutores de mídia integrados que podem desacelerar uma página, slides de imagens não otimizadas, botões para redes sociais ou até mesmo widgets como o login, um formulário de inscrição de newsletter e muito mais.
Vamos ser um pouco mais específicos.
Como mostra o gráfico acima, os fatores que causam um LCP ruim geralmente pertencem a quatro grupos principais:
1. Baixo tempo de resposta do servidor
Ter um baixo tempo de resposta do servidor afeta negativamente todas as suas métricas de velocidade de carregamento e, portanto, é uma causa definitiva de LCP ruim.
Os baixos tempos de resposta do servidor muitas vezes são o resultado de problemas com a infraestrutura de back-end, consultas de banco de dados não otimizadas ou respostas de API que levam muito tempo para serem resolvidas — tudo isso acontecendo nos bastidores do site.
O primeiro passo para melhorar isso é garantir que você hospede seu site em um bom servidor.
2. Bloqueio de renderização por JavaScript e CSS
Embora personalizar seu site seja uma ótima maneira de ajudá-lo a se destacar, adicionar JavaScript e CSS para deixar o tema do site e o conteúdo mais bonito infelizmente também afetará o tempo de carregamento.
Às vezes, é melhor manter um design menos "pesado" e reduzir o número de plugins, particularmente na parte superior da página, para o bem do seu LCP.
3. Renderização do lado do cliente
A renderização do lado do cliente (também conhecida como renderização de páginas da web diretamente no navegador com JavaScript) é um método de desenvolvimento da web bastante popular.
No entanto, o navegador precisa de muitas idas e vindas para coletar e carregar o JavaScript antes de renderizar o conteúdo principal, o que gera mais espera do usuário. Se você também confia na renderização do lado do cliente, talvez queira dar uma olhada ao trabalhar no seu LCP.
4. Baixo tempo de carregamento de recursos
Recursos grandes ou conteúdo visualmente impactante em uma página inevitavelmente levam muito tempo para carregar — é fato. Se você tiver muitas imagens de alta qualidade não otimizadas, GIFs e caixas de texto a serem renderizadas na parte superior da página, seu LCP será afetado.
Como consertar um LCP ruim
Há algumas correções para LCP ruim — algumas mais fáceis do que outras. Vamos mostrar algumas das mais simples aqui. Mas antes confira a recomendação do especialista em SEO, John Martin, que resume bem o que é mais importante para melhorar o seu LCP.
Se você deseja obter uma boa métrica de LCP é determinante que o tempo de resposta inicial do servidor esteja satisfatório e na medida do possível, sejam usados recursos que otimizem essa entrega como Content Delivery Network. Otimização de imagens é essencial, seja em tamanhos adequados como em peso, além de recursos relacionados como lazyload. Otimizar o Caminho de Renderização Crítico é altamente recomendado para evitar que o JavaScript e o CSS bloqueiem a renderização. Também devemos ter atenção especial às fontes, com a utilização adequada do font-display e preload. Por fim, sempre avalie os dados de laboratório e acompanhe os dados reais para ter certeza que seu LCP está adequado para seus usuários.
1. Otimize seu CSS
Arquivos CSS são recursos que bloqueiam a renderização. Os recursos devem ser carregados e processados antes que o servidor possa renderizar a página inteira.
No entanto, você pode otimizar os arquivos CSS removendo manualmente o código não utilizado, minimizando os arquivos CSS em uso ou otimizando suas imagens de fundo CSS com consultas de mídia.
Parece complicado, mas há muitos recursos e tutoriais sobre métricas de velocidade centradas no usuário disponíveis que podem ajudar!
2. Otimize suas imagens
Há algumas etapas que você pode realizar ao otimizar suas imagens. As principais são as seguintes:
- Comprima as imagens
- Considere converter as imagens para formatos mais eficientes
- Use vídeos em vez de GIFs (eles levam menos tempo para carregar)
- Confira se as imagens têm as dimensões corretas
E vale sempre a pena considerar: será que preciso mesmo dessa imagem? Ela acrescenta algo à minha página? Se não, pode valer a pena se livrar dela.
3. Otimize as WebFonts
As fontes geralmente vêm em arquivos grandes. Como resultado, o conteúdo de texto em uma fonte incomum não é exibido em uma página até que o arquivo da fonte seja carregado.Levará mais tempo para que os usuários tenham acesso a informações essenciais em uma página. O que não serve para nada.
Para evitar isso, você deve otimizar suas WebFonts. Ao reduzir o tamanho da WebFont, usar a exibição de fontes ou atualizar o estilo da página para usar sua fonte personalizada, o carregamento da página deve ser mais rápido.
4. Otimize o JavaScript
Você escreve o JavaScript, consegue todas as informações necessárias e está tudo pronto, certo? Não exatamente. Se o JavaScript estiver parado há algum tempo, pode valer a pena conferi-lo, pois ele pode estar custando a velocidade de carregamento da página.
Algumas coisas que você pode fazer para otimizar o JavaScript (considerando as métricas LCP mais recentes) incluem:
- remover código não utilizado
- verificar se o código está atualizado e é compatível com navegadores modernos
- instalar JavaScript moderno e reduzir cargas úteis com divisão de código
Descubra seu LCP
Então, como descobrir qual é o seu LCP?
Um bom começo para verificar o desempenho do seu LCP é usar as ferramentas que o Google fornece: o Google Search Console, o Google Page Insights e o Lighthouse.
Há uma guia do Core Web Vitals na barra de navegação à esquerda no Google Search Console. Nesta guia, você encontra uma visão geral das URLs. Lá, é muito fácil conferir onde os problemas podem estar e também quais ajustes você pode fazer para resolvê-los.
Se você não tiver um Google Search Console configurado para seu site, não se preocupe. Você também pode acessar essas informações por meio das ferramentas Lighthouse e PageSpeed Insights. Se você é iniciante no PageSpeed Insights, pode encontrar uma explicação completa sobre como usar esta ferramenta do Google em nosso blog.
Confira a visão geral do Page Insights para o site para navegadores da Amazon. Temos todos os Core Web Vitals em um só lugar:
Como você pode notar, o Largest Contentful Paint está indo muito bem, mas sempre há o que melhorar. Vá até a seção Oportunidades, explore todas as recomendações e aproveite todas as chances para conseguir posicionamentos ainda melhores.
É uma boa ideia analisar essas recomendações antes da atualização do Core Web Vitals do Google. Confira com frequência para garantir a melhoria constante do seu LCP e de outras métricas do site e da situação geral de SEO.
O que a Semrush pode fazer para ajudar no LCP?
Então, você verificou seu LCP e identificou problemas. Agora, precisa corrigi-los e, depois, repetir todo o processo em uma ou duas semanas.
A manutenção constante do SEO para manter o LCP do site adequado pode ser cansativo. A boa notícia é que sabemos exatamente como você pode tornar esse processo mais eficiente: a ferramenta Auditoria do site.
Teste a velocidade do seu site com a ferramenta e gere uma lista de todas as melhorias e problemas possíveis. A ferramenta Auditoria do site também verificará erros técnicos de SEO para fornecer gráficos e tabelas fáceis de ler, explicando todos os problemas e correções.
A ferramenta pode ajudar a preencher os gaps do Core Web Vitals avaliando sua URL e analisando seu conteúdo, mantendo você sempre a par do desempenho do LCP.
Depois de configurar a auditoria do site, você só precisa clicar em "Exibir detalhes" em "Core Web Vitals":
Você encontra os resultados de LCP no gráfico à esquerda:
Agora você sabe como manter seu desempenho de LCP atualizado e como identificar pontos para melhoria. Se conferir as recomendações da Auditoria do site regularmente, seu LCP e o Core Web Vitals estão no caminho certo para melhorar.
Use esses dados para acompanhar seu LCP ao longo do tempo e você com certeza vai melhorar seus desempenhos de velocidade da Web em pouco tempo.
Ainda sente um pouco de insegurança? Para saber mais sobre como usar a Auditoria do site para a velocidade da página em geral, confira nossa postagem no blog sobre como medir os Core Web Vitals com a Auditoria do site da Semrush.