--- title: "Como corrigir o Lazy Load do WP Rocket em imagens do Elementor" url: https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/ date: 2026-06-17 author: "Clayton Margiotti" --- # Como corrigir o Lazy Load do WP Rocket em imagens do Elementor ## 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 Erros relacionados - [Como corrigir conflitos de cache entre WP Rocket e Elementor](https://full.services/wp-fixer/corrigir-conflito-cache-wp-rocket-elementor/) - [Como corrigir o conflito entre Elementor e WP Rocket no WordPress](https://full.services/wp-fixer/corrigir-conflito-elementor-wp-rocket/) - [Como corrigir o lazy load de vídeos do YouTube no WP Rocket](https://full.services/wp-fixer/corrigir-lazy-load-videos-youtube-wp-rocket/) --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services/", "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023", "Gold Medal - The WP Weekly Awards 2024" ], "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "TechArticle", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#article", "headline": "Como corrigir o Lazy Load do WP Rocket em imagens do Elementor", "url": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/", "inLanguage": "pt-BR", "datePublished": "2026-06-17T12:39:30-03:00", "dateModified": "2026-06-17T12:39:30-03:00", "author": { "@id": "https://full.services/#org" }, "publisher": { "@id": "https://full.services/#org" }, "isAccessibleForFree": false, "about": [ { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, { "@type": "Thing", "name": "Performance & Velocidade" } ], "mentions": { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/" }, "wordCount": 928, "description": "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.", "articleSection": "Performance & Velocidade", "keywords": "desativar lazy load wp rocket por imagem, excluir imagem do lazyload wp rocket, imagem de fundo elementor nao aparece com wp rocket, lazy load wp rocket nao carrega imagem elementor, wp rocket lazyload imagem em branco elementor", "proficiencyLevel": "Intermediate", "citation": { "@type": "CreativeWork", "url": "https://docs.wp-rocket.me/article/1141-using-lazyload", "name": "WP Rocket — Using LazyLoad" }, "mainEntity": { "@type": "SoftwareSourceCode", "name": "Como corrigir o Lazy Load do WP Rocket em imagens do Elementor", "programmingLanguage": "PHP", "codeRepository": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/", "isAccessibleForFree": false } }, { "@type": "FAQPage", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq", "isPartOf": { "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#article" }, "isAccessibleForFree": true, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q1", "name": "Por que as imagens do Elementor somem so depois de ativar o WP Rocket?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q2", "name": "Desligar o LazyLoad inteiro resolve o conflito com o Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q3", "name": "O que devo colocar no campo Excluded images or iframes do WP Rocket?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q4", "name": "As imagens de fundo das seções do Elementor precisam de configuração separada?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q5", "name": "Sliders e carrosseis do Elementor mostram so o primeiro slide; como corrigir?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q6", "name": "Excluir imagens do LazyLoad prejudica a nota do PageSpeed?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-lazyload-wp-rocket-elementor/#faq-q7", "name": "Preciso editar código para corrigir o LazyLoad do WP Rocket no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } } ] } ] } ```