O LCP em Core Web Vitals (Largest Contentful Paint) é uma métrica crucial para entender a velocidade de carregamento de um site sob a perspectiva do usuário. Ele mede quanto tempo leva para o maior elemento de conteúdo se tornar visível após a abertura da página. Um carregamento lento prejudica a experiência do usuário e pode impactar negativamente o ranqueamento no Google. Recentemente, o Google introduziu as LCP subparts, que detalham as causas dos atrasos no carregamento, e adicionou esses dados ao Chrome UX Report.
Vamos explorar o que são as LCP subparts, como elas afetam a velocidade do seu site e como você pode medi-las para otimizar o desempenho.
As Quatro LCP Subparts
As LCP subparts dividem a métrica LCP em Core Web Vitals em quatro componentes distintos, permitindo identificar gargalos e direcionar esforços de otimização de forma mais eficaz.
- Tempo para o Primeiro Byte (TTFB): A rapidez com que o servidor responde à solicitação do documento.
- Atraso no Carregamento do Recurso: O tempo gasto antes do início do download da imagem LCP.
- Tempo de Carregamento do Recurso: O tempo necessário para baixar a imagem LCP.
- Atraso na Renderização do Elemento: O tempo decorrido antes que o elemento LCP seja exibido.
É importante notar que os tempos de carregamento de recursos se aplicam principalmente quando o maior elemento da página é 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 das formas de medir a contribuição de cada componente para a pontuação LCP do seu site é utilizando o teste de velocidade de sites da DebugBear. Ao expandir a métrica LCP em Core Web Vitals, você poderá visualizar as subparts e outros detalhes relevantes para sua pontuação LCP.
Nesse teste, é possível verificar que o TTFB e a Duração do Carregamento da imagem representam 78% da pontuação geral do LCP. Isso indica que otimizar esses dois componentes pode trazer os maiores benefícios.
Para entender o que acontece em cada etapa, uma análise waterfall da requisição de rede pode ajudar a visualizar quais recursos estão sendo carregados em cada fase.
A visualização de Descoberta de Imagem LCP filtra o waterfall para mostrar apenas os recursos relevantes para exibir a imagem LCP em Core Web Vitals. Em alguns casos, cada uma das três primeiras etapas contém uma solicitação, e a etapa final é concluída rapidamente, sem carregar novos recursos. No entanto, isso pode variar dependendo do seu site.
Tempo Para o Primeiro Byte (TTFB)
O primeiro passo para exibir o maior elemento da página é obter o HTML do documento. Melhorar o TTFB envolve otimizar a rapidez com que o servidor responde à solicitação inicial.
Em alguns exemplos, a criação da conexão com o servidor não leva muito tempo. A maior parte do tempo é gasto esperando que o servidor gere 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.
Atraso no Carregamento do Recurso
O recurso que queremos carregar aqui é 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.
No entanto, pode ocorrer um Atraso no Carregamento, como quando a página usa lazysize.js, uma biblioteca de lazy loading de imagens que só carrega a imagem LCP em Core Web Vitals quando detecta que ela aparecerá na tela.
Parte do Atraso no Carregamento é 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á visível. Após a conclusão da solicitação, há uma tarefa da CPU que leva ao marco do First Contentful Paint, quando a página começa a ser renderizada. Só então a biblioteca dispara a solicitação da imagem LCP.
Para otimizar, você pode usar o atributo nativo loading="lazy" na tag <img>. Dessa forma, o carregamento das imagens não dependerá do carregamento do código JavaScript.
Mais especificamente, a imagem LCP em Core Web Vitals não deve ser carregada tardiamente. O navegador deve começar a carregá-la assim que o código HTML estiver pronto. O ideal é eliminar completamente o atraso no carregamento do recurso.
Para saber mais sobre como otimizar o carregamento de imagens, você pode conferir este artigo sobre como reativar o uBlock no Chrome após a desativação pelo Google, já que um bloqueador de anúncios pode impactar o carregamento de recursos.
Duração do Carregamento do Recurso
A Load Duration subpart é bem direta: você precisa baixar a imagem LCP antes de exibi-la!
Se a imagem for carregada do mesmo domínio do HTML, isso é bom, pois o navegador não precisa se conectar a um novo servidor.
Outras técnicas para reduzir o atraso no carregamento incluem:
- 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 em Core Web Vitals.
Atraso na Renderização do Elemento
O quarto e último componente LCP, o Atraso na Renderização, pode 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, em muitos casos, a imagem LCP aparece rapidamente após o carregamento. Uma razão comum para o atraso na renderização é 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 depois que esses elementos forem carregados e o navegador concluir o processo de renderização.
Outra razão para o atraso na renderização é quando o site carrega a imagem LCP em Core Web Vitals previamente. Isso é 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 na renderização. Isso não é necessariamente ruim! Você melhorou a velocidade geral do seu site, mas, ao otimizar sua imagem, descobriu um novo gargalo para focar.
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, o LCP no laboratório nem sempre 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. Esses dados ainda não estão no PageSpeed Insights, mas podem ser visualizados na aba “Web Vitals” de ferramentas como a DebugBear.
Uma informação útil aqui é o tipo de recurso LCP: ele mostra quantos visitantes viram o elemento LCP em Core Web Vitals como um elemento de texto ou uma imagem.
Mesmo na mesma página, visitantes diferentes 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 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 atraso na renderização.
Para saber mais sobre como a inteligência artificial está transformando a análise de dados, confira este artigo sobre como a EY apresenta tecnologia de análise de contratos com IA da Nvidia na Mobile World Congress.
Monitore as Subparts no Seu Site com Monitoramento de Usuário Real
Dados de laboratório nem sempre correspondem ao que 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 após uma mudança.
Por isso, uma ferramenta de monitoramento de usuário real como DebugBear é útil para corrigir suas pontuações LCP. Você pode rastrear pontuações em todas as páginas do seu site 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 em Core Web Vitals para eles, inspecionar um waterfall de requisição e verificar os tempos das LCP subpart.
Ter dados mais detalhados disponíveis para o Largest Contentful Paint oferece aos desenvolvedores web uma grande vantagem para tornar seus sites mais rápidos.
A inclusão de subparts no CrUX fornece uma nova visão de como os visitantes reais experimentam seu site e pode indicar se as otimizações que você está considerando seriam realmente impactantes.
Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.