Largest Contentful Paint (LCP) e como melhorar no WordPress

Este post é o primeiro de uma série de três partes sobre Core Web Vitals. Neste artigo, queremos analisar cada uma das três métricas que constituem o núcleo do novo critério de avaliação do Google para a qualidade dos sites. Nossa primeira parada: Largest Contentful Paint (LCP) e como melhorá-la no WordPress.

Atualmente, os Core Web Vitals são um fator de classificação fundamental no Google. Como indicadores da experiência do usuário, eles determinam se os visitantes têm uma boa experiência no seu site e também influenciam seu desempenho nos mecanismos de busca. Por isso, é importante que você os otimize adequadamente.

Para te ajudar nessa tarefa, como já mencionamos, queremos analisar em profundidade cada um dos componentes do Core Web Vitals. A seguir, vamos explicar o que exatamente são e por que são importantes para o SEO. Depois, você receberá um treinamento de primeira linha sobre como otimizar o “Largest Contentful Paint” (LCP), o primeiro desses indicadores, no seu site WordPress.

A postagem explica o que é o LCP, como medi-lo, qual valor você deve buscar e como melhorar essa métrica no seu site WordPress, se necessário.

O que são os Core Web Vitals?

Em primeiro lugar, caso esse assunto seja totalmente novo para você, vamos começar pelo básico: o que são exatamente os Core Web Vitals?

Em resumo, trata-se de um conjunto de métricas centradas no usuário que medem a velocidade de carregamento, a interatividade e a estabilidade visual das páginas da web, introduzidas pelo Google em maio de 2020. Elas têm como objetivo ajudar os proprietários e desenvolvedores de sites a compreender a qualidade da experiência do usuário oferecida por suas páginas e a identificar áreas que precisam de melhorias.

Os Core Web Vitals consistem em três métricas:

1. Largest Contentful Paint (LCP)
2. Atraso na Primeira Entrada (FID)
3. Deslocamento acumulado de layout (CLS)

Cada um deles é avaliado separadamente e é influenciado por diferentes fatores, razão pela qual estamos escrevendo esta série de artigos.

Por que os fatores essenciais são importantes para o SEO?

A razão pela qual enfatizamos esse ponto é bastante simples. O Google deixou claro que deseja dar prioridade às páginas que proporcionam uma experiência agradável aos visitantes que as acessam. Os Core Web Vitals são uma forma de medir isso.

Como consequência, atualmente elas são um componente essencial do algoritmo do Google para avaliar e classificar as páginas da web. Cito textualmente o que a própria empresa diz a esse respeito:

Os Core Web Vitals são o subconjunto dos Web Vitals que se aplicam a todas as páginas da web; devem ser medidos por todos os proprietários de sites e aparecerão em todas as ferramentas do Google.

Portanto, se você deseja que suas páginas tenham um bom desempenho, não basta se concentrar apenas em aspectos como design web, E-A-T, autoridade do conteúdo, otimização on-page, velocidade do site e compatibilidade com dispositivos móveis, mas também nessas métricas de UX. Caso contrário, você pode acabar sendo penalizado pelo Google e não ter uma boa classificação.

Além disso, melhorar os Core Web Vitals pode levar a um maior engajamento do usuário, visitas mais longas ao site e, em última instância, a um aumento nas conversões e na receita. Portanto, otimizar seu site para esses indicadores não só ajuda no SEO, mas também impulsiona os resultados financeiros do seu site.

Ficou claro? Então, vamos abordar a primeira métrica.

O que é o Largest Contentful Paint (LCP)?

O LCP é a primeira métrica do Core Web Vitals que queremos analisar. Mede o tempo que o elemento maior da janela gráfica (ou seja, o que você vê na janela do seu navegador) leva para ser renderizado completamente na tela depois que um usuário inicia o carregamento de uma página. Pode ser uma imagem, um vídeo, um bloco de texto ou qualquer outro elemento que ocupe uma quantidade significativa de espaço na página.

O LCP é uma métrica importante porque reflete a rapidez com que os usuários podem acessar o conteúdo principal de uma página da web, que é provavelmente o que eles vieram buscar em primeiro lugar. Uma pontuação baixa no LCP significa que os usuários podem ter que esperar mais tempo antes de começarem a ler ou interagir com a página. Isso pode causar frustração e simplesmente fazer com que eles saiam do site. Isso não é bom.

Como se calcula o Largest Contentful Paint (LCP)?

A pontuação LCP de uma página é determinada com base no tempo, em segundos, que o maior elemento da janela gráfica leva para ser renderizado completamente. No entanto, a métrica leva em consideração apenas certos tipos de elementos para o seu cálculo:

• elementos <img>, ou seja, imagens
• elementos <image> no interior, documentos <svg>
• elementos  que exibem uma imagem de pré-visualização
• Elementos que carregam uma imagem de fundo por meio da função url()
• Elementos de nível de bloco e inline com conteúdo de texto

Em resumo, elementos visuais e texto principal. Ao mesmo tempo, o LCP não leva em consideração componentes que os usuários provavelmente não considerariam como "com conteúdo", tais como:

• Elementos com opacidade igual a 0, que são invisíveis para o usuário
• Elementos que ocupam toda a tela e que provavelmente funcionam como plano de fundo, e não como conteúdo
• Imagens de preenchimento ou imagens com poucas informações que provavelmente não refletem o verdadeiro objetivo da página

Como testar seu site quanto ao LCP?

Existem várias maneiras de testar o Largest Contentful Paint no seu site WordPress. Como mencionado na citação anterior, essa métrica agora está presente em todas as ferramentas do Google, então você pode começar por aí.

Por exemplo, ao inserir seu site no PageSpeed Insights, você pode verificar seu valor de LCP e saber se passou no teste ou não.

Além disso, você encontrará informações sobre problemas relacionados ao “paint” de conteúdos maiores e outras questões no relatório Core Web Vitals do Google Search Console.

As ferramentas para desenvolvedores do Chrome também mostram isso (mais informações a seguir). Além disso, existem extensões do navegador que permitem medir essas métricas, como Vitales Web para o Chrome e SpeedVitals para o Firefox. Por fim, se você for desenvolvedor, talvez queira utilizar soluções mais técnicas, como o biblioteca Web Vitals em JavaScript.

Qual é o valor ideal de um LCP?

Depois de aprender a medir o LCP, provavelmente sua próxima pergunta será: o que exatamente é um bom valor? Qual valor de referência você deveria buscar?

No caso do Largest Contentful Paint, o número mágico é 2,5 segundos. Se sua pontuação no LCP for inferior a 2,5 segundos, ela é considerada boa. É provável que a página em questão proporcione uma boa experiência ao usuário. Se sua pontuação estiver entre 2,5 e 4 segundos, o Google considera que ela precisa ser melhorada. Qualquer valor acima de 4 segundos é considerado insatisfatório.

Então, está bem claro. Não precisa ficar se perguntando: você sabe exatamente o que o gigante das buscas espera de você.

Como melhorar o Largest Contentful Paint no WordPress?

Se, após realizar os testes, você perceber que seu site não atinge o valor de referência mencionado anteriormente, não se preocupe. Dedicaremos o restante deste post a explicar como melhorar seu valor de LCP, caso seja necessário.

A boa notícia é que você pode fazer muitas coisas. Por outro lado, há muitos fatores que podem influenciar o LCP, por isso corrigi-lo geralmente não é algo rápido. Você precisa examinar, passo a passo, todo o processo de carregamento da página. Então, vamos lá...

Identificar o problema do Largest Contentful Paint (LCP)

O primeiro passo para melhorar o valor do seu LCP é descobrir qual é exatamente o seu elemento LCP. Afinal, como você pode melhorar a exibição de algo se não sabe em que se concentrar?

Se você usar o PageSpeed Insights para avaliar seu site, ele vai indicar qual é o seu elemento LCP mais abaixo na página, na seção Diagnóstico.

Se você executar um teste de desempenho nas ferramentas de desenvolvedor do navegador Chrome, ele também aparecerá na linha do tempo e até mesmo destacará o elemento LCP na página. Clique em LCP e, em seguida, passe o mouse sobre o arquivo abaixo Nó relacionado.

Dividir o processo de carregamento em etapas

A seguir, para otimizar seu LCP, é útil dividir o processo em várias etapas. Como já foi dito, não existe uma abordagem única. Você precisa analisar a questão sob diferentes ângulos para descobrir o que precisa ser corrigido no seu site.

As etapas propostas pelo Google são:

• TTFB - Significa "tempo até o primeiro byte", ou seja, o tempo que decorre desde que um usuário solicita a página até receber o primeiro byte de HTML.
• Atraso no carregamento de recursos - O tempo que decorre desde o recebimento dos arquivos da página (HTML e CSS) até o carregamento dos recursos LCP propriamente ditos.
• Tempo de carregamento dos recursos - Fase em que o recurso LCP é carregado.
• Atraso na renderização do elemento - Por fim, o tempo decorrido entre o carregamento do elemento LCP e sua renderização completa.

Dividir o Largest Contentful Paint dessa forma permite que você se concentre nas diferentes fases e as aprimore individualmente.

Otimizar a hospedagem e a arquitetura do site

São medidas destinadas a melhorar o TTFB e o atraso no carregamento de recursos.

A rapidez com que os visitantes recebem os dados do seu site depende de vários fatores. Por um lado, está o servidor. Mesmo que seu site ocupe muito pouco espaço, como um site de uma única página, ele pode sofrer grandes atrasos por causa de um provedor de hospedagem na web lento. Outro fator são os componentes que compõem seu site, como o sistema operacional, temas, plugins, etc.

Portanto, melhorar todos esses fatores ajuda a otimizar o Largest Contentful Paint. Veja como fazer isso:

• Invista em um hospedagem de qualidade – Como já foi mencionado, o servidor web é um fator importante e, portanto, o seu provedor de hospedagem é uma escolha que deve ser bem ponderada. Evite a hospedagem compartilhada, se possível, e opte por um plano de hospedagem adequado ao seu tráfego. Além disso, procure hospedar seu site em um servidor próximo ao seu público.
• Utilize temas e plugins de alta qualidade - Certifique-se de obter os componentes do seu site de fontes confiáveis, para ter certeza de que eles são bem programados, simples e contam com um bom suporte. Use o mínimo possível de plugins para reduzir as solicitações HTTP no seu site.
• Mantenha seu site atualizado - As atualizações do núcleo do WordPress e dos plugins/temas trazem melhorias, incluindo correções de desempenho. Mantenha-se atualizado para ter acesso ao que há de melhor e mais recente.

Com elas, você pode garantir que os visitantes recebam os dados do seu site o mais rápido possível. Para saber se o problema está no seu servidor, será útil aprender a testar a velocidade do seu site. Além disso, evite redirecionamentos múltiplos e analise as solicitações ao servidor mencionadas anteriormente.

Utilize uma Rede de Distribuição de Conteúdo (CDN)

Outra maneira de melhorar o tempo até o primeiro byte é utilizar uma rede de distribuição de conteúdo (CDN). Ela ajuda a reduzir a distância entre o usuário e o local de onde ele recebe os dados do seu site. Isso pode diminuir o tempo de carregamento.

Existem até mesmo CDNs especializadas nas quais basta colocar suas imagens em servidores externos, como, por exemplo, Acelerador de sites do Jetpack. Isso faz todo o sentido, já que as imagens costumam ser os elementos com maior volume de dados. As CDNs também costumam aplicar as técnicas de otimização de imagens das quais falaremos a seguir.

Otimizar imagens e fontes da web

Chegamos agora às técnicas para reduzir o tempo de carregamento dos recursos. Se você prestou atenção até agora, sabe que se trata da velocidade com que o recurso LCP é entregue ao navegador. Um aspecto importante a ser considerado aqui são os elementos visuais.

As imagens costumam acabar sendo o elemento com maior volume de dados, pois tendem a ser maiores do que o texto devido ao excesso de informações que contêm. Por isso, uma das coisas nas quais você deve se concentrar para reduzir o tempo de carregamento dos seus recursos é otimizá-las:

• Use o tamanho correto – Use apenas imagens com o tamanho exato em que aparecerão na página; caso contrário, você estará fazendo com que os visitantes tenham que carregar mais do que o necessário. Isso geralmente significa redimensionar as imagens antes de enviá-las ou ajustar as opções de mídia do WordPress exatamente ao tamanho necessário para o seu layout. Em plugin para regenerar miniaturas pode ajudar você a otimizar o tamanho das imagens que já estão no seu site.
• Aposte nos formatos de imagem modernos – Nem todos os formatos de imagem são iguais. Para que suas imagens tenham o menor tamanho possível, use formatos modernos como webp ou avif, que ocupam menos espaço do que seus antecessores.
• Compactar imagens – Compactar significa eliminar dados desnecessários. Você pode fazer isso antes de enviar suas imagens (por exemplo, por meio de TinyPNG/JPG o RIOT) ou automaticamente com plugins do WordPress, como Smush o Optimole.
• As imagens de carregamento lento não aparecem na tela – O carregamento diferido significa não carregar as imagens que ainda não estão visíveis no navegador. Isso pode economizar muito tempo. Apenas certifique-se de excluir as imagens que devem ficar visíveis imediatamente.

Saiba mais sobre isso em nosso artigo sobre otimização de imagens. Já que está aqui, reduza também o tamanho e o número das suas fontes da web. Carregue apenas o que você realmente precisa e considere a possibilidade de hospedar suas fontes da web localmente.

Otimize seu site com o WP Rocket

A seguir, vamos dar várias dicas que você pode implementar no 100% com o plugin WP Rocket.

Configure o armazenamento em cache e a compactação

O armazenamento em cache e a compactação são técnicas que, de modo geral, aceleram o seu site, fazendo com que os arquivos sejam carregados mais rapidamente. Elas podem ajudar tanto a reduzir o atraso no carregamento de recursos quanto a diminuir o tempo de carregamento.

A primeira opção faz isso pré-renderizando seus documentos HTML e salvando versões finalizadas deles no seu servidor, de modo que esse processo não precise ser realizado toda vez que os visitantes quiserem acessar seu site.

A segunda consiste em reduzir o tamanho dos arquivos do seu site para que o carregamento seja mais rápido. Você pode fazer isso usando a compactação Gzip ou a mais recente Compressão Brotli. Combine isso com a minificação dos seus arquivos para que ocupem menos espaço e carreguem mais rápido.

Um plugin como WP Rocket Muitos plugins de cache do WordPress podem fazer tudo isso e são uma maneira simples de melhorar o tempo de carregamento do conteúdo do seu site.

Remover os recursos que bloqueiam a renderização

Agora vamos abordar a melhoria do atraso na renderização dos elementos. Mesmo que você tenha otimizado a velocidade de carregamento da sua página e a entrega do seu elemento LCP, sua pontuação continuará baixa se o próprio elemento demorar muito para aparecer na página. Nesse caso, os recursos que bloqueiam a renderização são os culpados mais comuns.

Você pode consultar o artigo cujo link está acima para obter instruções detalhadas sobre como lidar com eles. No entanto, aqui estão algumas observações breves:

• Carrega scripts de forma assíncrona e o JavaScript essencial diretamente na página.
• Folhas de estilo inline em HTML (isso se aplica apenas a folhas de estilo pequenas, já que os elementos inline não são armazenados em cache).
• Reduza o tamanho da folha de estilo removendo o CSS e o JavaScript não utilizados. Como alternativa, adie o CSS não essencial e minimize e compacte as folhas de estilo.

Use a função Cobertura das ferramentas de desenvolvimento do seu navegador para identificar os elementos que seus visitantes precisam carregar primeiro. Isso também ajuda a identificar o código não utilizado que você poderia remover.

Assuntos realmente técnicos

Se você é do tipo que gosta de detalhes técnicos, aqui estão mais algumas dicas para os mais entusiastas que podem ajudar a melhorar ainda mais o seu Largest Contentful Paint no WordPress:

• Pré-carregar imagens em HTML - Especialmente quando são usados como planos de fundo CSS ou similares, adicione <link rel=\"preload\"> para dar prioridade às suas imagens mais importantes. Isso também se aplica às fontes que possam ser necessárias para exibir o texto principal.
• Ajustar a prioridade de obtenção - Indica aos navegadores o que devem carregar primeiro, adicionando fetchpriority="high". Limite a uma ou duas imagens; caso contrário, não adiantaria nada.
• Use a renderização no servidor ou a pré-renderização – Especialmente se você tiver um servidor rápido. Isso reduz a quantidade de trabalho que o navegador precisa realizar.
• Otimizar as fontes da web usando o `font-display` – Estabelecer a regra font-display a swap, opção alternativao opcional para evitar que a exibição do seu texto seja interrompida durante o carregamento das fontes da web.

O Largest Contentful Paint é apenas uma das três métricas que o Google considera como Core Web Vitals e que utiliza para avaliar a experiência do usuário em um site e, em última instância, sua classificação nas pesquisas. Se você estiver enfrentando problemas com o desempenho do site e nas pesquisas, esse é um dos fatores que deve levar em consideração.

Nesta postagem, você aprendeu a verificar se isso é um fator importante para o seu site do WordPress, qual valor de LCP você deve buscar e maneiras de melhorá-lo. Esperamos que, a esta altura, você já se sinta capaz de melhorar o seu LCP.

Como sempre, você não precisa ser perfeito. Escolha aquilo que você se sente capaz de fazer, coloque em prática e siga em frente a partir daí.

Você tem alguma dica adicional sobre a métrica de conteúdo mais relevante e como melhorá-la no WordPress? Não hesite em compartilhar nos comentários.

Se você quiser conhecer outros artigos semelhantes a Largest Contentful Paint (LCP) y cómo mejorar en WordPress, visite a categoria %tegory%%.