Se o seu site WordPress carrega dezenas de imagens em cada página, você está desperdiçando largura de banda e prejudicando a experiência do usuário. A técnica de lazy loading resolve esse problema de forma elegante: as imagens são carregadas apenas quando o visitante rola a página até elas.
Neste guia, vamos explorar tudo sobre lazy load no WordPress, desde o recurso nativo até plugins avançados, passando por iframes, vídeos, imagens de fundo em CSS e o impacto direto nos Core Web Vitals.
O Que é Lazy Load?
Lazy load (carregamento preguiçoso) é uma técnica de otimização que adia o carregamento de recursos não essenciais no momento inicial da página. Em vez de carregar todas as imagens de uma vez, o navegador carrega apenas as que estão visíveis na tela. Conforme o usuário rola a página, as demais imagens vão sendo carregadas sob demanda.
O conceito é simples: por que carregar uma imagem que está no rodapé da página se o visitante ainda nem passou do primeiro parágrafo?
Por Que Usar Lazy Load?
O lazy load traz benefícios concretos para o desempenho do site:
Menos requisições HTTP
Quando uma página tem 30 imagens, o navegador precisa fazer 30 requisições HTTP só para buscar as imagens. Com lazy load, apenas as imagens acima da dobra (above the fold) são carregadas inicialmente. Isso pode reduzir as requisições iniciais de 30 para 3 ou 4.
Menor consumo de largura de banda
Nem todo visitante rola até o final da página. Com lazy load, o visitante consome apenas a banda necessária para as imagens que realmente visualizou. Em sites com muitas imagens, a economia pode chegar a 50% ou mais.
Carregamento inicial mais rápido
Com menos recursos para baixar, o navegador renderiza a página visível mais rapidamente. O tempo até o primeiro conteúdo significativo (First Contentful Paint) diminui, e o visitante percebe o site como mais ágil.
Melhor experiência em dispositivos móveis
Usuários em redes 3G ou 4G lentas são os mais beneficiados. Carregar apenas o necessário faz toda a diferença quando a conexão é limitada.
Lazy Load Nativo no WordPress (5.5+)
A partir do WordPress 5.5, lançado em agosto de 2020, o lazy load nativo foi incorporado ao core. O WordPress adiciona automaticamente o atributo loading="lazy" em todas as imagens que possuem os atributos width e height definidos.
Como funciona
Quando você insere uma imagem no editor do WordPress, o HTML gerado inclui automaticamente o atributo de lazy load:
<img src="imagem-exemplo.jpg"
width="800"
height="600"
loading="lazy"
alt="Descrição da imagem">
O atributo loading="lazy" é uma funcionalidade nativa dos navegadores modernos. Chrome, Firefox, Edge e Safari (a partir da versão 15.4) suportam esse atributo sem necessidade de JavaScript adicional.
Verificando se está ativo
Para confirmar que o lazy load nativo está funcionando no seu site, inspecione o código-fonte de qualquer página com imagens. Procure pelo atributo loading="lazy" nas tags <img> .
Você também pode usar o DevTools do Chrome: clique com o botão direito em uma imagem, selecione "Inspecionar" e verifique se o atributo está presente.
Limitações do lazy load nativo
O recurso nativo do WordPress tem algumas limitações:
- Aplica lazy load a todas as imagens, incluindo as acima da dobra (o que pode prejudicar o LCP)
- Não funciona em imagens de fundo via CSS
- Não inclui iframes e vídeos automaticamente
- Não oferece efeitos visuais de transição (fade-in, placeholder)
Por essas razões, muitos desenvolvedores optam por plugins mais completos.
Controlando o Lazy Load Nativo com Código
Se você quer manter o lazy load nativo mas precisa de mais controle, é possível usar filtros do WordPress.
Desabilitar lazy load para imagens específicas
Para remover o lazy load de uma imagem específica, adicione o atributo loading="eager" diretamente no HTML:
<img src="hero-banner.jpg"
width="1200"
height="600"
loading="eager"
alt="Banner principal">
Desabilitar lazy load globalmente via filtro
Se precisar desativar o lazy load nativo completamente (por exemplo, para usar um plugin que faz o próprio gerenciamento), adicione este código ao functions.php do seu tema:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Excluir imagens acima da dobra
O WordPress 6.3 introduziu melhorias nesse sentido, tentando detectar automaticamente as imagens acima da dobra para não aplicar lazy load nelas. Ainda assim, você pode usar o filtro wp_img_tag_add_loading_optimization_attrs para controle mais fino:
add_filter( 'wp_img_tag_add_loading_optimization_attrs', function( $loading_attrs, $image, $context ) {
// Remove lazy load de imagens no cabeçalho
if ( $context === 'the_content' ) {
// Lógica personalizada aqui
}
return $loading_attrs;
}, 10, 3 );
Plugins para Lazy Load Avançado
Quando o lazy load nativo não é suficiente, plugins especializados oferecem recursos avançados.
Smush (by WPMU DEV)
O Smush é um dos plugins de otimização de imagens mais populares do WordPress e inclui um módulo de lazy load integrado.
Recursos principais:
- Lazy load para imagens, iframes e vídeos
- Suporte a imagens de fundo em CSS (inline styles)
- Placeholder em cores ou formato blur
- Exclusão de imagens específicas por classe CSS ou ID
- Compatível com construtores de páginas (Elementor, Divi, WPBakery)
Para ativar, instale o Smush e vá em Smush > Lazy Load . Marque os tipos de mídia que deseja incluir e configure as exclusões.
ShortPixel Adaptive Images
O ShortPixel Adaptive Images vai além do lazy load tradicional. Ele serve as imagens a partir de um CDN próprio e ajusta automaticamente o tamanho da imagem ao dispositivo do visitante.
Recursos principais:
- Lazy load com CDN global
- Redimensionamento automático baseado na viewport
- Conversão para WebP e AVIF on-the-fly
- Sem necessidade de alterar imagens no servidor
a3 Lazy Load
Um plugin leve e focado exclusivamente em lazy load. Ideal para quem quer apenas essa funcionalidade sem recursos extras.
Recursos principais:
- Lazy load para imagens, vídeos e iframes
- Efeito de transição configurável (fade-in, spin)
- Exclusão por classe CSS, ID ou página
- Compatível com WooCommerce
Perfmatters
O Perfmatters é um plugin de performance completo que inclui lazy load entre suas diversas funcionalidades.
Recursos principais:
- Lazy load com exclusão inteligente de imagens acima da dobra
- Suporte a iframes e vídeos do YouTube com thumbnail
- Opção de carregar YouTube com facade (thumbnail estática)
- Integração com cache de CDN
Lazy Load para Iframes e Vídeos
Iframes e vídeos incorporados são ainda mais pesados que imagens. Um único iframe do YouTube pode adicionar mais de 1 MB de recursos à página.
Iframes nativos
A partir do WordPress 5.7, o atributo loading="lazy" também é adicionado automaticamente a iframes. Verifique no código-fonte:
<iframe src="https://www.youtube.com/embed/xxxxx"
loading="lazy"
width="560"
height="315"
title="Título do vídeo">
</iframe>
Facade para vídeos do YouTube
Uma técnica ainda mais eficiente para vídeos do YouTube é usar um facade (fachada). Em vez de carregar o iframe do YouTube, você exibe apenas uma imagem de thumbnail. O iframe real só é carregado quando o visitante clica no botão de play.
Plugins como WP YouTube Lyte e Perfmatters oferecem essa funcionalidade. A economia é significativa: cada embed do YouTube carrega dezenas de scripts e estilos do Google.
Implementação manual com JavaScript
Se preferir uma solução sem plugin para facades de YouTube:
<div class="youtube-facade" data-video-id="SEU_VIDEO_ID">
<img src="https://img.youtube.com/vi/SEU_VIDEO_ID/hqdefault.jpg"
alt="Clique para assistir o vídeo"
loading="lazy">
<button class="play-button" aria-label="Reproduzir vídeo">▶</button>
</div>
<script>
document.querySelectorAll('.youtube-facade').forEach(function(el) {
el.addEventListener('click', function() {
var videoId = this.dataset.videoId;
var iframe = document.createElement('iframe');
iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
iframe.allow = 'autoplay; encrypted-media';
iframe.allowFullscreen = true;
this.replaceWith(iframe);
});
});
</script>
Lazy Load para Imagens de Fundo (CSS)
O atributo loading="lazy" não funciona em imagens de fundo definidas via CSS. Para essas imagens, é necessário usar JavaScript ou uma abordagem diferente.
Usando Intersection Observer API
A solução mais moderna é utilizar a Intersection Observer API para detectar quando o elemento com imagem de fundo entra na viewport:
<div class="secao-com-fundo" data-bg="url('imagem-fundo.jpg')">
Conteúdo da seção
</div>
<style>
.secao-com-fundo {
min-height: 400px;
background-size: cover;
background-position: center;
background-color: #f0f0f0; /* placeholder */
}
</style>
<script>
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var el = entry.target;
el.style.backgroundImage = el.dataset.bg;
observer.unobserve(el);
}
});
}, { rootMargin: '200px' });
document.querySelectorAll('[data-bg]').forEach(function(el) {
observer.observe(el);
});
</script>
Plugins com suporte a background images
O Smush e o a3 Lazy Load oferecem suporte parcial a imagens de fundo, especialmente quando definidas como estilos inline (ex: style="background-image: url(...)" ). Imagens de fundo declaradas em arquivos CSS externos geralmente não são cobertas por plugins de lazy load.
Testando se o Lazy Load Está Funcionando
Depois de configurar o lazy load, é fundamental testar se tudo está funcionando corretamente.
Usando o DevTools do Chrome
- Abra o site no Chrome e pressione F12 para abrir o DevTools
- Vá para a aba Network
- Marque a opção Img para filtrar apenas imagens
- Recarregue a página (Ctrl+Shift+R para limpar cache)
- Observe a lista de imagens carregadas
- Role a página lentamente para baixo
- Novas imagens devem aparecer na lista conforme você rola
Se todas as imagens aparecerem de uma vez no carregamento inicial, o lazy load não está funcionando.
Usando o Lighthouse
O Lighthouse do Chrome inclui uma auditoria específica para lazy load:
- Abra o DevTools (F12)
- Vá para a aba Lighthouse
- Execute uma auditoria de Performance
- Procure pela recomendação "Defer offscreen images"
Se essa recomendação ainda aparece, significa que existem imagens fora da tela que não estão sendo adiadas.
Teste manual simples
Você pode testar rapidamente com a aba Network do DevTools usando limitação de rede:
- Na aba Network, selecione Slow 3G no dropdown de throttling
- Recarregue a página
- Com lazy load ativo, a página deve carregar mais rápido, e as imagens abaixo da dobra devem aparecer com um pequeno atraso conforme você rola
Impacto nos Core Web Vitals
O lazy load tem relação direta com os Core Web Vitals do Google, especialmente o Largest Contentful Paint (LCP).
LCP: cuidado com imagens acima da dobra
O LCP mede o tempo que o maior elemento visível da página leva para renderizar. Em muitos sites, o elemento LCP é uma imagem (banner hero, imagem de destaque).
Regra fundamental: nunca aplique lazy load na imagem que é o elemento LCP. Se a imagem principal do seu site usa loading="lazy" , o navegador vai adiar o carregamento dela, aumentando o tempo do LCP.
Para verificar qual é o elemento LCP do seu site:
- Abra o DevTools do Chrome
- Vá para a aba Performance
- Clique em "Reload" para gravar o carregamento
- Procure pelo marcador "LCP" na timeline
- Clique nele para ver qual elemento foi identificado
CLS: defina largura e altura
O Cumulative Layout Shift (CLS) mede mudanças inesperadas no layout. Imagens sem dimensões definidas podem causar layout shift quando carregam. Sempre defina width e height nas tags de imagem:
<img src="foto.jpg"
width="800"
height="600"
loading="lazy"
alt="Descrição"
style="max-width: 100%; height: auto;">
O WordPress faz isso automaticamente para imagens inseridas pela biblioteca de mídia. Mas imagens adicionadas via HTML personalizado ou construtores de página podem não ter essas dimensões.
FID/INP: impacto no JavaScript
Plugins de lazy load que usam JavaScript pesado podem impactar o First Input Delay (FID) ou o Interaction to Next Paint (INP). Prefira o lazy load nativo do navegador (que não usa JavaScript) sempre que possível. Se usar um plugin, verifique se ele não está adicionando scripts pesados na página.
Lazy Load e SEO
Uma preocupação comum é se o lazy load pode prejudicar o SEO, impedindo que o Google indexe as imagens.
O Google suporta lazy load
O Googlebot renderiza JavaScript e consegue detectar imagens com lazy load. Isso vale tanto para o atributo nativo loading="lazy" quanto para implementações baseadas em Intersection Observer.
O próprio Google recomenda o uso de lazy load como boa prática de performance.
Boas práticas para SEO
Para garantir que as imagens com lazy load sejam indexadas corretamente:
- Use o atributo alt descritivo em todas as imagens
- Inclua as imagens no sitemap de imagens (plugins como Yoast SEO e Rank Math fazem isso automaticamente)
- Evite implementações que dependam de scroll do usuário para gerar o HTML da imagem (o Googlebot rola a página, mas é melhor que o HTML já contenha a tag <img> )
- Teste a renderização da página com a ferramenta de inspeção de URL no Google Search Console
Problemas Comuns e Soluções
Imagens que não aparecem
Causa provável: conflito entre o lazy load nativo do WordPress e um plugin de lazy load. Duas implementações simultâneas podem entrar em conflito.
Solução: se estiver usando um plugin de lazy load, desative o lazy load nativo:
// Adicione ao functions.php add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Conflitos com JavaScript
Causa provável: scripts de slider, lightbox ou galeria que esperam que as imagens estejam carregadas no DOM.
Solução: exclua as imagens dentro de sliders e lightboxes do lazy load. A maioria dos plugins permite excluir por classe CSS. Adicione a classe de exclusão nas imagens do slider.
Imagens com dimensões erradas
Causa provável: imagens sem width e height definidos podem causar layout shift e problemas de renderização.
Solução: sempre defina as dimensões da imagem. Se estiver usando CSS responsivo, mantenha os atributos HTML e use max-width: 100%; height: auto; no CSS.
Lazy load não funciona em Safari antigo
Causa provável: versões do Safari anteriores à 15.4 não suportam o atributo loading="lazy" .
Solução: use um plugin de lazy load com fallback em JavaScript para navegadores que não suportam o atributo nativo.
Boas Práticas para Lazy Load no WordPress
- Não aplique lazy load em imagens acima da dobra. A imagem principal, logo e banner hero devem carregar imediatamente.
- Sempre defina width e height nas imagens para evitar layout shift.
- Use o lazy load nativo como primeira opção. Recorra a plugins apenas quando precisar de funcionalidades extras.
- Exclua imagens de sliders e carrosseis do lazy load para evitar conflitos.
- Otimize as imagens antes de usar lazy load. Lazy load não substitui compressão. Use formatos modernos como WebP e AVIF.
- Teste em diferentes dispositivos e conexões. O comportamento pode variar entre desktop e mobile.
- Monitore os Core Web Vitals após implementar lazy load para garantir que o LCP não foi prejudicado.
- Use um CDN em conjunto com lazy load para servir as imagens de servidores mais próximos do visitante.
Leia Também
Conclusão
O lazy load é uma das otimizações mais simples e eficazes que você pode implementar no WordPress. O recurso nativo do WordPress 5.5+ já cobre a maioria dos casos, mas plugins especializados oferecem controle mais granular para sites com necessidades específicas.
A chave é encontrar o equilíbrio: usar lazy load nas imagens abaixo da dobra, manter as imagens acima da dobra com carregamento imediato e sempre monitorar o impacto nos Core Web Vitals.
Se você quer um site WordPress rápido, com lazy load configurado corretamente e hospedagem otimizada para performance, conheça os planos da HOSTWP . Nossa infraestrutura é preparada para servir seus conteúdos com a máxima velocidade, incluindo CDN integrado, cache avançado e suporte técnico especializado em WordPress. Conheça a HOSTWP e leve a performance do seu site para o próximo nível.