Corrigir LazyLoad do WP Rocket no Elementor

Tipo Performance & Velocidade

Nome do erro Lazy Load do WP Rocket quebra imagens do Elementor EN: WP Rocket lazy load breaking Elementor images

Severidade Atenção

Descrição O LazyLoad do WP Rocket troca o src das imagens por um placeholder SVG e so carrega a imagem real quando ela chega ao viewport. Em imagens de fundo e widgets do Elementor que usam CSS inline ou JavaScript, essa troca falha e a imagem fica em branco ou não aparece.

O que é o LazyLoad do WP Rocket falhando em imagens do Elementor?

O LazyLoad e o recurso do WP Rocket que adia o carregamento de imagens fora da tela para acelerar o primeiro render. Ele funciona em duas etapas: o PHP substitui o atributo src de cada imagem por um placeholder SVG e move a URL real para o atributo data-lazy-src; depois, um script no rodape devolve a URL real quando a imagem chega a 300 pixels do viewport. O Elementor, porém, renderiza muitas imagens como background-image via CSS inline ou injeta sliders e galerias por JavaScript depois do carregamento da página. Nesses casos o script do LazyLoad já terminou de rodar ou não reconhece o elemento, entao a imagem real nunca substitui o placeholder e o visitante ve um espaco vazio, uma imagem borrada ou um quadrado em branco.

Como identificar

Imagens dentro de seções ou colunas do Elementor aparecem como espaco em branco ou um placeholder cinza até o usuário rolar e, as vezes, nem assim carregam
Imagens de fundo (background) de seções do Elementor somem completamente no front, mas continuam visiveis no editor do Elementor
O slider ou o carrossel do Elementor mostra so o primeiro slide com imagem e os demais ficam vazios
No DevTools do navegador a tag img mostra o atributo data-lazy-src preenchido, mas o src permanece com o placeholder data:image/svg+xml
As imagens voltam a aparecer assim que você desativa o WP Rocket ou desliga a opção LazyLoad em Media, confirmando que o conflito e do recurso

Como prevenir

Sempre exclua do LazyLoad a imagem hero e o logo do header desde a primeira configuração, para não sacrificar o LCP em troca de carregamento adiado
Depois de cada atualização do Elementor ou de um addon, revalide as páginas com imagem de fundo no modo anonimo, porque mudancas no markup do builder podem reintroduzir o conflito
Mantenha uma lista versionada das classes e caminhos excluidos (elementor-widget-image, swiper-slide, caminhos de banners), para reaplicar rápido em outros sites do mesmo template
Teste a opção Delay JavaScript Execution com a lista de exclusão do Elementor em ambiente de homologacao antes de ligar em producao

Causa

A imagem e renderizada pelo Elementor como background-image em CSS inline (seção ou coluna com imagem de fundo); o LazyLoad de imagens de CSS so age quando a opção separada 'LazyLoad para imagens de fundo CSS' esta ligada em Settings -> Media.
O widget e injetado por JavaScript depois do DOMContentLoaded (sliders, carrosseis, galerias e popups do Elementor), entao o script do LazyLoad já rodou e não reprocessa os novos elementos.
Ha conflito com a opção Delay JavaScript Execution do WP Rocket, que segura o próprio script do Elementor responsável por montar as imagens até a primeira interacao do usuário.
O Elementor ou um addon usa um atributo de imagem não padrão (data-src ou um src em data attribute) que o regex do LazyLoad do WP Rocket não reconhece como imagem a processar.
A imagem crítica acima da dobra (logo no header, banner principal) também recebe LazyLoad, atrasando o render do LCP e gerando a impressao de que a imagem do Elementor não carrega.

Como resolver

Confirme que o LazyLoad e a causa: No painel do WordPress abra as configurações do WP Rocket, va até a aba Media e desligue temporariamente a opção de LazyLoad para imagens. Limpe o cache, recarregue a página do Elementor no modo anonimo e veja se as imagens voltam. Se voltarem, o conflito esta confirmado e você reativa o LazyLoad para aplicar a exclusão correta no próximo passo.
```
WP Rocket -> Media -> Enable for images (desligar para testar)
```
Exclua as imagens do Elementor do LazyLoad pela interface: Ainda na aba Media, no campo Excluded images or iframes, adicione um identificador de cada imagem ou widget do Elementor que esta quebrando, um por linha. Use a classe CSS do elemento, parte da URL do arquivo ou o nome do widget. Salve as alterações e limpe o cache para o WP Rocket parar de aplicar o placeholder nesses assets.
```
elementor-widget-image
elementor-background-overlay
/uploads/2026/banner-principal.png
swiper-slide
```
Ligue o LazyLoad para imagens de fundo CSS: Se o problema for em seções com imagem de fundo, mantenha o LazyLoad ligado, mas ative a opção dedicada a backgrounds de CSS. Isso ensina o WP Rocket a processar o background-image inline que o Elementor gera, em vez de ignora-lo. Limpe o cache e revalide o front.
```
WP Rocket -> Media -> Enable for CSS background images
```
Trate o conflito com o Delay JavaScript Execution: Se as imagens so aparecem após um clique ou scroll, o problema e o adiamento do JavaScript. Adicione os scripts do Elementor a lista de exclusão de Delay JavaScript Execution na aba File Optimization para que o builder monte as imagens sem esperar a interacao do usuário. Salve e limpe o cache.
```
WP Rocket -> File Optimization -> Excluded JavaScript Files
/elementor/assets/js/frontend.min.js
/elementor/assets/js/swiper.min.js
```
Preserve a imagem acima da dobra do LazyLoad: Para o banner principal ou o logo do header, que precisam carregar imediatamente, exclua-os do LazyLoad pela classe ou pelo caminho do arquivo. Isso evita o atraso de LCP e garante que a imagem hero do Elementor renderize no primeiro paint. Limpe o cache e meça novamente no PageSpeed Insights.
```
WP Rocket -> Media -> Excluded images or iframes
elementor-section-hero
/uploads/logo-header.svg
```

PHP

<?php
// functions.php do tema-filho: exclui imagens do Elementor do LazyLoad do WP Rocket
// Use quando precisar excluir um PADRAO de imagens em escala (varios banners/sliders).
add_filter( 'rocket_lazyload_excluded_attributes', function ( $attributes ) {
    $attributes[] = 'class="elementor-widget-image';
    $attributes[] = 'class="swiper-slide';
    return $attributes;
} );

// Exclui imagens pelo trecho da URL (ex.: pasta de banners do Elementor)
add_filter( 'rocket_lazyload_excluded_src', function ( $src ) {
    $src[] = '/uploads/elementor/';
    $src[] = 'banner-principal';
    return $src;
} );

Perguntas frequentes

Por que as imagens do Elementor somem so depois de ativar o WP Rocket?

Porque o LazyLoad do WP Rocket troca o src da imagem por um placeholder SVG e devolve a URL real via JavaScript. Quando a imagem vem de um background CSS ou de um widget injetado por script do Elementor, essa devolucao falha e o placeholder fica no lugar da imagem.

Desligar o LazyLoad inteiro resolve o conflito com o Elementor?

Resolve, mas e o pior caminho, porque você perde o ganho de velocidade em todas as imagens do site. O ideal e manter o LazyLoad ligado e excluir apenas as imagens e os widgets do Elementor que quebram, usando o campo Excluded images or iframes na aba Media.

O que devo colocar no campo Excluded images or iframes do WP Rocket?

Você pode colocar a classe CSS do elemento (como elementor-widget-image), parte da URL do arquivo de imagem ou o nome do widget, um item por linha. O WP Rocket compara esses termos com o markup e deixa de aplicar o placeholder nos elementos que baterem.

As imagens de fundo das seções do Elementor precisam de configuração separada?

Sim. Imagens de fundo em CSS so entram no LazyLoad quando a opção Enable for CSS background images esta ligada na aba Media. Sem ela, o WP Rocket ignora ou quebra o background-image inline que o Elementor gera nas seções.

Sliders e carrosseis do Elementor mostram so o primeiro slide; como corrigir?

Esse sintoma vem do JavaScript adiado. Adicione os arquivos de script do Elementor e do Swiper a lista Excluded JavaScript Files do Delay JavaScript Execution, em File Optimization, para o slider montar todas as imagens sem esperar a interacao do usuário.

Excluir imagens do LazyLoad prejudica a nota do PageSpeed?

So as imagens excluidas deixam de ser adiadas, e as demais continuam otimizadas. Excluir a imagem hero acima da dobra, na verdade, melhora o LCP, porque ela passa a carregar no primeiro paint em vez de esperar o script do LazyLoad.

Preciso editar código para corrigir o LazyLoad do WP Rocket no Elementor?

Na maioria dos casos não: as exclusoes são feitas pela interface do WP Rocket nas abas Media e File Optimization. O filtro PHP so e necessário quando você quer excluir um padrão de imagens em escala ou tratar um atributo não padrão de um addon.

Atenção

Como corrigir o conflito de fontes entre Perfmatters e Astra Pro no WordPress

O conflito de fontes entre Perfmatters e Astra Pro acontece quando as opções de fonte do Perfmatters (Disable Google Fonts, Local Google Fonts e Remove Unused CSS) bloqueiam ou hospedam localmente as fontes que o Astra Pro carrega pela tipografia do Customizer, fazendo a tipografia mudar, sumir ou voltar para a fonte de sistema.

Grave

Como corrigir TBT alto e JavaScript bloqueante no WordPress

TBT alto no WordPress é quando o Total Blocking Time, a soma do tempo em que a thread principal fica bloqueada por JavaScript entre o primeiro render e a interatividade, passa de 200ms no laboratório. Costuma vir de scripts pesados, plugins que carregam JS no carregamento inicial e código de terceiros como rastreadores.

Atenção

Como corrigir o erro de Heartbeat API entre Perfmatters e WP Rocket no WordPress

O erro de Heartbeat com Perfmatters e WP Rocket acontece quando os dois plugins controlam a Heartbeat API do WordPress ao mesmo tempo: o ajuste mais restritivo prevalece, derrubando autosave, bloqueio de edição e a previa do page builder.

Grave

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

O conflito de JS entre Perfmatters e Elementor surge quando o Delay JavaScript adia os scripts do construtor (frontend.min.js, jQuery) para depois da interacao do usuário. O resultado e editor que não abre, menu de dois toques e animacoes paradas. A correção e excluir os arquivos do Elementor do delay, não desligar o Perfmatters.

Atenção

Como corrigir scripts externos quebrados ao remover query strings no WP Rocket

As query strings do WP Rocket quebram scripts externos quando a otimização de arquivos (Minify e Combine de JavaScript) reescreve ou agrupa URLs de terceiros, fazendo o navegador deixar de carregar o arquivo original versionado. A correção e excluir esses arquivos da otimização.

Grave

Como corrigir scripts que não carregam pelo Script Manager do Perfmatters

No Perfmatters Script Manager o JS não carrega quando um arquivo JavaScript enfileirado é marcado como Off em escopo amplo (Everywhere ou por tipo de post) sem exceção para a página que precisa dele. O script some do front-end e a funcionalidade que dependia daquele arquivo para de responder, embora o recurso continue ativo no painel.

Setores

Extensões

Integrações

Como corrigir o Lazy Load do WP Rocket em imagens do Elementor

O que é o LazyLoad do WP Rocket falhando em imagens do Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o conflito de fontes entre Perfmatters e Astra Pro no WordPress

Como corrigir TBT alto e JavaScript bloqueante no WordPress

Como corrigir o erro de Heartbeat API entre Perfmatters e WP Rocket no WordPress

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

Como corrigir scripts externos quebrados ao remover query strings no WP Rocket

Como corrigir scripts que não carregam pelo Script Manager do Perfmatters

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos