Como Corrigir um LCP Lento por Imagem

Corrija uma imagem de Largest Contentful Paint (LCP) lenta em 4 etapas: redimensione-a para o tamanho de exibição, converta-a para WebP ou AVIF, faça o preload dela e defina o fetchpriority como high. As primeiras 2 etapas proporcionam a maior parte da melhoria e não exigem nenhuma alteração na marcação da sua página.

Na maioria das páginas, o maior elemento de renderização de conteúdo é uma única imagem de destaque, o que significa que o LCP é, na verdade, uma questão sobre um arquivo em vez de sobre todo o seu site. Corrigir esse único arquivo geralmente altera a métrica mais do que qualquer outra otimização disponível.

O que o LCP mede

O LCP registra quanto tempo o maior elemento visível leva para renderizar, medido a partir do momento em que a página começa a carregar. O Google considera 2.5 segundos ou menos como bom, de 2.5 a 4 segundos como precisando de melhorias e mais de 4 segundos como ruim.

O elemento medido costuma ser uma imagem, ocasionalmente um bloco de texto de título, e é sempre algo visível sem rolar a página. O elemento pode mudar entre dispositivos, já que uma imagem de destaque que domina o layout de desktop pode ficar abaixo da dobra em um celular.

Encontrando o elemento responsável

Execute o Lighthouse e leia a entrada do elemento Largest Contentful Paint, que indica o elemento exato que está sendo medido. Tentar adivinhar faz perder tempo, porque o elemento frequentemente não é aquele que as pessoas supõem.

Verifique tanto no celular quanto no desktop, pois os layouts diferem e a resposta também. Os dados de campo de visitantes reais são mais confiáveis do que uma única execução em laboratório, porque as condições de rede variam muito mais no mundo real do que em um teste. Onde os 2 discordarem, confie nos dados de campo e use a execução de laboratório para diagnóstico.

Corrija a imagem em ordem de impacto

Para melhorar o LCP em uma imagem, siga estas 6 etapas em ordem.

1. Redimensione a imagem para o maior tamanho em que ela será exibida, duplicado para telas de alta densidade.
2. Converta-a para WebP, ou para AVIF se a imagem for grande e fotográfica.
3. Comprima para uma meta abaixo de 200 KB para uma imagem de destaque, o que é alcançável em largura total na maioria dos designs.
4. Adicione atributos de width e height para que o navegador reserve o espaço e não ocorra desvio de layout.
5. Faça o preload da imagem no cabeçalho da página para que o navegador comece a buscá-la imediatamente.
6. Defina fetchpriority como high no elemento da imagem, o que informa ao navegador que este arquivo é o mais importante.

As etapas 1 e 2 geralmente proporcionam a maior parte da melhoria, e são as 2 que não exigem tocar na marcação da página.

Por que redimensionar supera comprimir

As dimensões controlam a maior parte do tamanho de um arquivo, portanto, redimensionar remove mais peso do que qualquer configuração de qualidade. Uma fotografia de 4000 pixels exibida em 1200 pixels carrega 11 vezes mais dados de pixels do que a página pode mostrar.

A terceira linha mostra por que o redimensionamento vem primeiro. Redimensionar sozinho superou apenas comprimir, e a combinação superou ambos. Os números variam de acordo com a imagem e a conexão, enquanto a ordem se mantém consistente.

Preload e fetchpriority

O preloading instrui o navegador a buscar a imagem de destaque antes de terminar de analisar a página, o que normalmente economiza de 200 a 500 milissegundos. A configuração é importante porque os navegadores descobrem as imagens tarde no processo de análise.

Faça o preload de apenas uma imagem. Fazer o preload de várias remove o benefício, pois o navegador divide sua atenção exatamente como faria de qualquer maneira. Definir fetchpriority como high alcança um resultado semelhante com menos marcação e frequentemente é suficiente por si só para uma imagem já presente no HTML inicial.

Erros que pioram o LCP

• Aplicar lazy loading na imagem de destaque. O lazy loading atrasa justamente o arquivo que você quer primeiro. Aplique-o apenas abaixo da dobra.
• Carregar a imagem de destaque via JavaScript. Uma imagem inserida por script não pode começar a ser baixada até que o script seja executado.
• Usar uma imagem de fundo CSS. Imagens de fundo são descobertas mais tarde do que elementos img e não podem ser priorizadas tão facilmente.
• Fazer o preload de várias imagens. Prioridades concorrentes removem completamente a vantagem.
• Omitir width e height. O desvio de layout prejudica uma métrica separada enquanto esta melhora.

Quando o elemento LCP é texto

Um LCP baseado em texto geralmente é atrasado por fontes da web, e não pelo texto em si. O navegador tem as palavras imediatamente e espera por um arquivo de fonte antes de renderizá-las.

Defina font-display como swap para que o texto seja renderizado em uma fonte alternativa e mude quando a fonte da web chegar. Faça o preload do arquivo de fonte mais importante e faça o subset da fonte para os caracteres que suas páginas realmente usam, o que frequentemente reduz uma fonte de 200 KB para menos de 30 KB. Servir fontes do seu próprio domínio remove uma conexão adicional com terceiros.

O tempo de resposta do servidor define o limite mínimo

O LCP não pode ser mais rápido do que o tempo que seu servidor leva para retornar o primeiro byte, portanto, um servidor lento limita qualquer outra melhoria. Busque menos de 600 milissegundos para o primeiro byte.

Verifique esse número antes de otimizar as imagens, porque uma resposta do servidor de 2 segundos torna impossível uma meta de LCP de 2.5 segundos, independentemente do que você faça com os arquivos. Cache, uma hospedagem mais rápida ou uma rede de distribuição de conteúdo (CDN) resolvem essa camada. O trabalho com imagens melhora o que resta, em vez de lutar contra um limite definido em outro lugar.

Scripts de terceiros também atrasam a imagem

Scripts de análise, banners de consentimento, widgets de chat e scripts de publicidade competem com sua imagem de destaque por largura de banda e tempo de processamento. Uma imagem perfeitamente otimizada ainda renderiza tarde quando 12 scripts são carregados antes dela.

Os banners de consentimento são os mais prejudiciais, porque muitos bloqueiam a renderização até que o visitante faça uma escolha. Carregue scripts de terceiros com o atributo defer ou async para que eles não atrasem a página, e audite quantos são realmente necessários. Remover 3 scripts de rastreamento não utilizados frequentemente melhora mais o LCP do que outra rodada de compressão de imagem.

Testando a alteração corretamente

Teste em uma janela anônima com as extensões desativadas e execute a medição 3 vezes em vez de confiar em um único resultado. As pontuações variam entre as execuções por uma margem perceptível.

Verifique se o navegador realmente recebeu o arquivo menor. Abra as ferramentas de desenvolvedor, mude para a aba Network, filtre por imagens e recarregue. O tamanho transferido e o formato aparecem na lista. Uma página que ainda serve o arquivo antigo geralmente significa que uma camada de cache está retendo a versão anterior, e não que a otimização falhou.

Mantendo o LCP rápido após a correção

Defina uma regra para as imagens de destaque em vez de corrigi-las uma de cada vez, porque novas páginas reintroduzem o problema. Um site corrigido uma vez sofrerá regressão em poucos meses se os editores fizerem o upload direto de uma câmera.

Combine uma largura máxima e um tamanho de arquivo máximo para as imagens de destaque, escreva isso e aplique a cada nova página. Uma regra como 1920 pixels de largura e menos de 200 KB é fácil de verificar e cobre quase todos os designs. Onde várias pessoas publicam, a regra escrita importa mais do que a técnica, já que a métrica reflete a pior página e não a melhor.

Preparando imagens de destaque em uma única etapa

Processe todas as imagens de destaque do site juntas, pois elas compartilham uma especificação e um tamanho de destino. A maioria dos sites tem entre 10 e 100 delas espalhadas por páginas de destino, páginas de categoria e artigos.

Defina a largura e a meta de KB uma vez, solte as imagens e todos os arquivos retornam correspondentes. Até 500 imagens são executadas por lote, inteiramente dentro do seu navegador no seu próprio processador. Nada é enviado para servidores, portanto, recursos de homologação, páginas de campanha não publicadas e trabalhos de clientes permanecem na sua máquina enquanto toda a biblioteca é preparada.