Lazy loading de imagens no WordPress: como corrigir

Tipo Performance & Velocidade

Nome do erro Imagens sem lazy loading EN: Images without lazy loading

Severidade Atenção

Descrição Imagens sem lazy loading no WordPress significam que o navegador baixa todas as imagens da página de uma vez, inclusive as que estão abaixo da dobra. Costuma vir de tema antigo que remove o atributo loading, plugin que desativa o recurso nativo ou imagens inseridas direto no HTML sem o atributo.

O que é imagens sem lazy loading no WordPress?

Imagens sem lazy loading no WordPress são imagens que o navegador carrega imediatamente, mesmo as que o visitante só veria depois de rolar a página. O WordPress adiciona o atributo loading com o valor lazy nativamente desde a versão 5.5, o que faz o navegador adiar o download das imagens fora da tela até elas se aproximarem. Quando esse atributo não é aplicado, todas as imagens competem por banda no primeiro carregamento, o que infla o peso da página, atrasa o conteúdo do topo e piora os Core Web Vitals. As causas costumam estar no tema, em um plugin que desliga o recurso, ou em imagens coladas no HTML sem o atributo.

Como identificar

O PageSpeed Insights aponta a oportunidade “Defer offscreen images” ou “Adiar imagens fora da tela”.
No código-fonte da página, as tags de imagem aparecem sem o atributo loading=”lazy”.
A aba Network do navegador mostra todas as imagens sendo baixadas logo no carregamento, antes de rolar.
A página fica pesada e lenta em posts com muitas imagens, mesmo as que estão bem abaixo da dobra.

Como prevenir

Mantenha o WordPress e o tema atualizados para preservar o atributo loading=”lazy” nativo
Reserve loading=”eager” só para a imagem do topo e deixe o lazy loading nas imagens abaixo da dobra
Audite o PageSpeed Insights após mudanças no tema ou nos plugins de mídia para pegar regressões cedo

Causa

Tema antigo ou customizado que remove ou sobrescreve o atributo loading nativo das imagens do WordPress.
Plugin de performance ou de mídia com a opção de lazy loading desativada ou conflitando com o recurso nativo.
Imagens inseridas direto no HTML do editor ou em um page builder, sem o atributo loading aplicado.
Filtro wp_lazy_loading_enabled desligado por código em functions.php ou em um snippet herdado.
Imagens carregadas via CSS como background, que não recebem lazy loading nativo do navegador.

Como resolver

Confirme onde o lazy loading falta: abra o código-fonte da página e procure as tags de imagem. Identifique quais não têm loading="lazy" e se elas vêm do conteúdo, do tema ou de um page builder, para atacar a origem certa.
Garanta que o recurso nativo está ativo: verifique se nenhum plugin ou snippet desativa o lazy loading nativo. O WordPress aplica loading="lazy" sozinho desde a 5.5; o problema costuma ser algo que o desliga, não a ausência do recurso.
Ajuste o tema ou page builder: se as imagens vêm do tema ou de um builder que não aplica o atributo, atualize o tema ou use a opção de lazy loading do plugin de performance para cobrir essas imagens.
Nunca aplique lazy loading no elemento do topo: a imagem hero ou o maior elemento visível (LCP) deve carregar de imediato com loading="eager". Aplicar lazy nela atrasa o conteúdo principal e piora o LCP.
Meça de novo no PageSpeed: depois das mudanças, rode o PageSpeed Insights e confira na aba Network se as imagens abaixo da dobra deixaram de carregar antes da rolagem.

HTML

<!-- Imagens ABAIXO da dobra: adie o carregamento com loading="lazy" -->
<img src="/wp-content/uploads/galeria-3.webp"
     width="800" height="600"
     loading="lazy" decoding="async"
     alt="Foto da galeria">

<!-- Imagem do TOPO (elemento LCP): NUNCA use lazy aqui -->
<img src="/wp-content/uploads/hero.webp"
     width="1280" height="720"
     loading="eager" fetchpriority="high"
     alt="Banner principal">

Perguntas frequentes

O WordPress aplica lazy loading nas imagens sozinho?

Sim. Desde a versão 5.5 o WordPress adiciona loading="lazy" automaticamente nas imagens do conteúdo. Quando o atributo falta, quase sempre é porque o tema, um page builder ou um plugin desativou ou sobrescreveu o recurso nativo.

Por que minhas imagens carregam todas de uma vez?

Porque elas estão sem o atributo loading="lazy". Sem ele, o navegador baixa todas as imagens no primeiro carregamento, inclusive as abaixo da dobra. Verifique o tema, o page builder e os plugins que podem estar removendo o atributo.

Devo aplicar lazy loading em todas as imagens?

Não. A imagem do topo, em geral o elemento LCP, deve carregar de imediato com loading="eager". Aplicar lazy nela adia o conteúdo principal e piora o LCP. Use lazy loading apenas nas imagens abaixo da dobra.

Lazy loading melhora os Core Web Vitals?

Melhora de forma indireta. Adiar as imagens fora da tela reduz o peso do primeiro carregamento e libera banda para o conteúdo do topo, o que ajuda o LCP. Mas a imagem hero precisa ficar de fora do lazy para não atrasar o elemento principal.

Imagens de fundo em CSS recebem lazy loading?

Não pelo recurso nativo. O loading="lazy" funciona em tags de imagem, não em backgrounds definidos por CSS. Para essas, use técnicas específicas de carregamento sob demanda ou converta o fundo em uma tag de imagem quando fizer sentido.

Preciso de um plugin para ativar o lazy loading?

Nem sempre. O recurso nativo do WordPress cobre as imagens do conteúdo. Um plugin de performance ajuda quando o tema ou o page builder não aplicam o atributo, ou quando você quer estender o lazy loading a iframes e a outros elementos.

Grave

Como corrigir o cache que quebra páginas de quiz entre Tutor LMS e WP Rocket

Quando o cache quiz do Tutor LMS com WP Rocket quebra, o Delay JavaScript Execution segurou o tutor.js até a interacao do aluno, ou o Combine JavaScript trocou a ordem de carga. Excluir os assets do quiz dessas otimizacoes restaura o timer e o envio AJAX das respostas.

Atenção

Como corrigir o erro de permissão ao limpar o banco no WP-Optimize

O erro de permissão no banco do WP-Optimize trava a limpeza quando o usuário MySQL definido no wp-config.php não tem o privilégio que o comando OPTIMIZE TABLE exige para recriar a tabela. O plugin marca cada otimização como falha e o overhead não cai. A correção é conceder o GRANT correto ao usuário do banco.

Atenção

Como corrigir o erro de Critical CSS não gerado no WP Rocket

O erro Critical CSS not generated no WP Rocket ocorre quando a API do plugin não consegue acessar a página para gerar o CSS crítico, retornando mensagens como Invalid response code, cURL error 28 ou Timeout. A causa quase sempre e bloqueio de IP por firewall, Cloudflare Bot Fight Mode ou WP-cron parado.

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.

Grave

Como corrigir o Delay JavaScript do WP Rocket que quebra funções do site

O WP Rocket Delay JavaScript adia a execução de scripts até a primeira interação do usuário. Quando atrasa um script essencial (slider, menu, formulário ou botão), esses elementos param de funcionar até alguém mexer na página. A correção é excluir o script específico do delay, sem desligar a otimização toda.

Grave

Como corrigir funcionalidades quebradas pelo Perfmatters

Funcionalidades quebradas pelo Perfmatters acontecem quando uma otimização do plugin remove ou atrasa um script ou estilo que a página precisava. As causas comuns são o Script Manager desativar um script necessário, o Delay JavaScript adiar o jQuery de um formulário ou slider, e o Remove Unused CSS cortar uma folha de estilo usada.

Setores

Extensões

Integrações

Como corrigir imagens sem lazy loading no WordPress

O que é imagens sem lazy loading no WordPress?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o cache que quebra páginas de quiz entre Tutor LMS e WP Rocket

Como corrigir o erro de permissão ao limpar o banco no WP-Optimize

Como corrigir o erro de Critical CSS não gerado no WP Rocket

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

Como corrigir o Delay JavaScript do WP Rocket que quebra funções do site

Como corrigir funcionalidades quebradas pelo 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