O que é Largest Contentful Paint: Uma explicação fácil #ÚltimasNotícias #tecnologia

Largest Contentful Paint (LCP) é uma métrica de experiência do usuário do Google integrada aos sistemas de classificação em 2021.

O LCP é uma das três métricas do Core Web Vitals (CWV) que rastreiam métricas de desempenho técnico que impactam a experiência do usuário.

Os Core Web Vitals existem paradoxalmente, com o Google fornecendo orientações destacando sua importância, mas minimizando seu impacto nas classificações.

O LCP, assim como os outros sinais CWV, é útil para diagnosticar problemas técnicos e garantir que seu site atenda a um nível básico de funcionalidade para os usuários.

O que é Largest Contentful Paint?

LCP é uma medida de quanto tempo leva para o conteúdo principal de uma página ser baixado e ficar pronto para interação.

Especificamente, o tempo que leva do início do carregamento da página até a renderização da maior imagem ou bloco de texto dentro da viewport do usuário. Qualquer coisa abaixo da dobra não conta.

Imagens, imagens de pôsteres de vídeo, imagens de fundo e elementos de texto em nível de bloco, como tags de parágrafo, são elementos típicos medidos.

O LCP consiste nas seguintes submétricas:

Otimizar para LCP significa otimizar cada uma dessas métricas, portanto, leva menos de 2,5 segundos para carregar e exibir recursos de LCP.

Aqui está uma escala de limite para sua referência:

Vamos nos aprofundar no que essas submétricas significam e como você pode melhorá-las.

Tempo para o primeiro byte (TTFB)

TTFB é o tempo de resposta do servidor e mede o tempo que leva para o navegador do usuário receber o primeiro byte de dados do seu servidor. Isso inclui o tempo de pesquisa de DNS, o tempo que leva para processar solicitações pelo servidor e redirecionamentos.

Otimizar o TTFB pode reduzir significativamente o tempo geral de carregamento e melhorar o LCP.

O tempo de resposta do servidor depende em grande parte de:

• Consultas de banco de dados.
• Erros de cache do CDN.
• Renderização ineficiente do lado do servidor.
• Hospedagem.

Vamos rever cada um:

1. Consultas de banco de dados

Se o seu tempo de resposta for alto, tente identificar a fonte.

Por exemplo, pode ser devido a consultas mal otimizadas ou um alto volume de consultas que tornam o tempo de resposta do servidor mais lento. Se você tem um banco de dados MySQL, pode registrar consultas lentas para descobrir quais consultas são lentas.

Se você tem um site WordPress, pode usar o plugin Query Monitor para ver quanto tempo as consultas SQL levam.

Outras ótimas ferramentas são Blackfire ou Newrelic, que não dependem do CMS ou stack que você usa, mas exigem instalação em sua hospedagem/servidor.

2. Erros de cache do CDN

Uma perda de cache de CDN ocorre quando um recurso solicitado não é encontrado no cache do CDN, e a solicitação é encaminhada para buscar no servidor de origem. Esse processo leva mais tempo, levando a maior latência e tempos de carregamento mais longos para o usuário final.

Normalmente, seu provedor de CDN tem um relatório sobre quantas falhas de cache você teve.

Se você observar uma alta porcentagem ( >10%) de perdas de cache, pode ser necessário entrar em contato com seu provedor de CDN ou suporte de hospedagem, caso tenha hospedagem gerenciada com cache integrado para resolver o problema.

Um motivo que pode causar perdas de cache é quando há um ataque de spam de pesquisa.

Por exemplo, uma dúzia de domínios de spam vinculam-se às suas páginas de pesquisa interna com consultas aleatórias de spam, como [/?q=甘肃代]que não são armazenados em cache porque o termo de pesquisa é diferente a cada vez. O problema é que o Googlebot os rastreia agressivamente, o que pode causar altos tempos de resposta do servidor e falhas de cache.

Nesse caso, e no geral, é uma boa prática bloquear URLs de pesquisa ou facetas via robots.txt. Mas, depois de bloqueá-los via robots.txt, você pode descobrir que esses URLs estão indexados porque têm backlinks de sites de baixa qualidade.

No entanto, não tenha medo. John Mueller disse que isso seria resolvido com o tempo.

Aqui está um exemplo real do console de pesquisa de alto tempo de resposta do servidor (TTFB) causado por falhas de cache:

3. Renderização ineficiente do lado do servidor

Você pode ter certos componentes em seu site que dependem de APIs de terceiros.

Por exemplo, você viu números de leituras e compartilhamentos nos artigos do SEJ. Nós buscamos esses números de diferentes APIs, mas em vez de buscá-los quando uma solicitação é feita ao servidor, nós os buscamos previamente e os armazenamos em nosso banco de dados para uma exibição mais rápida.

Imagine se conectarmos para compartilhar contagem e APIs GA4 quando uma solicitação for feita ao servidor. Cada solicitação leva cerca de 300-500 ms para ser executada, e adicionaríamos cerca de ~1.000 ms de atraso devido à renderização ineficiente do lado do servidor. Então, certifique-se de que seu backend esteja otimizado.

4. Hospedagem

Esteja ciente de que a hospedagem é altamente importante para um TTFB baixo. Ao escolher a hospedagem certa, você pode reduzir seu TTFB em duas a três vezes.

Escolha hospedagem com CDN e cache integrados ao sistema. Isso ajudará você a evitar comprar um CDN separadamente e economizar tempo na manutenção dele.

Portanto, investir na hospedagem certa valerá a pena.

Leia orientações mais detalhadas:

Agora, vamos analisar outras métricas mencionadas acima que contribuem para o LCP.

Atraso de Carregamento de Recursos

O atraso no carregamento do recurso é o tempo que o navegador leva para localizar e iniciar o download do recurso LCP.

Por exemplo, se você tiver uma imagem de fundo na sua seção de herói que exija o carregamento de arquivos CSS para ser identificada, haverá um atraso igual ao tempo que o navegador precisa para baixar o arquivo CSS para começar a baixar a imagem LCP.

No caso em que o elemento LCP é um bloco de texto, esse tempo é zero.

Ao otimizar a rapidez com que esses recursos são identificados e carregados, você pode melhorar o tempo que leva para exibir conteúdo crítico. Uma maneira de fazer isso é pré-carregar os arquivos CSS e as imagens LCP definindo fetchpriority=”high” para a imagem para que ela comece a baixar o arquivo CSS.

Mas uma abordagem melhor – se você tiver controle suficiente sobre o site – é embutir o CSS crítico necessário para acima da dobra, para que o navegador não gaste tempo baixando o arquivo CSS. Isso economiza largura de banda e pré-carregará apenas a imagem.

Claro, é ainda melhor se você criar páginas da web para evitar imagens de heróis ou controles deslizantes, pois eles geralmente não agregam valor e os usuários tendem a passar por eles, pois distraem.

Outro fator importante que contribui para o atraso no carregamento são os redirecionamentos.

Se você tem backlinks externos com redirecionamentos, não há muito o que fazer. Mas você tem controle sobre seus links internos, então tente encontrar links internos com redirecionamentos, geralmente por causa de barras finais ausentes, versões não WWW ou URLs alteradas, e substitua-os por destinos reais.

Há uma série de ferramentas técnicas de SEO que você pode usar para rastrear seu site e encontrar redirecionamentos a serem substituídos.

Duração da carga do recurso

A duração do carregamento do recurso refere-se ao tempo real gasto no download do recurso LCP.

Mesmo que o navegador encontre e comece a baixar recursos rapidamente, velocidades lentas de download ainda podem afetar o LCP negativamente. Depende do tamanho dos recursos, da velocidade de conexão de rede do servidor e das condições de rede do usuário.

Você pode reduzir a duração da carga de recursos implementando:

• Formato WebP.
• Imagens de tamanho adequado (faça com que o tamanho intrínseco da imagem corresponda ao tamanho visível).
• Priorização de carga.
• CDN.

Atraso de renderização do elemento

O atraso na renderização do elemento é o tempo que o navegador leva para processar e renderizar o elemento LCP.

Essa métrica é influenciada pela complexidade do seu HTML, CSS e JavaScript.

Minimizar recursos de bloqueio de renderização e otimizar seu código pode ajudar a reduzir esse atraso. No entanto, pode acontecer de você ter scripts JavaScript pesados ​​em execução, o que bloqueia o thread principal, e a renderização do elemento LCP é atrasada até que essas tarefas sejam concluídas.

É aqui que os valores baixos da métrica Tempo Total de Bloqueio (TBT) são importantes, pois ela mede o tempo total durante o qual o thread principal é bloqueado por tarefas longas no carregamento da página, indicando a presença de scripts pesados ​​que podem atraso na renderização e capacidade de resposta.

Uma maneira de melhorar não apenas a duração e o atraso do carregamento, mas todas as métricas CWV gerais quando os usuários navegam em seu site é implementar API de regras de especulação para navegações futuras. Ao pré-renderizar páginas conforme os usuários passam o mouse sobre links ou páginas que eles provavelmente navegarão, você pode fazer com que suas páginas carreguem instantaneamente.

Cuidado com essas “pegadinhas” de pontuação

Todos os elementos na tela do usuário (a viewport) são usados ​​para calcular o LCP. Isso significa que imagens renderizadas fora da tela e então deslocadas para o layout, uma vez renderizadas, podem não contar como parte da pontuação Largest Contentful Paint.

Na extremidade oposta, elementos que começam na janela de visualização do usuário e depois são empurrados para fora da tela podem ser contados como parte do cálculo do LCP.

Como medir a pontuação LCP

Existem dois tipos de ferramentas de pontuação. O primeiro é chamado Ferramentas de campoe o segundo é chamado Ferramentas de laboratório.

Ferramentas de campo são medições reais de um local.

Ferramentas de laboratório fornecem uma pontuação virtual com base em um rastreamento simulado usando algoritmos que se aproximam das condições da Internet que um usuário típico de telefone celular pode encontrar.

Aqui está uma maneira de encontrar recursos LCP e medir o tempo para exibi-los via Ferramentas de desenvolvimento > Desempenho relatório:

Você pode ler mais em nosso guia detalhado sobre como medir métricas de CWV, onde você pode aprender como solucionar problemas não apenas de LCP, mas de outras métricas completamente.

A otimização do LCP é um assunto muito mais aprofundado

Melhorar o LCP é um passo crucial para melhorar o CVW, mas pode ser a métrica de CWV mais desafiadora de otimizar.

O LCP consiste em várias camadas de submétricas, cada uma exigindo uma compreensão completa para uma otimização eficaz.

Este guia deu a você uma ideia básica de como melhorar o LCP, e os insights que você obteve até agora ajudarão você a fazer melhorias significativas.

Mas ainda há mais a aprender. Otimizar cada submétrica é uma ciência cheia de nuances. Fique ligado, pois publicaremos guias detalhados dedicados à otimização de cada submétrica.

Mais recursos:

---

Crédito da imagem em destaque: BestForBest/Shutterstock