LCP: aumentando a performance usando o WP-Rocket

LCP WP rocket
LCP WP rocket

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.

Artigo Relacionado:  Otimize seu site WordPress para tráfego orgânico super rápido!

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:

wp rocket midia

Olhem o resultado de uma página depois de usar esta técnica:

Core web vitals

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.

Speedvitals
Speedvitals

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.

Artigo Relacionado:  Baixe o Opera GX o Navegador Mais Personalizável do Mundo

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *