Adie imagens de fundo para um Core Web Vitals mais rápido

Adie imagens de fundo

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

Imagens de fundo muitas vezes causam problemas com o Core Web Vitals. Adiar imagens de fundo sem importância em muitos casos melhorará o seu Largest Contentful Paint.

Última revisão por Arjen Karel em fevereiro de 2026

De acordo com o capítulo de Performance do Web Almanac 2024 (a edição mais recente com dados de tipo de elemento de LCP), 9% das páginas mobile têm uma imagem de fundo em CSS como seu elemento de LCP. Desses, apenas 2% fazem o preload dela. Isso significa que em cerca de 1 em cada 11 sites, a imagem mais importante da página é invisível ao scanner de preload do navegador e começa a carregar tarde.

Em sites monitorados pelo CoreDash, páginas onde o elemento de LCP é uma tag <img> comum possuem um LCP no p75 que é cerca de 620ms mais rápido do que páginas onde o LCP é uma imagem de fundo em CSS. A diferença vem quase inteiramente do atraso no carregamento do recurso: o navegador descobre uma <img> imediatamente através do scanner de preload, mas uma imagem de fundo precisa esperar até que o CSS seja baixado e parseado.

Com muita frequência vejo esse anti-pattern incluindo imagens de fundo em sites. Especialmente em sites WordPress que usam page builders como o Elementor.

1. Todas as imagens, incluindo a imagem do LCP (a hero image) são carregadas via lazy load
2. Alguns elementos de imagem que não são realmente importantes (como um espaçador, um fundo de caixa de busca etc) são vinculados como imagens de fundo em uma folha de estilo (stylesheet)

Neste curto artigo vou te mostrar como fazer lazy load destas imagens de fundo a fim de priorizar outras imagens mais importantes na página.

Uma palavra de aviso!

Deixe-me começar com uma palavra de aviso! Quando o elemento do LCP é atrasado por imagens de fundo, erros foram cometidos e você deveria, de preferência, corrigi-los da maneira certa (fazer preload da imagem do LCP, não fazer lazy load da imagem do LCP, evitar imagens de fundo por completo). Infelizmente às vezes há apenas muito legado e você não tem outra alternativa a curto prazo senão remendar o site da melhor forma possível. É aí que você pode aplicar uma correção como a que estou apresentando aqui hoje!

Método 1: Adie tudo

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

Aqui estão os passos envolvidos: primeiro vamos sobrescrever a propriedade de estilo background-image para todos os elementos que possuem uma imagem de fundo. Uma vez que o conteúdo do DOM tiver sido carregado, nós vamos remover esta sobrescrita novamente. A essa altura as imagens que não são de fundo estarão na fila para download. Este seria um ótimo momento para então colocar as imagens de fundo menos importantes na fila 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 nós vamos usar este id para remover esta tag de estilo mais tarde. Claro que em vez do curinga (*) você também poderia apenas adicionar os nomes de classe CSS que realmente possuem uma imagem de fundo.

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

A seguir, quando o conteúdo do DOM tiver sido carregado, a imagem do LCP provavelmente já estará na fila para 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 disparar para um download antecipado isso provavelmente é devido a JavaScript. Nesse caso você poderia tentar trocar o evento 'DOMContentLoaded' pelo evento 'load'.

Em testes realizados pela DebugBear, fazer preload de um elemento de LCP de background-image cortou o LCP de 3,4 segundos para 1,7 segundos. O atraso no carregamento do recurso caiu de 75% do tempo total de LCP para apenas 2%.

Método 2: Lazy load em imagens de fundo

O método de lazy load em imagens de fundo é um pouco mais suave, avançado e exige mais de um toque pessoal.

Ele funciona da seguinte forma: primeiro nós vamos identificar manualmente todos os elementos com uma imagem de fundo. Precisamos adicionar um nome de classe a esses elementos (.lazybg). A seguir nós vamos observar estes elementos com o IntersectionObserver e assim que eles estiverem perto da viewport visível nós 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 se parece com o estilo anterior mas em vez de remover a propriedade de imagem de fundo para todos os elementos na página nós vamos apenas removê-la para elementos com um certo nome de classe.

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

A seguir, quando o conteúdo do DOM tiver sido carregado, nós começaremos a observar os elementos que possuem uma imagem de fundo. Quando esse elemento rolar para dentro da viewport nós removeremos a classe .lazybg para disparar um download de fundo.

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

  // todos os elementos com imagens de fundo que deveriam ter lazy load
  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 colocadas na fila para download. Isto libera recursos para o navegador durante o estágio de carregamento. Para mais técnicas como esta, veja como adiar imagens fora da tela.

Conclusão

Ambos os métodos são eficazes em 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 um comportamento de lazy load real a imagens de fundo e proporcionará um impulso maior no PageSpeed.

Tenha cuidado ao aplicar qualquer um destes métodos. Se você precisa adiar imagens de fundo a sua página é o que eu gosto de chamar de 'lenta por design'. O método preferido de corrigir isso seria reescrever as suas páginas e evitar o uso de imagens de fundo.