Um dos grandes problemas na performance da pontuação do Core Web Vitals é o que chamamos de LCP.
O que é LCP?
Largest Contentful Paint (LCP), ou Maior Renderização de Conteúdo, é uma métrica importante e centrada no usuário para medir a velocidade de carregamento percebida porque marca o ponto na linha do tempo de carregamento da página quando o conteúdo principal da página provavelmente já foi carregado.
Uma LCP rápida ajuda a assegurar ao usuário que o página é útil.
Geralmente são imagens, blocos de textos, iframes e vídeos.
O que é uma boa pontuação de LCP?
Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma Largest Contentful Paint de 2,5 segundos ou menos.
Para garantir que você esteja atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o 75º percentil de carregamentos de página, segmentado através de dispositivos móveis e desktop.
WP-Rocket Plugin de WordPress
Muitos profissionais da área de SEO técnico e Growth conhecem o famoso plugin WP-Rocket, para WordPress.
Este plugin faz muitas ações de performance que deixa o site mais rápido, nem sempre chegando a 100 pontos no CWV, mas melhor do que era antes de instalado e ajustado para cada site.
Mas quando passamos no Pagespeed Insights, para termos os valores de CWV, o famoso item LCP é um dos que no dá muita dor de cabeça.
O LCP mostra qual item esta atrasando do carregamento da página e baixando nossa pontuação.
Como padrão, a fim de otimizar a página, usando o WP-Rocket definimos usar o atributo lazy load para imagens e iframes.
Isso ajuda muito mesmo, pois este objeto só será carregado quando o usuário rolar a barra de rolagem, otimizando o carregamento inicial.
Mas é quando o problema de LCP é uma imagem que esta na primeira dobra de tela (viewport) e é justamente ele que está prejudicando o carregamento e a pontuação do CWV, tipo a imagem de destaque do post?
Esta primeira visualização de tela é muito importante nos fatores de pontuação do CWV.
Demorei algumas horas para achar a solução…
Basta selecionar esta imagem e dizer que ela NÃO pode ter o atributo lazy load!
Isso fará com que a imagem seja carregada normalmente e sem usar técnicas mais avançadas como preload.
Usando o WP-Rocket para melhorar o LCP
Não vou explicar aqui como instalar o plugin e o que ele faz item por item, pois o que interessa mesmo e melhorar o LCP.
No Item MÍDIA do plugin existe o campo Imagens e iFrames excluídos.
Beste campo, você pode digitar:
- o nome do arquivo de imagem
- a classe CSS dele
- a url completa da imagem
Eu preferi usar uma classe CSS específica, pois assim toda vez que ela for usada numa imagem, o plugin fará o favor de não atribuir o lazy load.
Olhe o exemplo abaixo:
Olhem o resultado de uma página depois de usar esta técnica:
Speedvitals é a ferramenta de mensuração do Core Web Vitals
Fora as ferramentas oficiais do Google para medição do Core Web Vitals, eu uso e recomendo muito o site Speedvitals.
Ele é gratuito e dá umas dicas bem bacanas de como você pode melhorar a performance de acordo com o web vitals selecionado.
Qual é a diferença entre o PageSpeed Insights e o SpeedVitals?
Tanto o SpeedVitals quanto o Google PageSpeed Insights usam o Google Lighthouse para realizar o teste do Web Vitals, mas o SpeedVitals torna o teste mais configurável, permitindo que você selecione um determinado local e dispositivo de teste.
O Relatório de desempenho do SpeedVitals tem mais recursos, como gráfico em cascata, gráficos de recursos e dicas de otimização profissional.
Além disso, permite que você salve os relatórios de teste e verifique o histórico de teste.
O que são Web Vitais?
Web Vitals são sinais de desempenho da Web projetados pelo Google para medir o desempenho da Web no mundo real e a experiência do usuário.
Atualmente, existem seis Web Vitals: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT), Speed Index (SI) e Time to Interactive (TTI).
Façam o teste e depois me digam se valeu a pena melhorar o LCP da página!
Se curtirem, aceito backlinks! 🙂
Abraços turma.
Consultor SEO e especialista em Otimização de Sites com foco em aumentar o tráfego orgânico. Professor e Especialista de SEO a mais de 20 anos com vasta experiência em SEO para pequenas, médias e grandes empresas.
