Happy Addons WP Rocket: corrigir conflito de lazy load

Tipo Page Builders

Nome do erro Imagens do Happy Addons em branco com o lazy load do WP Rocket EN: Happy Addons images blank due to WP Rocket LazyLoad

Severidade Atenção

Descrição O conflito de lazy load entre Happy Addons e WP Rocket acontece quando o WP Rocket reescreve o atributo src das imagens dos widgets para data-lazy-src e os scripts do Happy Addons disparam antes do carregamento, deixando sliders, image grids e imagens de fundo em branco.

O que é conflito de lazy load entre Happy Addons e WP Rocket?

O conflito de lazy load entre Happy Addons e WP Rocket surge na intersecao de dois recursos: o LazyLoad do WP Rocket, que adia o carregamento das imagens até o usuário rolar a página, e os widgets do Happy Addons que dependem da imagem já estar no DOM para calcular altura, montar o carrossel ou aplicar a animacao. Quando o WP Rocket reescreve o atributo src para data-lazy-src e troca a imagem por um placeholder SVG vazio, o JavaScript do widget roda contra um elemento sem dimensão e a galeria, o slider ou o card de imagem aparecem quebrados ou em branco.

Segundo a documentação oficial do WP Rocket, o LazyLoad move a URL original para data-lazy-src, substitui o src por um SVG de placeholder e, nas imagens de fundo, adiciona a classe rocket-lazyload com a URL no atributo data-bg. So depois que a imagem entra na viewport o WP Rocket aplica a classe lazyloaded e o atributo data-ll-status igual a loaded. Widgets do Happy Addons como Image Grid, Slider, Card e os blocos com Background Image inicializam antes desse momento, e por isso o conteúdo não renderiza. A própria documentação reconhece que sliders, carrosseis e scripts que exigem a imagem carregada de imediato sofrem com o LazyLoad.

Como identificar

O widget Image Grid ou o Slider do Happy Addons aparece em branco, com área vazia no lugar das imagens, apenas no site publicado (com cache do WP Rocket ativo) e não no editor do Elementor.
As imagens de fundo aplicadas em seções ou colunas do Happy Addons somem no frontend, mas continuam visiveis ao editar a página.
No código-fonte da página, as imagens dos widgets aparecem com o atributo ‘data-lazy-src’ e um placeholder ‘data:image/svg+xml’ no lugar do ‘src’ real.
O carrossel ou slider carrega com altura zerada ou com os slides empilhados, porque o script calculou o tamanho antes de a imagem entrar na viewport.
As imagens so aparecem depois que o usuário rola a página até elas, com um salto visivel de layout (layout shift) no momento em que a imagem finalmente carrega.

Antes de começar: Antes de mexer nas configurações de Media e File Optimization do WP Rocket em producao, anote os ajustes atuais e faca um backup do site, ou teste primeiro em staging. Mudancas de lazy load e delay de JavaScript afetam o site inteiro, e e prudente poder reverter caso outra página quebre.

Como prevenir

Sempre que adicionar um widget do Happy Addons que dependa de imagens (Slider, Image Grid, Card), valide a página com o cache do WP Rocket ativo antes de publicar, não so no editor do Elementor.
Mantenha no campo Excluded images or iframes do WP Rocket uma lista padrão com as classes dos widgets do Happy Addons que usam imagem, replicada em todos os sites do mesmo padrão.
Ative o LazyLoad de imagens de fundo apenas quando realmente necessário, já que ele costuma ser a maior fonte de conflito com seções que usam Background Image.
Atualize Happy Addons, Elementor e WP Rocket juntos em staging e revalide os widgets de imagem, porque mudancas na forma como o WP Rocket reescreve o src podem reabrir o conflito.

Causa

O recurso LazyLoad para imagens do WP Rocket (aba Media) esta ativo e reescreve o src das imagens do Happy Addons para data-lazy-src com placeholder SVG, fazendo o widget inicializar contra uma imagem ainda não carregada.
O widget Slider ou Card Carousel do Happy Addons calcula altura e largura dos slides no carregamento e encontra placeholders sem dimensão, gerando carrossel com altura zerada ou slides empilhados.
O LazyLoad de imagens de fundo do WP Rocket aplica a classe rocket-lazyload e move a URL para data-bg nas seções e colunas com Background Image do Happy Addons, deixando o fundo em branco até o scroll.
O Image Grid e o Gallery do Happy Addons disparam o calculo de masonry ou de proporcao das celulas antes de o WP Rocket trocar data-lazy-src pela imagem real, quebrando o alinhamento da grade.
O recurso Delay JavaScript Execution do WP Rocket esta adiando o script do Happy Addons, fazendo o widget so inicializar após a interacao do usuário e descasar do momento em que o LazyLoad carrega a imagem.

Como resolver

Confirme que o LazyLoad e a causa: Limpe o cache e abra a página afetada no modo anonimo. Inspecione a imagem quebrada e verifique se o src foi trocado por data-lazy-src e por um placeholder SVG. Para confirmar de vez, desative temporariamente o LazyLoad e recarregue: se o widget voltar, o conflito e do lazy load.
```
Painel WP -> WP Rocket -> Media -> desmarque 'Enable for images'
Painel WP -> WP Rocket -> aba topo -> Clear and preload cache
Abra a página em aba anonima e inspecione a imagem (F12 -> Elements)
```
Exclua as imagens do Happy Addons do LazyLoad por classe: Em vez de desligar o LazyLoad do site inteiro, exclua apenas os widgets do Happy Addons. No campo 'Excluded images or iframes' da aba Media, adicione as classes dos widgets afetados, uma por linha. O WP Rocket não aplica o lazy load a elementos cujo HTML contenha esses termos.
```
Painel WP -> WP Rocket -> Media -> Excluded images or iframes
ha-image-grid
ha-slider
ha-card
Salve e limpe o cache (Clear and preload cache)
```
Marque os elementos criticos com o atributo de pulo do lazy load: Para um slider ou imagem de fundo específico, adicione o atributo data-skip-lazy (ou a classe no-lazyload) ao elemento via CSS Class do widget no Elementor. O WP Rocket respeita esse marcador e não adia o carregamento daquela imagem.
```
Elementor -> selecione o widget -> Advanced -> CSS Classes -> adicione 'no-lazyload'
Painel WP -> WP Rocket -> Media -> Excluded images or iframes -> adicione 'no-lazyload'
Salve a página e limpe o cache do WP Rocket
```
Trate o LazyLoad de imagens de fundo: Se o problema for em seções com Background Image, lembre que o WP Rocket so adia fundos quando o add-on de background esta ativo e usa a classe rocket-lazyload com data-bg. Desative o lazy load de fundo das seções do Happy Addons ou exclua o seletor da seção no mesmo campo Excluded images or iframes.
```
Painel WP -> WP Rocket -> Media -> verifique o lazy load de imagens de fundo
Adicione o seletor da seção (ex.: 'elementor-section') em Excluded images or iframes
Limpe o cache e revalide a seção no frontend
```
Verifique o Delay JavaScript Execution: Se o widget so quebra com o cache cheio e o LazyLoad já foi excluido, o culpado pode ser o Delay JavaScript Execution adiando o script do Happy Addons. Adicione o handle do script do Happy Addons a lista de exclusão de delay de JS para que ele rode no carregamento.
```
Painel WP -> WP Rocket -> File Optimization -> Delay JavaScript Execution
Em 'Excluded JavaScript Files' adicione 'happy-addons'
Salve e limpe o cache (Clear and preload cache)
```

PHP

<?php
// Exclui imagens dos widgets do Happy Addons do LazyLoad do WP Rocket.
// As classes informadas (uma por entrada) nao recebem data-lazy-src.
add_filter( 'rocket_lazyload_excluded_attributes', 'full_happy_addons_skip_lazyload' );
function full_happy_addons_skip_lazyload( $excluded ) {
    $excluded[] = 'class="ha-image-grid';
    $excluded[] = 'class="ha-slider';
    $excluded[] = 'class="ha-card';
    $excluded[] = 'data-skip-lazy';
    return $excluded;
}

// Tambem libera as imagens de fundo (rocket-lazyload) das secoes do Happy Addons.
add_filter( 'rocket_lazyload_excluded_src', 'full_happy_addons_skip_bg_lazyload' );
function full_happy_addons_skip_bg_lazyload( $excluded ) {
    $excluded[] = 'ha-section-bg';
    return $excluded;
}

Perguntas frequentes

Por que as imagens do Happy Addons somem so com o WP Rocket ativo

Porque o LazyLoad do WP Rocket reescreve o atributo src das imagens para data-lazy-src e coloca um placeholder SVG no lugar. O script do widget do Happy Addons inicializa antes de a imagem real carregar e renderiza vazio. No editor do Elementor o cache não roda, por isso ali aparece normal.

Como excluir um widget do Happy Addons do lazy load do WP Rocket

Va em WP Rocket, aba Media, no campo Excluded images or iframes e adicione a classe CSS do widget afetado, uma por linha (por exemplo ha-image-grid ou ha-slider). O WP Rocket deixa de aplicar o lazy load a qualquer elemento cujo HTML contenha esse termo. Depois limpe o cache.

Preciso desativar o LazyLoad do site inteiro para resolver

Não. Desligar o LazyLoad do site todo resolve o sintoma, mas perde o ganho de performance nas demais imagens. O recomendado e excluir apenas os widgets do Happy Addons que quebram, pela classe CSS ou pelo atributo de pulo do lazy load, mantendo o LazyLoad ativo no resto da página.

O conflito também afeta as imagens de fundo das seções

Sim. O WP Rocket adia imagens de fundo aplicando a classe rocket-lazyload e movendo a URL para o atributo data-bg, segundo a documentação oficial. Seções do Happy Addons com Background Image podem ficar em branco até o scroll. Exclua o seletor da seção no mesmo campo Excluded images or iframes.

Como sei se o problema e do lazy load e não do delay de JavaScript

Inspecione a imagem quebrada. Se o src virou data-lazy-src com placeholder SVG, e o LazyLoad. Se a imagem esta certa no código mas o widget so monta após uma interacao, suspeite do Delay JavaScript Execution e exclua o script do Happy Addons da lista de delay.

A classe no-lazyload funciona para qualquer imagem do Happy Addons

Funciona quando você adiciona o termo no-lazyload tanto no campo Excluded images or iframes do WP Rocket quanto no elemento. O WP Rocket so pula o lazy load de elementos cujo HTML casa com algum termo da lista de exclusão, entao o marcador e a lista precisam combinar.

Limpar o cache do WP Rocket sozinho resolve o conflito

Não de forma permanente. Limpar o cache so regenera os arquivos com as mesmas regras de lazy load. O conflito volta no próximo carregamento. A correção duradoura e excluir os widgets de imagem do Happy Addons do LazyLoad e so depois limpar e pre-carregar o cache.

Atenção

Como corrigir o widget Woo Product Grid no Essential Addons

O erro do Woo Product Grid no Essential Addons acontece quando o widget fica vazio, mostra a mensagem de nenhum produto encontrado ou quebra no Elementor porque o WooCommerce esta inativo, não ha produtos publicados que casem com a consulta, ou o elemento WooCommerce do Essential Addons não esta habilitado.

Grave

Como corrigir o erro de licenca no Essential Addons for Elementor

O erro de licenca do Essential Addons acontece quando a chave Pro não valida no servidor do WPDeveloper, e os widgets Pro deixam de aparecer no Elementor. As causas comuns são chave incorreta, limite de sites atingido, assinatura expirada ou o servidor sem conexão de saida com store.wpdeveloper.com.

Grave

Como corrigir o erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada

O erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada acontece quando o servidor não atende aos requisitos do plugin: a versão do PHP esta abaixo de 7.4, a memória reservada por requisicao e baixa, ou o plugin base gratuito Elementor não esta ativo. O WordPress aborta a ativacao e mostra um erro fatal.

Atenção

Como corrigir o erro de Export/Import com JSON corrompido no ACF PRO

O erro de export/import com JSON corrompido no ACF PRO ocorre quando o arquivo .json do grupo de campos chega malformado, sem a chave key esperada ou com modified inconsistente, fazendo o ACF recusar a importação ou não exibir a sincronizacao.

Atenção

Como corrigir o layout quebrado da Timeline no Ultimate Addons no WordPress

A Timeline do Ultimate Addons fica com layout quebrado quando o CSS do widget não carrega na página, geralmente por cache ou minificacao agressiva, pelo carregamento condicional de assets da UAE, ou por um conflito de CSS do tema sobre a estrutura de colunas do widget.

Grave

Como corrigir o Elementor Pro Form que não envia e-mails

O formulário do Elementor Pro não envia e-mail quando o WordPress dispara o aviso pela função mail() do PHP sem um servidor SMTP autenticado, quando a ação Email não foi adicionada em Actions After Submit, ou quando o campo From Email usa um domínio diferente do site.

Setores

Extensões

Integrações

Como corrigir o conflito de lazy load entre Happy Addons e WP Rocket no WordPress

O que é conflito de lazy load entre Happy Addons e WP Rocket?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o widget Woo Product Grid no Essential Addons

Como corrigir o erro de licenca no Essential Addons for Elementor

Como corrigir o erro de PHP ao ativar o Elementor Pro em hospedagem compartilhada

Como corrigir o erro de Export/Import com JSON corrompido no ACF PRO

Como corrigir o layout quebrado da Timeline no Ultimate Addons no WordPress

Como corrigir o Elementor Pro Form que não envia e-mails

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