Corrigir o aviso do lighthouse Defer offscreen images

O que é o aviso 'defer offscreen images' do lighthouse?

O que é o aviso defer offscreen images no lighthouse? O Lighthouse sinaliza páginas que possuem:

• Imagens que terminam abaixo de 3 vezes a altura da viewport.
  Quando uma imagem não possui lazy loading e termina abaixo de 3 vezes a altura da parte visível da página e começa abaixo da parte visível da página.
• E são maiores que 0.02MB ou levam mais de 50ms para carregar.
  Imagens que são pequenas ou inline são ignoradas pelo lighthouse. Frequentemente, scripts de lazy loading usam pequenas imagens de espaço reservado (placeholder).
• E não têm o atributo loading definido.
  O Lighthouse ignora imagens que possuem o atributo loading="lazy" ou loading="eager".

O aviso 'defer offscreen images' não afeta diretamente nenhuma métrica do lighthouse. Em teoria, páginas com imagens fora da tela poderiam carregar muito rápido. Na prática, isso geralmente não acontece. Muitas imagens fora da tela provavelmente afetarão indiretamente métricas importantes do lighthouse, como o Largest Contentful Paint (LCP).

Um lembrete rápido - O que é lazy loading?

Lazy loading significa que as imagens que não estão localizadas na parte visível da página podem ser carregadas posteriormente, geralmente logo antes de aparecerem na tela durante a rolagem.

O que causa imagens fora da tela com 'eager loading'?

As imagens não são adiadas por padrão. Imagens fora da tela que não são adiadas são colocadas na página porque o atributo loading da imagem está vazio ou a imagem não é compatível com a biblioteca de lazy loading personalizada. Imagens fora da tela geralmente são causadas por:

• Plugins mal codificados no seu CMS.
• Plugins que desativam o lazy loading nativo
• Imagens de fundo (Background images)
• Construtores de páginas (Page Builders) que geram HTML ruim (por exemplo: Elementor ou WP Bakery).
  
• Texto que é copiado e colado em um editor WYSIWYG (como o TinyMCE).
• Má codificação do template.

Como as imagens fora da tela ('offscreen images') afetam a velocidade da página (pagespeed)

As imagens fora da tela não impactam diretamente as métricas do lighthouse. No entanto, elas tornam a renderização de uma página da web desnecessariamente complicada, tornando quase impossível obter uma alta pontuação no lighthouse. Seu navegador precisará baixar mais recursos antes que a página da web possa ser exibida na tela. Existem 3 problemas com imagens fora da tela.

• Seu navegador precisará baixar mais imagens antes de renderizar a página.
• Outros recursos necessários para renderizar a página podem ser atrasados, pois recebem uma prioridade menor
• Seu navegador pode usar muito mais memória ao renderizar a página.

Como corrigir o 'defer offscreen images'

Para corrigir o 'defer offscreen images', você precisará aplicar o lazy loading nas imagens que não estão na viewport visível. Você pode fazer isso adicionando o lazy loading nativo ou uma biblioteca de lazy loading. Para adicionar o lazy loading nativo, basta adicionar 'loading="lazy"' ao elemento da imagem.

<img      src="image.webp" 
     alt="a native lazy loaded image" 
     width="300" height="300">

Alternativamente, você pode adicionar uma biblioteca de lazy loading nativa como o lazysizes ou implementar seu próprio lazy loading (o que é mais fácil do que você imagina).

A partir daí, você precisará fazer um pouco de pesquisa. Tente descobrir o que está fazendo com que essas imagens sejam colocadas na página sem o adiamento (non-deferred). Existem 5 suspeitos habituais:

1. Plugins mal codificados no seu CMS.
   Alguns plugins podem adicionar HTML diretamente na página e não usar os hooks corretos que habilitam o lazy loading.
2. Plugins que desativam o lazy loading nativo.
   Existem plugins por aí que desativam o lazy loading nativo por padrão.
3. Construtores de páginas (Page Builders) que geram HTML ruim
   Construtores de páginas como Elementor ou WP Bakery geralmente criam códigos inflados que estão longe de serem perfeitos. Não há uma correção fácil para isso. Os Page Builders muitas vezes fazem parte do fluxo de trabalho. A solução inclui limpar o seu código inflado e mudar o seu fluxo de trabalho.
4. Texto copiado e colado em um editor WYSIWYG
   A maioria dos editores WYSIWYG, como o TinyMCE, faz um trabalho ruim ao limpar o código colado, especialmente quando colado de outra fonte de rich text, como o Microsoft Word. Esses editores podem não adicionar lazy loading às suas imagens.
5. Má codificação (do template).
   Mesmo quando o lazy loading está ativado, as imagens hardcoded nos seus templates podem ainda não carregar com lazy loading. Verifique os seus templates em busca de imagens fora da tela e aplique o lazy loading nelas.

Qual é o melhor - Lazy loading nativo vs scripts de lazy loading?

Qual é o melhor? Você deve usar o loading="lazy" nativo do navegador ou um script de lazy loading? Pessoalmente, eu prefiro o lazy loading nativo do navegador. Por quê? Porque não preciso usar um script externo que introduzirá sobrecarga (overhead). O lazy loading nativo é simplesmente mais rápido. No entanto, o lazy loading nativo não é suportado pelo Safari. Se a maioria dos seus usuários navega na web usando seus iPhones ou Macs, considere usar um script de lazy loading. Na maioria das vezes, os benefícios do lazy loading nativo superam as desvantagens de não suportar o Safari.

Soluções alternativas (Workaround) para 'defer offscreen images'

Às vezes não é possível adiar imagens fora da tela. Você pode não ter acesso ao template ou o seu CMS pode não suportar lazy loading. Existem algumas soluções alternativas para diminuir o impacto das imagens fora da tela. Essas soluções alternativas estão longe de serem perfeitas e podem introduzir um conjunto totalmente novo de desafios.

• Minifique e comprima as suas imagens.
  Minimize e comprima as suas imagens atuais. Imagens menores têm um impacto menor no desempenho de carregamento do que imagens grandes.
• Use formatos de imagem novos e mais rápidos.
  Em vez dos formatos de arquivo png e jpeg, mude para um formato de arquivo mais rápido como o WebP.
• Divida páginas grandes em várias páginas.
  Dividir páginas grandes em várias páginas pode reduzir o número de imagens exibidas em uma página.
• Implemente a rolagem infinita (infinite scroll).
  A rolagem infinita é basicamente o lazy loading, mas não apenas para imagens, e sim para partes inteiras da página da web. Ao rolar através de elementos repetidos, como imagens (veja o Pinterest, por exemplo), a rolagem infinita pode acelerar consideravelmente a sua página.