Entender como seu site carrega é crucial para manter os visitantes engajados e satisfeitos. Uma métrica essencial nesse processo é o Largest Contentful Paint (LCP), que mede a velocidade com que o maior elemento de conteúdo se torna visível na tela. Se o seu site está demorando para carregar, isso pode prejudicar a experiência do usuário e até mesmo afetar seu posicionamento no Google. Recentemente, o Google introduziu as chamadas LCP subparts, que ajudam a identificar onde ocorrem os atrasos no carregamento da página, permitindo que você otimize seu site de forma mais eficaz.
O que são LCP Subparts?
As LCP subparts dividem a métrica Largest Contentful Paint em quatro componentes distintos, cada um representando uma fase do processo de carregamento. Essa segmentação oferece uma visão detalhada de onde os gargalos podem estar ocorrendo, facilitando a identificação de áreas que precisam de atenção para melhorar o desempenho do site.
- Tempo para o Primeiro Byte (TTFB): Mede a rapidez com que o servidor responde à solicitação do documento.
- Atraso no Carregamento do Recurso: Tempo gasto antes do 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 decorrido antes da exibição do elemento LCP.
É importante notar que os tempos de carregamento de recursos se aplicam principalmente se o maior elemento da página for uma imagem ou imagem de fundo. No caso de elementos de texto, os componentes de Atraso no Carregamento e Tempo de Carregamento são geralmente zero.
Como Medir as LCP Subparts
Uma forma de avaliar a contribuição de cada componente para a pontuação LCP do seu site é usar ferramentas de teste de velocidade de sites. Ao analisar os resultados, você pode identificar quais subpartes estão impactando mais o LCP e, assim, priorizar seus esforços de otimização. Veja os aplicativos Android que podem auxiliar nessa tarefa.
Por exemplo, se o TTFB e a Duração do Carregamento da Imagem representam a maior parte da pontuação LCP, concentrar-se em otimizar esses dois componentes pode trazer os maiores benefícios.
Para entender melhor o que acontece em cada etapa, um waterfall de requisição de rede pode ser útil. A visualização de Descoberta de Imagem LCP filtra o waterfall para mostrar apenas os recursos relevantes para exibir a imagem Largest Contentful Paint. A análise do waterfall pode revelar gargalos e dependências que afetam o tempo de carregamento.
Analisando as LCP Subparts em Detalhe
Cada uma das quatro LCP subparts oferece insights valiosos sobre o desempenho do seu site. Vamos explorar cada uma delas em detalhes, fornecendo dicas sobre como identificar e resolver problemas em cada fase do processo de carregamento.
Tempo Para o Primeiro Byte (TTFB)
O primeiro passo para exibir o maior elemento da página é obter o HTML do documento. O TTFB mede a rapidez com que o servidor responde a essa solicitação. Um TTFB alto pode indicar problemas com a velocidade do servidor, a lógica do aplicativo ou a infraestrutura de rede.
Em muitos casos, a maior parte do tempo é gasto aguardando o servidor gerar o HTML da página. Para melhorar o TTFB, você pode acelerar esse processo ou armazenar o HTML em cache para evitar a geração repetida da página.
Atraso no Carregamento do Recurso
O recurso que queremos carregar é a imagem LCP. O ideal é ter uma tag <img> perto do topo do HTML, para que o navegador encontre a imagem rapidamente e comece a carregá-la imediatamente. No entanto, em alguns casos, pode haver um Atraso no Carregamento, como quando a página usa uma biblioteca de lazy loading que só carrega a imagem LCP quando ela está prestes a aparecer na tela.
Parte do Atraso no Carregamento é causado pelo tempo necessário para baixar a biblioteca JavaScript. Além disso, o navegador precisa concluir o layout da página e começar a renderizar o conteúdo antes que a biblioteca possa determinar se a imagem está no viewport. Após a conclusão da solicitação, uma tarefa da CPU leva ao marco do First Contentful Paint, quando a página começa a ser renderizada. Somente então a biblioteca aciona a solicitação da imagem LCP.
Para otimizar essa etapa, você pode usar o atributo nativo loading="lazy" da tag <img>, que permite o lazy loading sem depender do JavaScript. No entanto, a imagem LCP idealmente não deve ser carregada preguiçosamente. O navegador deve começar a carregá-la assim que o código HTML estiver pronto. O objetivo é eliminar completamente o atraso no carregamento do recurso.
Otimizar Largest Contentful Paint com a Duração do Carregamento do Recurso
A Duração do Carregamento do Recurso é bastante simples: você precisa baixar a imagem LCP antes de poder exibi-la! Quanto mais rápido a imagem for baixada, melhor será a experiência do usuário. Para acelerar esse processo, você pode usar técnicas como compressão de imagem e Content Delivery Networks (CDNs).
Se a imagem for carregada do mesmo domínio do HTML, isso é positivo, pois o navegador não precisa se conectar a um novo servidor. No entanto, mesmo nesse caso, ainda há otimizações que podem ser feitas. Outras técnicas que você pode usar 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.
- Priorizar outros recursos que possam competir com a imagem LCP.
Atraso na Renderização do Elemento
O quarto e último componente do LCP, o Atraso na Renderização, geralmente é o mais confuso. O recurso foi carregado, mas, por alguma razão, o navegador ainda não está pronto para mostrá-lo ao usuário! Isso pode acontecer por vários motivos, como scripts de bloqueio de renderização e folhas de estilo.
Uma causa comum de atraso na renderização é 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 conclui o processo de renderização.
Outro motivo para o atraso na renderização é quando o site pré-carrega a imagem LCP. O pré-carregamento é uma boa prática, pois praticamente elimina 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 ser renderizada, você verá um aumento no atraso na renderização da página. Isso indica que, após otimizar a imagem, você descobriu um novo gargalo para focar.
LCP Subparts em Dados CrUX de Usuários Reais
Analisar as Largest Contentful Paint subparts em testes baseados em laboratório pode fornecer muitos insights sobre onde otimizar. No entanto, com muita frequência, o LCP no laboratório não corresponde ao que está acontecendo para usuários reais! Isso ocorre porque os testes de laboratório não levam em conta as condições de rede do mundo real, o hardware do dispositivo e outros fatores que podem afetar o desempenho do site.
Por isso, o Google começou a incluir dados de subpartes no relatório de dados CrUX. Embora ainda não esteja incluído no PageSpeed Insights, você pode ver essas métricas na aba “Web Vitals”. Uma informação super útil aqui é o tipo de recurso LCP: ele 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údo ligeiramente diferente. Por exemplo, elementos diferentes são visíveis com base no tamanho do dispositivo, ou alguns visitantes verão um banner de cookie enquanto outros veem o conteúdo real da página.
Para facilitar a interpretação dos dados, o Google só relata 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. Mas quebrar o LCP de texto é relativamente fácil: tudo o que não faz parte da pontuação TTFB tem renderização atrasada.
Rastrear Subparts no 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, relatados apenas para páginas de alto tráfego e levam pelo menos 4 semanas para serem totalmente atualizados após a implementação de uma alteração. É por isso que uma ferramenta de monitoramento de usuário real como o DebugBear é útil ao corrigir suas pontuações LCP.
Com o monitoramento de usuário real, você pode rastrear pontuações em todas as páginas do seu site ao longo do tempo e obter painéis 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 solicitação e verificar os tempos de LCP subpart.
Ter dados de métricas mais granulares disponíveis para o Largest Contentful Paint oferece aos desenvolvedores web uma grande vantagem ao tornar seu site mais rápido. A inclusão de subpartes no CrUX fornece novas insights sobre como os visitantes reais experimentam seu site e pode dizer se as otimizações que você está considerando seriam realmente impactantes. Aproveite também e veja algumas dicas de como maximizar a duração da bateria do seu Android.
Este conteúdo foi auxiliado por Inteligência Artificial, mas escrito e revisado por um humano.