Adiar imagens de fundo para Core Web Vitals mais rápidos

Adiar imagens de fundo

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

As imagens de fundo frequentemente causarão problemas com os Core Web Vitals. Adiar imagens de fundo sem importância vai, 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 Performance do Web Almanac 2024 (a edição mais recente com dados de tipo de elemento LCP), 9% das páginas móveis têm uma imagem de fundo CSS como seu elemento LCP. Dessas, apenas 2% fazem o preload (pré-carregamento). Isso significa que em aproximadamente 1 em cada 11 sites, a imagem mais importante da página é invisível para o scanner de preload do navegador e começa a carregar tarde.

Nos sites monitorados pelo CoreDash, as páginas onde o elemento LCP é uma tag <img> regular têm um LCP p75 que é aproximadamente 620ms mais rápido do que as páginas onde o LCP é uma imagem de fundo CSS. A diferença vem quase inteiramente do atraso no carregamento do recurso (resource load delay): o navegador descobre uma <img> imediatamente através do scanner de preload, mas uma imagem de fundo tem que esperar até que o CSS seja baixado e analisado (parsed).

Com muita frequência eu vejo esse anti-pattern incluindo imagens de fundo em sites. Especialmente em sites WordPress que usam construtores de páginas (page builders) como Elementor.

1. Todas as imagens, incluindo a imagem LCP (a hero image) carregam com lazy load
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 linkados como imagens de fundo em uma folha de estilo (stylesheet)

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

Um aviso!

Deixe-me começar com um aviso! Quando o elemento LCP é atrasado por imagens de fundo, erros foram cometidos e você preferencialmente deve corrigi-los do jeito certo (fazer o preload da imagem LCP, não aplicar lazy load na imagem LCP, evitar imagens de fundo por completo). Infelizmente, às vezes existe simplesmente muito legado (legacy) e você não tem outra alternativa a curto prazo senão fazer um patch (remendo) no site da melhor maneira possível. É aí que você pode aplicar uma correção como a que estou lhe apresentando aqui hoje!

Método 1: Adiar tudo

O método de adiar tudo (defer everything) é apenas uma forma bárbara de se 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 de tempo extra para agendar (schedule) os recursos mais importantes primeiro.

Aqui estão os passos envolvidos: primeiro vamos substituir (overrule) a propriedade de estilo background-image para todos os elementos que possuem uma imagem de fundo. Uma vez que o conteúdo do DOM tenha sido carregado nós vamos remover essa substituição novamente. Até lá, as imagens que não são de fundo estarão na fila (queued) para 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 nós vamos usar este id para remover esta tag de estilo mais tarde. Claro que ao invés do curinga (wildcard) (*), você também poderia adicionar apenas os nomes de classe CSS que de fato têm 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 LCP provavelmente já estará na fila para download. Neste ponto é seguro colocar as imagens de fundo na fila.

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

Se o LCP não for disparado para um download antecipado (early download) isto é provavelmente por causa de JavaScript. Nesse caso você poderia tentar trocar o 'DOMContentLoaded' pelo evento 'load'.

Em testes realizados pelo DebugBear, fazer o preload de um elemento LCP de imagem de fundo reduziu o LCP de 3.4 segundos para 1.7 segundos. O atraso no carregamento do recurso (resource load delay) caiu de 75% do tempo total do 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 requer mais um toque pessoal.

Ele funciona da seguinte maneira: primeiro nós vamos identificar manualmente todos os elementos com uma imagem de fundo. Nós precisamos adicionar um nome de classe a esses elementos (.lazybg). A seguir nós vamos observar esses elementos com o IntersectionObserver e assim que eles estiverem perto da viewport visível nós vamos aplicar o lazy load na 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 ao invés 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 (scroll) para dentro da viewport nós vamos remover a classe .lazybg para disparar (trigger) um download em segundo plano (background download).

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

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

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


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

A vantagem deste método é que as imagens de fundo que não estão na viewport visível não são colocadas na fila para download. Isso libera recursos para o navegador durante o estágio de carregamento (loading stage). Para mais técnicas como esta, veja como adiar imagens fora da tela (offscreen images).

Conclusão

Ambos os métodos são eficazes para adiar a imagem de fundo em favor de imagens mais importantes como a imagem de 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 às imagens de fundo e proporcionará um impulso (boost) maior no PageSpeed.

Tome 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 (slow by design)'. O método preferido para consertar isso seria reescrever as suas páginas e evitar o uso de imagens de fundo.