Adiar imagens de fundo

Adiar imagens de fundo.

Imagens de fundo raramente são uma boa opção para os Core Web Vitals. Imagens de fundo não são responsivas, imagens de fundo não conseguem acessar o atributo nativo de carregamento e não podemos controlar nativamente a prioridade das imagens de fundo.

Imagens de fundo frequentemente causam problemas com os Core Web Vitals. Adiar imagens de fundo pouco importantes irá, em muitos casos, melhorar seus Core Web Vitals.

Com muita frequência vejo este anti-padrão incluindo imagens de fundo em sites. Especialmente em sites WordPress que utilizam construtores de páginas como o Elementor.

1. Todas as imagens, incluindo a imagem LCP (a imagem hero) são carregadas com lazy loading
2. Alguns elementos de imagem que não são realmente importantes (como um espaçador, um fundo de caixa de pesquisa etc.) são vinculados como imagens de fundo em uma folha de estilos

Neste pequeno artigo vou mostrar como fazer lazy-load dessas imagens de fundo para priorizar outras imagens mais importantes na página.

Um aviso importante!

Deixe-me começar com um aviso importante! Quando o elemento LCP é atrasado por imagens de fundo, erros foram cometidos e você deve preferencialmente corrigi-los da maneira certa (fazer preload da imagem LCP, não fazer lazy load da imagem LCP, evitar imagens de fundo completamente). Infelizmente, às vezes há muito legado e você não tem outra alternativa de curto prazo além de corrigir o site da melhor forma possível. É nesse momento que você pode aplicar uma correção como a que estou apresentando aqui hoje!

Método 1: Adiar tudo 

O método de adiar tudo é uma forma bastante bruta de fazer as coisas. Mas é fácil de implementar e funcionará bem para melhorar os Core Web Vitals!  Com este método, todas as imagens de fundo são adiadas até que o evento DOMContentLoaded seja disparado. Isso dará ao navegador um pouco mais de tempo para agendar os recursos mais importantes primeiro.

Aqui estão os passos envolvidos: primeiro vamos substituir a propriedade de estilo background-image para todos os elementos que têm uma imagem de fundo. Quando o conteúdo do DOM for carregado, vamos remover essa substituição novamente. Nesse momento, as imagens que não são de fundo já estarão na fila de download. Esse seria um ótimo momento para então enfileirar as imagens de fundo menos importantes para download.

O código

Primeiro crie um estilo e coloque-o no HEAD da página. É importante que este estilo tenha um id porque vamos usar este id para remover esta tag de estilo mais tarde. Claro que, em vez do curinga (*), você também poderia adicionar apenas os nomes de classes CSS que realmente têm uma imagem de fundo.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

Em seguida, quando o conteúdo do DOM for carregado, a imagem LCP provavelmente já estará na fila de download. Neste ponto, é seguro enfileirar as imagens de fundo. 

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

Se o LCP não iniciar um download antecipado, provavelmente é por causa de JavaScript. Nesse caso, você pode tentar trocar o 'DOMContentLoaded' pelo evento 'load'.

Método 2: Lazy-Load de imagens de fundo

O método de lazy-load de imagens de fundo é um pouco mais gentil, avançado e requer um toque mais pessoal. 

Funciona da seguinte forma: primeiro vamos identificar manualmente todos os elementos com uma imagem de fundo. Precisamos adicionar um nome de classe a esses elementos (.lazybg). Em seguida, vamos observar esses elementos com o intersection observer e quando estiverem próximos da viewport visível, vamos fazer o lazy-load da imagem de fundo.

O código

Primeiro crie um estilo e coloque-o no HEAD da página. Este estilo é semelhante ao estilo anterior, mas em vez de remover a propriedade background-image de todos os elementos na página, vamos removê-la apenas para elementos com um determinado nome de classe.

<style>
    .lazybg {background-image: none !important}
</style>

Em seguida, quando o conteúdo do DOM for carregado, começaremos a observar os elementos que têm uma imagem de fundo. Quando esse elemento entrar na viewport, removeremos a classe .lazybg para acionar o download da imagem de fundo. 

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // todos os elementos com imagens de fundo que devem ser lazy loaded 
  const lazyImages = document.querySelectorAll('.lazybg');
 
  // opções para o observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // o observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);

    
  // observar cada imagem
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // mostrar imagem de fundo
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

A vantagem deste método é que imagens de fundo que não estão na viewport visível não são enfileiradas para download. Isso libera recursos para o navegador durante a fase de carregamento.

Conclusão

Ambos os métodos são eficazes para adiar a imagem de fundo em favor de imagens mais importantes como a imagem do Largest Contentful Paint. O primeiro método é muito fácil de implementar e obtém resultados rápidos. O segundo método adiciona comportamento real de lazy load a imagens de fundo e proporcionará um aumento maior na velocidade da página. 

Tenha cuidado ao aplicar qualquer um destes métodos. Se você precisa adiar imagens de fundo, sua página é o que eu gosto de chamar de 'lenta por design'. Os métodos preferidos para corrigir isso seriam reescrever suas páginas e evitar o uso de imagens de fundo.