Lazy loading em WordPress: imagens e vídeos para melhor performance

Lazy loading é uma técnica que adia o carregamento de imagens e vídeos até estes estarem prestes a aparecer no viewport do utilizador. Reduz o tempo de carregamento inicial da página, poupa dados móveis e melhora métricas de performance. Desde o WordPress 5.5, está ativo por defeito — mas há nuances importantes que afetam o LCP negativamente se não forem geridas corretamente.

Como funciona o lazy loading nativo em WordPress

Desde WordPress 5.5 (agosto de 2020), o WordPress adiciona automaticamente o atributo loading="lazy" a todas as imagens geradas pela função wp_get_attachment_image() e similares. O browser suporta lazy loading nativo sem JavaScript adicional em todos os browsers modernos.

O comportamento padrão: imagens são carregadas apenas quando o utilizador faz scroll e a imagem está a ~1200px do viewport (depende do browser). Isto reduz significativamente o número de imagens carregadas na carga inicial da página, especialmente em páginas longas.

O problema do lazy loading e o LCP

Aqui está a nuance crítica que a maioria dos guias ignora: a imagem hero ou a imagem principal above the fold nunca deve ter lazy loading.

O LCP (Largest Contentful Paint) mede o tempo que a maior imagem visível no viewport demora a carregar. Se essa imagem tiver loading="lazy", o browser atrasa a sua descoberta e carregamento, aumentando o LCP — exatamente o oposto do pretendido.

O WordPress 6.3 introduziu fetchpriority="high" para a primeira imagem da página (mais provável de ser o LCP), mas nem sempre deteta corretamente qual é a imagem LCP, especialmente em temas com estruturas personalizadas.

Como corrigir: desativar lazy loading na imagem hero

No tema, ao chamar a imagem hero, adicione explicitamente:

echo wp_get_attachment_image(
    $hero_image_id,
    'full',
    false,
    ['loading' => 'eager', 'fetchpriority' => 'high']
);

Se usar Elementor ou outro page builder, procure a opção "Loading" nas definições da widget de imagem e defina como "Eager".

Lazy loading de vídeos do YouTube e Vimeo

Vídeos embebidos do YouTube são pesadíssimos na carga inicial — um único embed do YouTube adiciona ~500KB de JavaScript ao carregamento da página. A solução: usar uma fachada (facade) — mostrar uma imagem estática do thumbnail do vídeo e carregar o iframe apenas quando o utilizador clica para reproduzir.

Plugins para lazy loading de vídeos

• Embed Privacy: substitui embeds por placeholders com consentimento do utilizador (GDPR-friendly)
• WP YouTube Lyte: fachada leve para vídeos YouTube
• Lite YouTube Embed (via script manual): web component open-source de Paul Irish — a opção mais leve e performante

Para sites com poucos vídeos, a implementação manual do lite-youtube-embed é preferível a adicionar um plugin apenas para isso.

Lazy loading de imagens em page builders

Elementor

O Elementor tem lazy loading próprio que pode entrar em conflito com o do WordPress. Nas definições do Elementor → Performance, verifique as opções de lazy loading e certifique-se que não está a duplicar o comportamento. A imagem de hero no Elementor deve ter "Loading Effect" definido como "None" para garantir carregamento imediato.

WooCommerce e imagens de produto

Nas páginas de arquivo (loja, categorias), as imagens de produto acima do fold não devem ter lazy loading — o utilizador vê-as imediatamente. O WooCommerce não faz esta distinção automaticamente; pode ser necessário filtro personalizado:

add_filter('wp_lazy_loading_enabled', function($default, $tag_name, $context) {
    if ($context === 'woocommerce_archive' && is_shop()) {
        // lógica para primeiros N produtos
    }
    return $default;
}, 10, 3);

Verificar se lazy loading está a funcionar

No Chrome DevTools → Network → Filter "img": veja se imagens abaixo do fold têm status "pending" durante a carga inicial e carregam apenas com scroll. As imagens com loading="eager" devem aparecer na carga inicial.

No Lighthouse (Chrome DevTools → Lighthouse), a auditoria "Defer offscreen images" indica se ainda há imagens below-the-fold a carregar sem lazy loading.

Preload de imagens críticas

Além de diferir imagens não-críticas, pode acelerar as críticas com preload. Para a imagem LCP, adicione ao <head>:

<link rel="preload" as="image" href="/path/to/hero-image.webp" fetchpriority="high">

Isto diz ao browser para iniciar o download da imagem imediatamente, antes de processar o resto do HTML. Combinado com o formato WebP (ver o guia de otimização de imagens em WordPress), pode reduzir o LCP em 30-50%.