Lazy loading de imagens — Otimização automática com WordPress
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',
]);