Corrigir o aviso Largest Contentful Paint image was lazily loaded no Lighthouse

Largest Contentful Paint image was lazily loaded - em resumo.

O lazy-loading da imagem Largest Contentful Paint irá acionar um aviso do Lighthouse. Imagens com lazy load serão enfileiradas para download muito mais tarde do que as imagens sem lazy load (eager). Isso fará com que a imagem seja renderizada mais tarde e atrase a métrica Largest Contentful Paint. 

Os navegadores são inteligentes o suficiente para resolver isso, certo? Sim, os navegadores são bastante inteligentes, mas não neste caso!

Quando você aplica lazy load em um elemento de imagem, você explicitamente diz ao navegador para despriorizar esta imagem.

Isso significa que todas as outras imagens sem lazy load serão agendadas para download antes das suas imagens com lazy load. Quando essa imagem com lazy load é o seu elemento LCP, você provavelmente irá atrasar o seu LCP. Talvez até muito!

As coisas ficam ainda piores quando você usa bibliotecas de lazy loading baseadas em JavaScript como lazysizes.js. Agora o navegador não apenas atrasa o seu elemento de imagem LCP, você ainda tem que esperar o JavaScript ser baixado e executado.

Corrija o aviso do Lighthouse removendo o atributo loading="lazy" da sua imagem LCP ou atualizando os filtros dos seus plugins para ignorar o lazy loading para a imagem LCP.

O que é o aviso 'Largest Contentful Paint image was lazily loaded'?

Este aviso é dado quando a imagem Largest Contentful Paint é carregada com lazy-load pelo navegador. Por quê? Porque aplicar lazy-loading na imagem mais importante da página (o elemento Largest Contentful Paint) é uma má ideia. Para fins de pagespeed, você deve carregar este elemento o mais cedo possível. O lazy loading deste elemento pode atrasar o Largest Contentful Paint.

Um lembrete rápido: lazy loading

Lazy loading é quando um elemento, geralmente uma imagem, não é agendado para download pelo navegador imediatamente durante o carregamento da página, mas sim quando o elemento está próximo da parte visível da tela. Existem 2 métodos de lazy loading.

Lazy loading nativo

O lazy loading nativo usa a API nativa de lazy loading do navegador. Para imagens, é tão simples quanto adicionar loading="lazy" à tag de imagem. O lazy loading nativo é atualmente suportado por todos os navegadores modernos.

<img loading="lazy" 
     src="image.png" 
     width="123" 
     height="123" 
     alt="uma imagem com lazy load"
>

Lazy loading baseado em JavaScript

O lazy loading baseado em JavaScript usa uma API JavaScript chamada intersection observer para determinar quando uma imagem está dentro ou próxima da viewport visível. Quando a imagem está na viewport visível, o src da imagem é trocado pela imagem final. Geralmente, você pode reconhecer o lazy loading baseado em JavaScript pelo atributo data-src na imagem. O lazy loading via JavaScript é suportado por ainda mais navegadores, mas tem uma desvantagem séria: 'usa JavaScript'. Para que o lazy loading sequer comece, um arquivo JavaScript precisa ser baixado. Isso significa que o lazy loading baseado em JavaScript nunca pode ser tão rápido e eficiente quanto o lazy loading nativo

<img data-src="image.png" 
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="uma imagem com lazy load"
>

Como uma 'imagem Largest Contentful Paint com lazy loading' afeta o pagespeed?

O lazy loading desse elemento irá atrasar o momento em que a imagem LCP é pintada na tela. Isso fará com que o visitante acredite que a página carrega mais devagar, porque leva mais tempo para estar 'visualmente pronta'

A imagem mais importante, geralmente o elemento LCP, deve ser carregada imediatamente para garantir que possa ser pintada na tela o mais rápido possível.

Agora você pode pensar que um navegador seria inteligente o suficiente para resolver isso? Você está enganado! Quando você aplica lazy load em um elemento de imagem, você explicitamente diz ao navegador para despriorizar esta imagem. Isso significa que todas as outras imagens sem lazy load serão agendadas para download antes das suas imagens com lazy load. Quando essa imagem com lazy load é o seu elemento LCP, você provavelmente irá atrasar o seu LCP. Talvez até muito!

As coisas ficam ainda piores quando você usa bibliotecas de lazy loading baseadas em JavaScript como lazysizes.js. Agora o navegador não apenas atrasa o seu elemento de imagem LCP, você ainda tem que esperar o JavaScript ser baixado e executado.

Basta olhar para esta aba de rede do Chrome onde eu apliquei lazy load na imagem LCP (HERO.jpg) e carreguei eager 6 outras imagens. Você verá que a imagem HERO é a última imagem a começar o download e também a última a terminar o download!

Um pouco mais de detalhe

Agora vamos ser um pouco mais técnicos. Por que um navegador não consegue resolver isso sozinho? Acontece que, com lazy loading, você está especificamente instruindo um navegador a despriorizar uma imagem. Em muitos casos, isso significa que o navegador começará a baixar outros recursos primeiro. E é exatamente isso que causa o atraso no LCP.

• Imagens com lazy load serão enfileiradas para download muito mais tarde do que imagens sem lazy load (eager).
• Imagens com lazy load frequentemente são baixadas com baixa prioridade.
• Outros elementos como imagens normais, scripts diferidos, fontes etc. podem ser agendados para download antes das imagens com lazy load.
• O lazy loading baseado em JavaScript depende de um JavaScript que precisa ser baixado e executado antes que o lazy loading possa sequer começar.
  

Como corrigir 'Largest Contentful Paint image was lazily loaded'

Corrigir o aviso sobre a imagem Largest Contentful Paint com lazy load é simples. Apenas não aplique lazy load nesta imagem.

Na teoria

• Se você está usando lazy loading nativo, remova o loading="lazy" do elemento LCP ou altere para loading="eager"
• Se você está usando lazy loading baseado em JavaScript, considere mudar para o lazy loading nativo mais rápido ou simplesmente exclua a imagem LCP do lazy loading.
• Se você está usando algum tipo de componente de imagem como next/image, defina strategy="eager".

Na prática

Na prática, isso pode causar algumas dores de cabeça. Muitos sites usam plugins de otimização que aplicam lazy load em todas as imagens da tela para você. Esses plugins não distinguem entre imagens importantes, sempre visíveis, e imagens abaixo da dobra.

A maioria dos plugins permite que você 'ignore o lazy loading' com base no nome do arquivo, nome da classe ou outros atributos. Isso significa que você terá que ler a documentação do seu plugin ou simplesmente pesquisar no Google '[nome do seu plugin] + bypass lazy loading'. Depois, edite seu arquivo de template e altere sua imagem principal de acordo ou altere as imagens no editor de páginas.

Solução alternativa para 'Largest Contentful Paint image was lazily loaded'

Às vezes, seu CMS não permite que você altere as configurações de lazy loading das imagens. Nesse caso, ainda existem algumas soluções alternativas que você pode usar para minimizar o impacto.

• Aplique lazy load em todas as imagens para garantir que imagens 'eager' abaixo da dobra não sejam baixadas antes da imagem LCP
  
• Evite imagens de fundo para garantir que nenhuma imagem de fundo seja baixada antes do elemento LCP
  
• Faça preload do elemento LCP. Isso garantirá que a imagem LCP seja agendada para download o mais cedo possível
  
• Desative o lazy loading baseado em JavaScript e mude para o lazy loading nativo. Isso pelo menos removerá o atraso do JavaScript
  
• Adicione fetchpriority = "high" ao elemento LCP. Isso agendará a imagem para download antecipado
  
• Otimize todas as suas imagens. Use imagens responsivas e formatos de imagem de próxima geração para reduzir o tempo necessário para baixar as imagens.