Lazy loading de imagens — Otimização automática com WordPress

Time Full Services Time Full Services
Tipo Performance
Nome do erro Lazy loading de imagens — Otimização automática com WordPress
Severidade Informativo
Desde WordPress 5.5
Descrição Desde o WordPress 5.5, imagens no conteúdo recebem loading="lazy" automaticamente. Entender como controlar esse comportamento é essencial para performance.

Causa

Carregar todas as imagens da página ao mesmo tempo aumenta o tempo de carregamento inicial e o consumo de banda, especialmente em páginas longas com muitas imagens.

Como resolver

Para imagens acima da dobra (above the fold), remova o lazy loading para melhorar o LCP. Para imagens críticas, adicione fetchpriority="high". Para demais, mantenha o padrão.

PHP
<?php
// Remover lazy loading da imagem destacada (above the fold)
add_filter('wp_lazy_loading_enabled', function (bool $default, string $tag_name, string $context): bool {
    if ($tag_name === 'img' && $context === 'the_post_thumbnail' && is_singular()) {
        return false; // desativa para thumbnail em single
    }
    return $default;
}, 10, 3);

// Adicionar fetchpriority="high" ao thumbnail principal
add_filter('wp_get_attachment_image_attributes', function (array $attr, WP_Post $attachment, $size): array {
    if (is_singular() && has_post_thumbnail() && get_post_thumbnail_id() === $attachment->ID) {
        $attr['fetchpriority'] = 'high';
        unset($attr['loading']); // remove lazy loading
    }
    return $attr;
}, 10, 3);

// Imagem com lazy loading explícito no PHP
$html = wp_get_attachment_image(123, 'large', false, [
    'loading'      => 'lazy',
    'decoding'     => 'async',
    'fetchpriority' => 'low',
]);

Seja PRO.

Tenha acesso a snippets de código premium — PHP, JavaScript, CSS e HTML prontos para usar em seus projetos.

Conhecer o plano Pro →