O lazy load adia o carregamento de imagens fora da tela até o usuário rolar a página. Segundo a web.dev (2024), um LCP bom fica em 2,5 s ou menos no percentil 75. Aplicado à imagem da dobra, porém, o lazy load atrasa essa métrica em vez de melhorar. O WordPress já traz lazy load nativo desde a versão 5.5.

O lazy load no WordPress é a técnica que segura o download de imagens e iframes até que eles cheguem perto da área visível do navegador. Em vez de baixar tudo de uma vez, a página carrega só o que aparece na primeira tela e adia o resto. Isso reduz o peso inicial, acelera a primeira pintura e economiza dados em conexões móveis. Desde a versão 5.5, o core do WordPress aplica o atributo loading="lazy" automaticamente, então boa parte dos sites já usa lazy load sem saber. O detalhe que pega é a imagem da dobra, que não deveria ser adiada. Este guia mostra como ativar, validar e corrigir o lazy load em 4 passos, com link direto para o hub de conteúdos de performance WordPress.

Primeiros passos: Visão geral do lazy load no WordPress

O lazy load no WordPress entrega ganho de velocidade quando há muitas imagens abaixo da dobra. Em páginas longas, adiar esses downloads costuma cortar dezenas de requisições no primeiro carregamento e reduzir o peso da tela inicial em centenas de KB.

O atributo loading="lazy" virou padrão do navegador e o core o injeta em cada desde a versão 5.5, segundo a documentação oficial. A tabela abaixo resume as três rotas antes de escolher a sua.

A regra de ouro é simples: confie no nativo e só adicione plugin para o que ele não cobre. Para entender o impacto no ranking, vale revisar o guia de Core Web Vitals no WordPress.

Por que o lazy load mal configurado piora o LCP

O lazy load aplicado à imagem da dobra atrasa o LCP em vez de melhorar, e esse é o erro número um que chega no suporte da FULL. O Largest Contentful Paint mede quando o maior elemento visível termina de pintar; se essa imagem está marcada como loading="lazy", o navegador a trata como baixa prioridade e adia o download.

O resultado é uma métrica de 2,5 s saltando para 4 s ou mais no PageSpeed Insights. O WordPress 5.9 tentou resolver isso pulando a primeira imagem do conteúdo, mas a heurística falha quando o tema renderiza o logo ou um banner full-width antes do bloco principal. Nesses casos, o recurso precisa ser desligado manualmente na imagem crítica. Quem quer aprofundar a métrica encontra o material sobre LCP, parte dos Core Web Vitals.

Passo a passo: Como ativar e ajustar o lazy load no WordPress

O lazy load no WordPress já está ativo por padrão, então o trabalho real é validar e corrigir em quatro etapas que levam cerca de 15 minutos. Você vai confirmar o atributo no HTML, medir o LCP, tratar a imagem da dobra e estender o recurso para o que o core ignora, tudo sem tocar no banco de dados.

Legenda: o atributo loading=”lazy” no HTML confirma que o core do WordPress já está adiando a imagem.

Passo 1: Confirme o atributo loading no HTML

Abra qualquer página com imagens, clique com o botão direito em uma foto abaixo da dobra e selecione “Inspecionar”. Procure por loading="lazy" na tag . Se ele aparece, o lazy load nativo está funcionando e você não precisa de plugin para imagens comuns. Em sites com WordPress acima da versão 5.5 e PHP 8.2, esse atributo é injetado em tempo de renderização, sem cache adicional.

Passo 2: Meça o LCP no PageSpeed insights

Rode a URL no PageSpeed Insights e olhe a métrica LCP no relatório de campo. Um valor acima de 2,5 s indica que o maior elemento demora a pintar. Se o elemento apontado for uma imagem do topo com loading="lazy", você achou o gargalo. Anote o seletor da imagem para tratá-la no passo seguinte, sem mexer no resto da página.

Passo 3: Force eager na imagem da dobra

Adicione um filtro no functions.php ou use o painel de um plugin para marcar a imagem crítica como loading="eager". O código abaixo desliga o lazy load da imagem destacada, que costuma ser a LCP:

add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment ) {
    if ( is_singular() && has_post_thumbnail() && get_post_thumbnail_id() === $attachment->ID ) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 2 );

Passo 4: Estenda o lazy load para vídeos e iframes

Instale um plugin para cobrir o que o core não trata: vídeos do YouTube, mapas e background images de CSS. O Perfmatters e o a3 Lazy Load fazem isso por elemento. Ative só os tipos que o seu site usa e teste de novo no PageSpeed, mantendo o controle de minificação separado.

Quais plugins de lazy load realmente importam no WordPress

O plugin só vale quando o nativo deixa lacunas, e três nomes resolvem a maior parte dos casos: Perfmatters, WP Rocket e a3 Lazy Load. Os dois primeiros estão no bundle da FULL; o terceiro é gratuito e cobre vídeos. A diferença entre eles está na granularidade de controle sobre cada tipo de elemento.

O Perfmatters compete por controle fino, permitindo adiar background images e iframes por tipo. O WP Rocket integra o recurso ao cache e à CDN no mesmo painel, o que evita conflito de configuração. A escolha depende do que já roda no site, porque empilhar dois plugins sobre o core costuma gerar placeholder duplicado e layout shift. Para a parte de imagens em si, o guia de otimização de imagens no WordPress e o tutorial de arquivos WebP complementam este material e fecham o ciclo de peso da página.

Quando o lazy load não vale a pena no WordPress

O lazy load não vale a pena em páginas curtas onde quase tudo já está na primeira tela. Adiar imagens que aparecem de imediato não economiza nada e ainda adiciona uma camada de JavaScript desnecessária quando feito por plugin, então landing pages de uma dobra e sites com poucas imagens ganham pouco.

Há também o risco de Cumulative Layout Shift: se a imagem não tem width e height definidos e o tema não usa aspect-ratio, o recurso deixa um buraco que empurra o layout quando a foto chega, levando o CLS acima de 0,1. Nesses cenários, manter o carregamento normal e investir em redução de TTFB entrega mais resultado. A maioria dos casos de “site ficou estranho depois do plugin de velocidade” que chega no suporte é justamente adiamento agressivo sem dimensões de imagem.

• Se o site tem páginas longas com muitas imagens → confie no recurso nativo e force eager só na imagem da dobra.
• Se há vídeos do YouTube e mapas pesados → adicione um plugin como Perfmatters só para iframes.
• Se as imagens não têm width/height → evite plugin de lazy load e corrija as dimensões antes.
• Se a página é uma landing de uma dobra → desative o lazy load e priorize TTFB e cache.

Faça o lazy load render parte de um WordPress rápido com a FULL

Configurar o lazy load é um passo dentro de um conjunto maior de otimização, e é aí que a gente vê no suporte da FULL que ter os plugins certos sob um único contrato economiza tempo. Em vez de caçar licença avulsa de cada ferramenta de performance, o caminho é centralizar tudo num painel só.

O plano PRO da FULL custa R$849 e reúne Perfmatters, WP Rocket e outros 15 plugins premium, o que dá cerca de R$85 por site quando você gerencia uma carteira, com tudo ativado em um clique. Quem cuida de vários sites pode conhecer os planos da FULL e centralizar adiamento de imagens, cache e CDN no mesmo lugar. Para aprofundar só o controle por elemento, a página do Perfmatters detalha cada opção disponível no recurso e quando vale ligar cada uma.

Perguntas frequentes sobre lazy load no WordPress

Próximos passos para um WordPress mais leve

O lazy load no WordPress é uma vitória rápida quando você confia no nativo do core, força eager na imagem da dobra e usa plugin só para o que o WordPress 5.5 não cobre. O caminho prático é validar o atributo no HTML, medir o LCP no PageSpeed Insights e corrigir a imagem crítica antes de pensar em qualquer ferramenta paga. A partir daí, lazy load entra no mesmo conjunto que cache, CDN e otimização de imagens dentro de uma estratégia única de performance. Para continuar aprendendo, o FULL Academy reúne tutoriais, guias e reviews de WordPress em um só lugar, e o guia de como aplicar lazy load em imagens e vídeos complementa este material com exemplos práticos.