Entender o LCP subparts é crucial para otimizar a velocidade de carregamento de um site, impactando diretamente a experiência do usuário e o ranqueamento no Google. Essa métrica do Core Web Vitals avalia quanto tempo leva para o maior elemento de conteúdo se tornar visível após a abertura da página. Recentemente, o Google introduziu LCP subparts, detalhando as causas dos atrasos no carregamento, dados que agora integram o Chrome UX Report.
O que são LCP Subparts?
As LCP subparts dividem a métrica Largest Contentful Paint em quatro componentes distintos, cada um refletindo uma fase do processo de carregamento da página. Essa divisão permite identificar gargalos específicos que afetam a velocidade com que o conteúdo principal se torna visível para o usuário.
- Tempo para o Primeiro Byte (TTFB): Mede a rapidez com que o servidor responde à solicitação do documento.
- Atraso no Carregamento do Recurso: Tempo decorrido até o início do download da imagem LCP.
- Tempo de Carregamento do Recurso: Tempo necessário para baixar a imagem LCP.
- Atraso na Renderização do Elemento: Tempo até que o elemento LCP seja exibido.
É importante notar que os tempos de carregamento do recurso se aplicam apenas se o maior elemento da página for uma imagem ou imagem de fundo. Para elementos de texto, os componentes de Atraso no Carregamento e Tempo de Carregamento são sempre zero.
Como Medir as LCP Subparts
Uma maneira de avaliar a contribuição de cada componente para a pontuação LCP do seu site é utilizar ferramentas de teste de velocidade de sites. Ao analisar os resultados, é possível identificar quais subpartes estão impactando mais negativamente o desempenho e, assim, direcionar os esforços de otimização de forma mais eficaz.
Ao expandir a métrica Largest Contentful Paint, você pode visualizar as subparts e outros detalhes relacionados à sua pontuação LCP. Isso oferece uma visão clara de onde os atrasos estão ocorrendo e quais áreas precisam de atenção.
Por exemplo, se o TTFB e a Duração do Carregamento da Imagem juntos representam uma grande parte da pontuação geral do LCP, isso indica que otimizar esses dois componentes pode trazer os maiores benefícios em termos de melhoria de desempenho.
Analisando as Etapas de Carregamento
Para entender o que acontece em cada uma dessas etapas, um waterfall de requisição de rede pode ser muito útil. Essa visualização mostra a ordem em que os recursos são carregados e quanto tempo cada um leva para ser baixado.
A visualização de Descoberta de Imagem LCP filtra o waterfall para mostrar apenas os recursos relevantes para exibir a imagem Largest Contentful Paint. Em alguns casos, cada uma das três primeiras etapas pode conter uma única solicitação, e a etapa final é concluída rapidamente, sem o carregamento de novos recursos.
No entanto, essa situação pode variar dependendo do seu site específico. Ao analisar o waterfall, é possível identificar gargalos e áreas onde a otimização pode ser mais eficaz.
O Tempo para o Primeiro Byte (TTFB)
A primeira etapa para exibir o maior elemento da página é buscar o HTML do documento. O TTFB, que mede a rapidez dessa busca, é crucial para um carregamento rápido. Melhorar o TTFB pode envolver otimizar a geração do HTML no servidor ou implementar o cache para evitar a geração repetida do mesmo conteúdo.
Em muitos casos, a maior parte do tempo é gasto esperando que o servidor gere o HTML da página. Portanto, para melhorar o TTFB, é necessário acelerar esse processo ou armazenar o HTML em cache, para que a geração seja completamente ignorada.
Para saber mais sobre o assunto, veja como a IA está transformando tudo e como o uso de novas tecnologias podem otimizar seu site.
Atraso no Carregamento do Recurso
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 carregá-la sem demora. O que, infelizmente, nem sempre acontece.
Um atraso no carregamento pode ocorrer quando a página usa bibliotecas JavaScript de carregamento lento, como lazysize.js, que só carregam a imagem LCP após detectarem que ela aparecerá na área visível. Esse atraso é causado tanto pelo tempo necessário para baixar a biblioteca JavaScript quanto pelo tempo que o navegador leva para completar o layout da página.
Nesse cenário, o navegador precisa completar o layout da página e começar a renderizar o conteúdo antes que a biblioteca detecte que a imagem está na área visível. Somente após finalizar a solicitação, uma tarefa da CPU (em laranja) leva ao marco do First Contentful Paint, quando a página começa a ser renderizada e a biblioteca aciona a requisição da imagem LCP.
Otimizando o Carregamento de Recursos
Para otimizar o carregamento de recursos, considere usar o atributo nativo loading="lazy", que permite o carregamento lento de imagens sem depender de código JavaScript. Além disso, a imagem LCP não deve ser carregada lentamente, permitindo que o navegador comece a carregá-la assim que o código HTML estiver pronto.
Segundo o Google, o ideal é eliminar completamente o atraso no carregamento do recurso. Isso garante que a imagem LCP seja carregada o mais rápido possível, melhorando a experiência do usuário e o desempenho do site.
Duração do Carregamento do Recurso
A subparte “Duração do Carregamento do Recurso” é direta: a imagem LCP precisa ser baixada antes de ser exibida. Portanto, otimizar essa etapa é crucial para reduzir o tempo total de carregamento da página. Aqui estão algumas técnicas que podem ser utilizadas:
- Utilize um formato de imagem moderno que ofereça melhor compressão, como WebP ou AVIF.
- Carregue as imagens em um tamanho que corresponda ao tamanho em que são exibidas.
- Despriorize outros recursos que possam competir com a imagem LCP.
Essas técnicas ajudam a garantir que a imagem LCP seja carregada de forma rápida e eficiente, melhorando a experiência do usuário.
Atraso na Renderização do Elemento
O quarto e último componente do LCP, o “Atraso na Renderização”, pode ser o mais confuso. Ele ocorre quando o recurso já foi carregado, mas o navegador ainda não está pronto para mostrá-lo ao usuário. Uma razão comum para esse atraso é quando o elemento LCP não é uma imagem.
Nesse caso, o atraso é causado por scripts e folhas de estilo que bloqueiam a renderização. O texto só pode aparecer depois que esses recursos são carregados e o navegador completa o processo de renderização. Outra causa pode ser o pré-carregamento da imagem LCP.
Pré-carregar a imagem é uma boa prática, pois elimina praticamente qualquer atraso no carregamento e garante que a imagem seja carregada cedo. No entanto, se a imagem terminar de ser baixada antes que a página esteja pronta para renderizar, você verá um aumento no atraso de renderização na página.
LCP Subparts em Dados Reais do CrUX
Analisar as LCP 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 está acontecendo para usuários reais. Por isso, o Google começou a incluir dados de subpartes no relatório de dados CrUX.
Esses dados não estão (ainda) incluídos no PageSpeed Insights, mas podem ser visualizados na aba “Web Vitals“. Uma informação muito útil é o tipo de recurso LCP, que mostra quantos visitantes viram o elemento LCP como um elemento de texto ou uma imagem.
Mesmo para a mesma página, diferentes visitantes verão conteúdos ligeiramente diferentes. Por exemplo, elementos diferentes são visíveis com base no tamanho do dispositivo, ou alguns visitantes verão um banner de cookies, enquanto outros verão o conteúdo real da página.
Para facilitar a interpretação dos dados, o Google reporta apenas dados de subpartes para imagens. Se o elemento LCP for geralmente texto na página, as informações de subpartes não serão muito úteis, pois não se aplicarão à maioria dos seus visitantes.
Monitorando Subparts em Seu Site com Monitoramento de Usuário Real
Os dados de laboratório nem sempre correspondem ao que os usuários reais experimentam. Os dados 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 ter sido implementada. Por isso, uma ferramenta de monitoramento de usuário real é útil ao corrigir suas pontuações de LCP.
Com essa ferramenta, é possível rastrear pontuações em todas as páginas do seu website ao longo do tempo e obter painéis dedicados para cada LCP subparts. Além disso, você 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 subpartes do LCP.
Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.