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.

Conteúdo exclusivo para membros Pro

Faça upgrade para acessar este item completo.

// ★ Conteúdo disponível para membros Pro...
// Faça upgrade para acessar este item.

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.

Pro Atenção

Como corrigir o erro de Preload no WP Rocket

O erro de Preload no WP Rocket acontece quando o robo que gera o cache antecipado não consegue percorrer as URLs do site: a fila nunca esvazia ou nem comeca. O resultado e um site com cache vazio, que so fica rápido para o segundo visitante de cada página, anulando o ganho do preload.

Pro Grave

Como corrigir erros de integração entre WP Rocket e Cloudflare

A integração entre WP Rocket e Cloudflare falha quando as duas camadas otimizam os mesmos arquivos ou quando o add-on não autentica. O resultado é JavaScript quebrado, CSS sem aplicar ou cache que não limpa.

Pro Grave

Como corrigir a página de login inacessivel pelo Perfmatters

A página de login inacessivel pelo Perfmatters login url acontece quando o recurso Change Login URL renomeia a entrada do painel e você perde a URL nova, já que o /wp-admin e o /wp-login.php passam a responder com a mensagem This has been disabled. Sem a string personalizada salva, não ha como autenticar pela rota padrão.

Pro Crítico

Como recuperar o site após a otimização de banco do WP Rocket

Database Optimization do WP Rocket é a limpeza de banco que apaga revisões, rascunhos, comentários de spam e transientes de forma permanente. A própria documentação avisa que, depois de executada, não há como desfazer, então conteúdo apagado por engano ou tabelas que quebraram só voltam com a restauração de um backup.

Pro Atenção

Como corrigir o erro de carregamento de fontes no WordPress

O font loading lento no WordPress acontece quando as fontes web (woff2, woff ou ttf) demoram a baixar e o navegador segura o texto até a fonte chegar. O resultado e texto invisivel por um instante (FOIT) ou uma troca visivel de fonte (FOUT), o que atrasa a primeira pintura e eleva o LCP da página.

Pro Grave

Como corrigir render-blocking resources no WordPress

Render-blocking resources no WordPress são arquivos de CSS e JavaScript carregados no início da página que o navegador precisa baixar e processar antes de pintar qualquer conteúdo. Costumam vir de folhas de estilo e scripts enfileirados no head por tema e plugins, que atrasam a primeira pintura e elevam o LCP.

Setores

Extensões

Integrações

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

Conteúdo exclusivo para membros Pro

Perguntas frequentes

Itens relacionados

Como corrigir o erro de Preload no WP Rocket

Como corrigir erros de integração entre WP Rocket e Cloudflare

Como corrigir a página de login inacessivel pelo Perfmatters

Como recuperar o site após a otimização de banco do WP Rocket

Como corrigir o erro de carregamento de fontes no WordPress

Como corrigir render-blocking resources no WordPress

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