Sobre o Largest Contentful Paint
O que é o Largest Contentful Paint?
O Largest Contentful Paint mede o tempo que o maior elemento visível demora a concluir o carregamento — normalmente, uma imagem principal, uma imagem de pré-visualização de vídeo ou um bloco de texto de título. É o valor único que mais se aproxima de responder à pergunta «quando é que a página apareceu?».
Ignora deliberadamente tudo o que está abaixo da dobra e tudo o que é invisível. Uma página pode continuar a carregar scripts e tipos de letra muito depois do seu LCP e, no que diz respeito a esta medição, isso não é um problema, porque o visitante já tem algo para ler.
É isso que o distingue do tempo total de carregamento. O tempo de carregamento descreve o momento em que o navegador termina o seu trabalho; o LCP descreve o momento em que a página se tornou útil, ou seja, o momento que o visitante realmente experiencia.
O que é considerado um bom LCP?
O Google considera 2,5 segundos ou menos como bom, entre 2,5 e 4 segundos como necessitando de melhorias, e qualquer valor superior a 4 segundos como fraco. O limiar aplica-se ao percentil 75 dos carregamentos reais de páginas, pelo que tem de ser atingido por três em cada quatro visitantes, e não apenas em média.
Esse percentil é mais importante do que parece à primeira vista. Uma média pode ser facilmente compensada por visitas rápidas em ligações rápidas, enquanto o percentil 75 mantém em foco o quarto mais lento do seu público, que normalmente corresponde aos utilizadores móveis.
Assim, uma página pode falhar no LCP e, ainda assim, parecer perfeitamente rápida na máquina em que foi criada. Essa discrepância é mais habitual do que excecional.
O que costuma causar um LCP lento
Raramente o próprio elemento é o problema. O que o atrasa é quase sempre algo que acontece antes dele, e há quatro culpados habituais:
- Uma resposta lenta do servidor, que atrasa tudo o que vem a seguir antes de ser apresentado qualquer byte.
- CSS e JavaScript bloqueadores da renderização no cabeçalho, que o navegador tem de concluir antes de apresentar o conteúdo.
- A imagem principal ser grande, não otimizada ou carregada de forma diferida quando não deveria.
- A imagem ser detetada tardiamente, por ser definida através de CSS ou inserida por um script, em vez de estar presente no HTML.
Essa última é a que mais frequentemente apanha as pessoas desprevenidas. Um navegador só pode começar a obter aquilo que consegue ver na marcação, pelo que uma imagem que nunca é mencionada no HTML não pode começar a carregar até que a folha de estilos ou o script que a menciona tenha sido obtido e analisado.
Como melhorar
- Coloque a imagem principal no HTML como um elemento img, para que o navegador a encontre imediatamente.
- Nunca aplique carregamento lento ao elemento LCP — o carregamento lento destina-se ao conteúdo que está abaixo da dobra.
- Disponibilize-a num formato moderno e no tamanho em que é efetivamente apresentada.
- Pré-carregue-a se for genuinamente o elemento mais importante da página.
- Remova o CSS e o JavaScript não críticos do caminho de renderização.
- Reduza o tempo de resposta do servidor, uma vez que cada milissegundo é gasto antes de qualquer outra coisa começar.
O que esta ferramenta verifica
O teste de LCP consulta os dados de campo da Google relativos à página — medições recolhidas de visitantes reais no Chrome — e mostra em que posição se encontra face aos limiares acima.
Se não for apresentado nenhum resultado, a página não tem tráfego suficiente para que a Google apresente dados, algo comum em páginas novas ou pouco visitadas. Isso não significa que exista uma falha, e a resposta sensata é corrigir as causas óbvias em vez de esperar que seja apresentada uma pontuação.
Próximos passos