A velocidade com que um site carrega é crucial para a experiência do usuário e para o ranqueamento no Google. Uma métrica importante para medir essa velocidade é o Largest Contentful Paint (LCP). Mas, quando o LCP está lento, como identificar o problema? O Google lançou as LCP subparts, que detalham as causas dos atrasos no carregamento, permitindo otimizar Largest Contentful Paint de forma mais eficaz.
O que são LCP Subparts?
As LCP subparts dividem a métrica Largest Contentful Paint em quatro componentes principais, permitindo identificar gargalos e otimizar Largest Contentful Paint:
- Time to First Byte (TTFB): Tempo de resposta do servidor à solicitação do documento.
- Resource Load Delay: Tempo gasto antes do início do download da imagem LCP.
- Resource Load Time: Tempo gasto no download da imagem LCP.
- Element Render Delay: Tempo até que o elemento LCP seja exibido.
É importante notar que os tempos de carregamento de recursos se aplicam apenas se o maior elemento da página for uma imagem ou imagem de fundo. Para elementos de texto, os componentes de Load Delay e Load Time são sempre zero.
Para otimizar Largest Contentful Paint, é fundamental entender como cada um desses componentes impacta o tempo total de carregamento.
O Largest Contentful Paint (LCP) é uma métrica do Core Web Vitals que avalia a rapidez com que um site carrega do ponto de vista do usuário. Ele mede quanto tempo leva para o maior elemento de conteúdo ficar visível após a abertura da página. Um site lento prejudica a experiência do usuário e pode diminuir seu posicionamento no Google.
Como Medir as LCP Subparts
Uma forma de verificar a contribuição de cada componente para a pontuação do LCP do seu site é usar um teste de velocidade de sites. Ao expandir a métrica Largest Contentful Paint, você pode ver as subparts e outros detalhes relacionados à sua pontuação LCP.
Por exemplo, podemos observar que o TTFB e a duração do carregamento da imagem juntos representam 78% da pontuação geral do LCP. Isso indica que esses dois componentes são os pontos de partida mais impactantes para otimizar.
Para entender o que acontece em cada estágio, uma análise waterfall de requisição de rede pode ajudar a visualizar quais recursos estão sendo carregados em cada fase.
A visualização LCP Image Discovery filtra a visualização waterfall para mostrar apenas os recursos relevantes para exibir a imagem do Largest Contentful Paint. Cada um dos três primeiros estágios contém uma requisição, e o estágio final termina rapidamente, sem carregar novos recursos. No entanto, isso depende do seu site específico.
Detalhes de Cada Subparte do LCP
Time To First Byte (TTFB)
O primeiro passo para exibir o maior elemento da página é buscar o HTML do documento. O tempo gasto nessa etapa é medido pelo Time To First Byte (TTFB).
Em um exemplo, percebe-se que criar a conexão com o servidor não demora muito. A maior parte do tempo é gasta esperando o servidor gerar o HTML da página. Para melhorar o TTFB, é preciso acelerar esse processo ou armazenar o HTML em cache para evitar a geração completa.
Resource Load Delay
O recurso que queremos carregar é a imagem LCP. Idealmente, teríamos uma tag <img> perto do topo do HTML, para que o navegador a encontre rapidamente e comece a carregar.
No entanto, às vezes há um Load Delay. Em vez de carregar a imagem diretamente, a página usa um lazy loading, que só carrega a imagem LCP quando detecta que ela aparecerá na tela.
Parte do Load Delay é causado pelo download da biblioteca JavaScript. O navegador também precisa completar o layout da página e começar a renderizar o conteúdo antes que a biblioteca saiba que a imagem está na tela. Após finalizar a requisição, há uma tarefa da CPU que leva ao First Contentful Paint, quando a página começa a ser renderizada. Só então a biblioteca aciona a requisição da imagem LCP.
Como otimizar isso? Em vez de usar uma biblioteca de lazy loading, você pode usar o atributo nativo loading="lazy" na tag <img>. Assim, o carregamento das imagens não depende do carregamento do código JavaScript.
Mais especificamente, a imagem LCP não deve ser carregada com lazy loading. O navegador pode começar a carregá-la assim que o código HTML estiver pronto. De acordo com o Google, o ideal é eliminar completamente o resource load delay.
Resources Load Duration
A Load Duration subpart é direta: é preciso baixar a imagem LCP antes de exibi-la! Para otimizar Largest Contentful Paint, é importante garantir que esse processo seja o mais rápido possível.
Em um exemplo, a imagem é carregada do mesmo domínio do HTML, o que é bom, pois o navegador não precisa se conectar a um novo servidor.
Outras técnicas que podem ser utilizadas para reduzir o load delay:
- Usar um formato de imagem moderno que ofereça melhor compressão.
- Carregar imagens em um tamanho que corresponda ao tamanho em que são exibidas.
- Despriorizar outros recursos que possam competir com a imagem LCP.
Element Render Delay
O quarto e último componente do LCP, o Render Delay, costuma ser o mais confuso. O recurso foi carregado, mas, por algum motivo, o navegador ainda não está pronto para mostrá-lo ao usuário!
Felizmente, no exemplo que estamos analisando, a imagem LCP aparece rapidamente após ser carregada. Uma razão comum para o render delay é que o elemento LCP não é uma imagem. Nesse caso, o atraso é causado por scripts e stylesheets que bloqueiam a renderização. O texto só pode aparecer após o carregamento desses elementos e a conclusão do processo de renderização pelo navegador.
Outro motivo para o render delay é quando o website faz o preload da imagem LCP. O preload é uma boa prática, pois elimina praticamente qualquer load delay e garante que a imagem seja carregada mais cedo.
No entanto, se a imagem terminar de ser baixada antes que a página esteja pronta para renderizar, haverá um aumento no render delay. Isso não é necessariamente ruim! Você melhorou a velocidade geral do seu website, mas, ao otimizar a imagem, descobriu um novo gargalo para focar.
LCP Subparts em Dados CrUX de Usuários Reais
Analisar as Largest Contentful Paint subparts em testes de laboratório pode fornecer muitos insights sobre onde otimizar. No entanto, muitas vezes o LCP no laboratório não corresponde ao que acontece com usuários reais!
Por isso, o Google começou a incluir dados de subpart no relatório de dados do CrUX. Ainda não está incluído no PageSpeed Insights, mas você pode ver essas métricas na aba Web Vitals.
Uma informação super útil aqui é o tipo de recurso LCP: ele informa quantos visitantes viram o elemento LCP como um elemento de texto ou uma imagem.
Mesmo na mesma página, diferentes visitantes verão conteúdos ligeiramente diferentes. Por exemplo, diferentes elementos são visíveis com base no tamanho do dispositivo, ou alguns visitantes verão um cookie banner enquanto outros verão o conteúdo real da página.
Para facilitar a interpretação dos dados, o Google só reporta dados de subpart para imagens.
Se o elemento LCP for geralmente texto na página, as informações de subparts não serão muito úteis, pois não se aplicarão à maioria dos seus visitantes.
No entanto, detalhar o LCP de texto é relativamente fácil: tudo o que não faz parte da pontuação TTFB tem render delay.
Monitore as Subparts no Seu Website com Monitoramento de Usuário Real
Dados de laboratório nem sempre correspondem ao que usuários reais experimentam. Os dados do CrUX são superficiais, reportados apenas para páginas de alto tráfego, e levam pelo menos 4 semanas para atualizar completamente após uma mudança.
É por isso que uma ferramenta de monitoramento de usuário real como o DebugBear é útil ao corrigir suas pontuações LCP. Você pode rastrear pontuações em todas as páginas do seu website ao longo do tempo e obter dashboards dedicados para cada LCP subpart.
Você também pode revisar experiências específicas de visitantes, ver qual era a imagem LCP para eles, inspecionar um waterfall de requisição e verificar os tempos de LCP subpart.
Ter dados de métricas mais detalhados disponíveis para o Largest Contentful Paint oferece aos desenvolvedores web uma grande vantagem ao tornar seu website mais rápido. Uma das melhores maneiras de aprender é com Gemini Gems para trabalho e lazer.
Incluir subparts no CrUX fornece novos insights sobre como os visitantes reais experimentam seu website e pode dizer se as otimizações que você está considerando seriam realmente impactantes. Além disso, para complementar as informações, você pode conferir três filmes de ficção científica no Amazon Prime para assistir em março de 2025.
Este conteúdo foi auxiliado por Inteligência Artificial, mas escrito e revisado por um humano.