A velocidade de carregamento da página não se resume à compressão de imagens e à cache. Por vezes, todas as etiquetas <img> de um site já têm carregamento diferido com loading="lazy", mas o PageSpeed Insights continua a queixar-se das imagens de fundo nas secções do Elementor. Isto acontece porque a propriedade background-image em CSS não suporta lazy loading de forma nativa; o navegador vai buscar fielmente todas as imagens de fundo ao processar os estilos, mesmo que a secção esteja muito abaixo da linha de água.

Isto prejudica particularmente as landing pages longas: o primeiro ecrã pode ser renderizado em 1,2 segundos, mas demora 4 segundos porque o navegador descarrega 8 imagens de fundo do rodapé que o utilizador só irá ver passado um minuto. Existe uma solução e, nos últimos dois anos, surgiram opções para qualquer nível de competência, desde «marcar uma caixa» até JavaScript personalizado.

💡 Visão geral rápida:

• Ative o carregamento diferido de fundos integrado nas definições do Elementor.
• Configure a API IntersectionObserver para fundos CSS personalizados e versões mais antigas do plugin.
• Aplique jQuery com atributos de dados para sites onde esta framework já está em uso.

Carregamento diferido integrado no Elementor

Desde a versão 3.9, o Elementor adicionou uma funcionalidade experimental Lazy Load Background Images e, a partir da versão 3.15+, tornou-se estável e ativada por defeito nas novas instalações. Internamente, é a mesma API IntersectionObserver das soluções nativas do navegador, mas integrada num interruptor conveniente.

Como ativar: vá a Elementor → Definições → Funcionalidades (ou Definições → Experiências na interface em português), encontre a linha Lazy Load Background Images e altere o interruptor para Ativo. Guarde as alterações e todas as imagens de fundo de secções, contentores e colunas definidas através da interface padrão do Elementor começarão a carregar apenas quando o utilizador fizer scroll até elas.

O que este método NÃO cobre: fundos personalizados escritos manualmente através do separador CSS do Elementor (selector { background-image: url(...); }) e fundos adicionados através de plugins de widgets de terceiros. Para esses, utilize os métodos abaixo.

Prós: zero código, mantido pela equipa do Elementor, automaticamente compatível com plugins de cache. Contras: apenas para fundos padrão do Elementor, requer a versão 3.9+.

À parte, vale a pena mencionar o formato da imagem de fundo. O PageSpeed Insights do Google penaliza fundos em JPEG quando há WebP ou AVIF disponíveis, e esta penalização é independente do método que usou para diferir o carregamento. Converta todas as imagens de fundo para WebP (a perda de qualidade é invisível a olho nu e o tamanho do ficheiro é 25-35% menor do que JPEG) ou AVIF (50% menor do que JPEG, mas requer uma <picture> de fallback para Safari anterior à versão 16.0). Plugins como o Converter for Media ou o Imagify fazem isto automaticamente ao carregar para a biblioteca de media, incluindo fundos carregados através da interface do Elementor.

IntersectionObserver: JavaScript moderno sem jQuery

Se a sua versão do Elementor for inferior à 3.9, ou os fundos forem definidos com CSS personalizado, ou simplesmente quiser controlo total, a API IntersectionObserver resolve a tarefa de forma limpa, sem a sobrecarga dos eventos de scroll.

Porquê evitar um handler de scroll? O evento scroll é disparado dezenas de vezes por segundo e realiza cálculos de posição para elementos na thread principal a cada ciclo. Mesmo com throttle, isto é percetível em dispositivos fracos. O IntersectionObserver funciona de forma assíncrona na thread do compositor do navegador; limita-se a reportar quando um elemento cruzou o limiar de visibilidade, sem cálculos constantes.

Passo 1. Marcação e CSS. Adicione a classe CSS lazy-bg-section às secções que precisam de carregamento diferido:

1
.lazy-bg-section {
2
  background-color: #f0f0f0; /* placeholder until background loads */
3
  background-repeat: no-repeat;
4
  background-position: center;
5
  background-size: cover;
6
}
7
 
8
.lazy-bg-section.loaded {
9
  background-color: transparent;
10
}

A cor de fundo #f0f0f0 atua como um placeholder visual; a secção não parece vazia enquanto o utilizador faz scroll. A classe .loaded será adicionada a partir do JavaScript quando a secção entrar na janela de visualização.

Passo 2. JavaScript, inicialização do Observer. Coloque o código no ficheiro de script do seu tema ou através de um plugin como o Code Snippets:

1
document.addEventListener('DOMContentLoaded', () => {
2
  const sections = document.querySelectorAll('.lazy-bg-section');
3
 
4
  if (!sections.length || !('IntersectionObserver' in window)) return;
5
 
6
  const observer = new IntersectionObserver(
7
    (entries) => {
8
      entries.forEach((entry) => {
9
        if (entry.isIntersecting) {
10
          const bgUrl = entry.target.dataset.bg;
11
          if (bgUrl) {
12
            entry.target.style.backgroundImage = `url(${bgUrl})`;
13
          }
14
          entry.target.classList.add('loaded');
15
          observer.unobserve(entry.target);
16
        }
17
      });
18
    },
19
    { rootMargin: '200px 0px' }
20
  );
21
 
22
  sections.forEach((section) => observer.observe(section));
23
});

Detalhe chave: rootMargin: '200px 0px' significa que o Observer é acionado 200 pixels antes de a secção aparecer realmente no ecrã. O utilizador não vê o momento do carregamento; a imagem já está no lugar.

Passo 3. Marcação no Elementor. Abra a secção pretendida → separador Avançado → campo Classes CSS, introduza lazy-bg-section. No mesmo local, em Atributos Personalizados, adicione um atributo data-bg com o valor do URL completo da imagem de fundo.

Esta abordagem funciona em qualquer navegador moderno (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), ou seja, em todo o lado desde 2016. Para o Internet Explorer, precisará de um polyfill, mas esses projetos são agora raros.

JQuery e atributos de dados: a abordagem clássica

Em sites realmente antigos, onde o jQuery já é carregado em todas as páginas e reescrever a stack não é uma opção, funciona um método com atributos de dados e um handler de scroll. É menos performante do que o IntersectionObserver, mas está comprovado ao longo dos anos e não requer APIs modernas do navegador.

Passo 1. Classe da secção. Nas definições da secção do Elementor, separador Avançado → Classes CSS, especifique lazy-background:

Passo 2. Estilos CSS para o fundo. Para que a imagem de fundo se estique corretamente por toda a secção após o carregamento, defina os estilos. No Elementor, isto é feito através do separador Avançado → CSS Personalizado da secção específica:

Estilos básicos para um fundo de ecrã inteiro:

1
#OO2 .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: center;
4
  background-size: cover;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: -1;
11
  background-attachment: fixed;
12
}

Note o seletor #OO2; este é o identificador CSS da secção que define no mesmo separador Avançado → ID CSS. Para cada secção com o seu próprio fundo, o identificador deve ser único para que os estilos não se sobreponham.

Opção para imagens pequenas (não de secção inteira). Se precisar de colocar uma imagem pequena na secção em vez de um fundo de ecrã inteiro, por exemplo, um logótipo ou elemento decorativo no rodapé, ajuste os estilos para o tamanho e posição específicos:

1
section#SDStudio-Footer .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: right bottom;
4
  background-size: 350px;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: 0;
11
  background-attachment: fixed;
12
}
13
 
14
section#SDStudio-Footer .elementor-column.elementor-col-25,
15
.elementor-column[data-col="25"] {
16
  width: 25%;
17
  z-index: 2;
18
}

Aqui, o fundo é posicionado no canto inferior direito da secção do rodapé com uma largura fixa de 350px, e as colunas recebem z-index: 2 para que o conteúdo não seja coberto pela camada de fundo.

Passo 3. Imagens responsivas. Para evitar carregar uma imagem de 2 megabytes num ecrã de telemóvel com 400px de largura, prepare 6 variantes de imagem para diferentes resoluções:

Passo 4. Atributos de dados. Carregue as imagens para a biblioteca de media do WordPress e especifique os caminhos para as mesmas nos atributos de dados da secção. No Elementor: Avançado → Atributos Personalizados:

Formato para cada atributo:

1
data-bg-min-1701 | /wp-content/uploads/2020/03/Background-min-width-1701px.jpg
2
data-bg-max-1700 | /wp-content/uploads/2020/03/Background-max-width-1700px.jpg
3
data-bg-max-1200 | /wp-content/uploads/2020/03/Background-max-width-1200px.jpg
4
data-bg-max-1024 | /wp-content/uploads/2020/03/Background-max-width-1024px.jpg
5
data-bg-max-768  | /wp-content/uploads/2020/03/Background-max-width-768px.jpg
6
data-bg-max-400  | /wp-content/uploads/2020/03/Background-max-width-400px.jpg

O script (ver abaixo) lê estes atributos, determina a largura atual do ecrã através de window.matchMedia e insere o URL do tamanho necessário.

Passo 5. Script jQuery. Adicione o código ao ficheiro de script do seu tema ou através de um plugin:

1
jQuery(document).ready(function ($) {
2
  var $window = $(window),
3
    lazyBgArr = [];
4
 
5
  $window.on('load resize scroll', function () {
6
    for (var i = 0; i < lazyBgArr.length; i++) {
7
      var func = lazyBgArr[i];
8
      if (func !== undefined) {
9
        func();
10
      }
11
    }
12
  });
13
 
14
  function lazyBg(strEl, intPos) {
15
    return function () {
16
      var intCheckVal = $window.scrollTop() + $window.height() + 100;
17
      if (intCheckVal > strEl.offset().top) {
18
        var data_bg;
19
 
20
        if (window.matchMedia('(min-width: 1701px)').matches) {
21
          data_bg = 'data-bg-min-1701';
22
        } else if (
23
          window.matchMedia('(min-width: 1201px) and (max-width: 1700px)').matches
24
        ) {
25
          data_bg = 'data-bg-max-1700';
26
        } else if (
27
          window.matchMedia('(min-width: 1025px) and (max-width: 1200px)').matches
28
        ) {
29
          data_bg = 'data-bg-max-1200';
30
        } else if (
31
          window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches
32
        ) {
33
          data_bg = 'data-bg-max-1024';
34
        } else if (
35
          window.matchMedia('(min-width: 401px) and (max-width: 768px)').matches
36
        ) {
37
          data_bg = 'data-bg-max-768';
38
        } else if (window.matchMedia('(max-width: 400px)').matches) {
39
          data_bg = 'data-bg-max-400';
40
        }
41
 
42
        if (!data_bg) return;
43
 
44
        var tmpImg = new Image(),
45
          strSrc = strEl.attr(data_bg);
46
        tmpImg.src = strSrc;
47
        delete lazyBgArr[intPos];
48
 
49
        $(tmpImg).on('load', function () {
50
          strEl.append('<div class="lazy-bg"></div>').css('opacity', 1);
51
          strEl.addClass('loaded');
52
        });
53
      }
54
    };
55
  }
56
 
57
  $('.lazy-background').each(function (i) {
58
    lazyBgArr.push(lazyBg($(this), i));
59
  });
60
});

Como funciona: ao carregar a página e em cada evento de scroll, o script verifica a posição de cada secção com a classe .lazy-background. Se a secção entrar na zona «ecrã + 100px de margem», a largura atual da janela de visualização é determinada através de matchMedia, o atributo de dados necessário é selecionado, um objeto Image temporário é criado para pré-carregamento e, após o carregamento bem-sucedido, é adicionado à secção um <div class="lazy-bg"> com a imagem de fundo. A secção processada é removida do array de observação; não há carregamentos repetidos.

Qual o método a escolher: comparação

O critério prático de seleção é simples: se o seu Elementor for da versão 3.9 ou superior e os fundos forem definidos da forma padrão, ative a funcionalidade integrada e dê o assunto por encerrado. Se os fundos forem personalizados (separador CSS, widgets de terceiros), utilize o IntersectionObserver em JavaScript vanilla, sem jQuery. Deixe o método jQuery para projetos onde o jQuery já está presente e não há orçamento para reescrever, ou onde é necessário suporte para o Internet Explorer.

Independentemente do método escolhido, a imagem de fundo permanece fisicamente o mesmo ficheiro no servidor. Se pesar 800 kilobytes, o lazy loading não a tornará mais leve, apenas adiará o momento em que o navegador começa a descarregar esses 800 kilobytes. É por isso que a regra «otimizar primeiro, carregar diferidamente depois» também se aplica aqui: primeiro comprima para WebP ou AVIF e redimensione para a largura máxima de ecrã do público-alvo, e só depois aplique qualquer um dos três métodos de carregamento diferido. Os plugins de cache (WP Rocket, LiteSpeed Cache, Flying Press) não entram em conflito com nenhuma das três abordagens, uma vez que um fundo carregado através de CSS background-image é armazenado em cache pelo navegador da mesma forma que um <img> normal.

⁉️🤔 Perguntas frequentes

Porque não usar simplesmente loading="lazy" para imagens de fundo?

O atributo loading="lazy" só funciona com etiquetas <img> e <iframe>, mas não com a propriedade CSS background-image. O navegador não sabe que o seu CSS contém um URL de imagem que poderia ser diferido até processar a folha de estilos e, nessa altura, o pedido já foi enviado para a rede. É exatamente por isso que os fundos precisam de um mecanismo separado.

Que método devo escolher se o site tem 3 anos e o Elementor está na versão 3.12?

O carregamento diferido integrado do Elementor. A versão 3.12 já inclui esta funcionalidade em estado estável; basta ir a Definições, Funcionalidades e ativá-la. Não é necessário escrever código.

O método jQuery causa um abrandamento significativo em dispositivos móveis?

Em dispositivos Android de gama baixa de 2019-2020, é notório. O evento scroll combinado com offset().top sobrecarrega a thread principal a cada frame de scroll. Se a audiência do site for predominantemente móvel, mude para IntersectionObserver ou atualize o Elementor para 3.9+ e ative a funcionalidade integrada.

Posso combinar abordagens no mesmo site?

Sim, e é uma prática normal. A maioria das secções de fundo configuradas através da interface padrão do Elementor são tratadas pelo carregamento diferido integrado. As restantes secções personalizadas com CSS manual são ligadas ao IntersectionObserver. Não há conflito: o Observer só atua em elementos com a classe especificada, e o mecanismo integrado do Elementor ignora-os.

É obrigatório preparar 6 tamanhos de imagem ou um é suficiente?

Seis tamanhos é o máximo para um detalhe significativo. Na prática, para a maioria dos sites, três são suficientes: 1920px para desktop, 1024px para tablet e 768px para mobile. Quatro breakpoints, adicionando 400px para ecrãs pequenos, já é um bom equilíbrio entre qualidade e esforço. Uma imagem para todas as resoluções funciona, mas carrega kilobytes extra em mobile; o Google PageSpeed Insights vai notar isso.

Vale a pena preocupar-se com código personalizado em 2026?

Se tiver o Elementor 3.9 ou mais recente, quase de certeza que não. A funcionalidade integrada cobre as necessidades da grande maioria dos sites: ative-a, verifique no PageSpeed Insights, esqueça o assunto. Os métodos personalizados (IntersectionObserver e especialmente jQuery) justificam-se em exatamente dois casos: a versão do Elementor está congelada abaixo da 3.9 por uma razão válida, ou os fundos são adicionados de forma não padrão e o interruptor padrão não os vê.

Para um novo projeto num Elementor recente, a ordem correta de ações é: ativar o carregamento diferido integrado, passar o site pelo PageSpeed Insights e, só se imagens de fundo específicas ainda forem assinaladas como problemáticas, tratá-las individualmente através do IntersectionObserver. Não escreva código personalizado antecipadamente «por precaução»; cada linha extra de JavaScript que puder evitar escrever poupa-lhe tempo de manutenção.