GereatePress é um tema WordPress muito leve e relativamente bom para SEO, garantindo um baixo consumo de recursos e um código muito flexível. No entanto, ele me deu algumas dores de cabeça para a otimização do LCP no celular para a imagem em destaque. Esta imagem representativa gera um LCP muito grande (maior tinta) em PagesPeed Insights, especialmente se no blog você tiver escrituras Java (Adsense, Tag Manager etc.), que pode bloquear a renderização.
No entanto, consegui superar esse problema e conseguir otimizar a imagem em destaque e, finalmente, obter uma pontuação de desempenho de 100% no Mobile e na Desktop.
Otimização LCP no celular para imagem em destaque (Generatepress)
Se você encontrar esse problema e seu site possui uma pontuação de baixo desempenho em dispositivos móveis por causa da imagem representativa, eis o que você precisa fazer para reduzir o LCP.
1. Desative qualquer sistema de cache durante as alterações e testes. Ele desativa o cache no nível do servidor (fastcgi, redis, etc.) e em módulos (foguete WP, super cache WP, etc.).
2. Instale e ativar o módulo Regenerar miniaturas ou qualquer outro módulo capaz de regenerar suas imagens. Mesmo que pareça não ter sido atualizado há algum tempo, eu o usei.
3. Certifique -se de saber quais são as dimensões exatas na página (na área de trabalho) da imagem representativa (imagem em destaque). Para descobrir mais fácil, você pode usar a ferramenta de captura de tela no Mac (ou Windows) e selecionar exatamente a região onde está a imagem. Na borda da seleção, você mostrará exatamente qual é a largura em sua altura.
4. Verifique se todas as imagens originais têm o mesmo tamanho, especialmente a largura-quando você as carrega.
No meu exemplo, tenho a imagem para o tamanho máximo de 1200 × 677 pixels.
5. Vá para as configurações de mídia do WordPress (Configurações - Mídia) e define as dimensões específicas do seu blog (tamanho completo, tamanho médio, miniatura).
No meu caso, tenho: 1200 × 677 (grande), 745 × 420 (média), 510 × 288 (miniatura).
6. Abra o arquivo funções.php do tema e adicione o seguinte código:
// START Fix LCP Featured Image
// Define dimensions for featured images
add_image_size('desktop-featured', 745, 420, true); // Standard desktop size
add_image_size('mobile-featured', 400, 226, true); // Standard mobile size
add_image_size('mobile-featured-2x', 800, 451, true); // Retina size (2x)
// Set the image size for mobile and desktop
add_filter('generate_page_header_default_size', function($size) {
if (is_single()) {
return wp_is_mobile() ? 'mobile-featured' : 'desktop-featured';
}
return $size;
}, 20);
// Adjust image attributes (srcset, sizes, width, height)
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
if (has_post_thumbnail() && $attachment->ID === get_post_thumbnail_id() && is_single()) {
if (wp_is_mobile()) {
// Images for mobile (1x and 2x)
$image1x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured');
$image2x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured-2x');
if ($image1x) {
$attr['src'] = $image1x[0]; // Force src to 400x226
$attr['width'] = $image1x[1];
$attr['height'] = $image1x[2];
}
// Set srcset for high-density displays
$srcset = [];
if ($image1x) $srcset[] = $image1x[0] . ' 400w';
if ($image2x) $srcset[] = $image2x[0] . ' 800w';
$attr['srcset'] = implode(', ', $srcset);
$attr['sizes'] = '(max-width: 400px) 100vw, 400px';
} else {
// Standard image for desktop
$image = wp_get_attachment_image_src($attachment->ID, 'desktop-featured');
if ($image) {
$attr['src'] = $image[0]; // Force src to 745x420
$attr['width'] = $image[1];
$attr['height'] = $image[2];
// Set srcset for desktop (without Retina)
$srcset = [];
if ($image) $srcset[] = $image[0] . ' 745w';
$attr['srcset'] = implode(', ', $srcset);
$attr['sizes'] = '(max-width: 745px) 100vw, 745px';
}
}
}
return $attr;
}, 20, 3);
// Remove the link around the image (if necessary)
add_filter('generate_featured_image_output', function($output) {
if (is_single()) {
$output = preg_replace('/<a href="[^"]*">/', '', $output);
$output = str_replace('</a>', '', $output);
}
return $output;
});
// END Fix LCP Featured ImageMudar "add_image_size('desktop-featured', 745, 420, true);"Com as dimensões da sua imagem representativa, obtida do ponto 4. Além disso, ajuste o restante do código onde essas dimensões aparecem. Por exemplo".$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Salva mudanças.
7. Vá para ferramentas no WordPress (ferramentas) - regenere as miniaturas.
No fundo deve aparecer, seus novos valores adicionados acima:
- Rumado de desktop:745 × 420 pixels (corte no ajuste)
- Mobile-Featured:400 × 226 pixels (corte no ajuste)
- Móvel-2x-2x:800 × 451 pixels (corte no ajuste)
Se esses valores aparecerem, escolha regenerar miniaturas apenas para imagens representativas (somente imagens em destaque).
8. Vá para as configurações do tema e escolha o tamanho médio para "Imagem em destaque" (GereatePress).
Após o término da regeneração das imagens, o problema do LCP na imagem móvel em destaque deve ser resolvido.
Você só precisa testar o Chrome (Lighthouse) e em PagesPeed Insights Para garantir que tudo funcione como você deseja e o Big LCP foi removido.
Como complemento, você pode adicionar coordenadas para telas de desktop retina, começando com "add_image_size('desktop-featured', 1490, 840, true);"E concluindo as funções no código.
Relacionado: Links do not have a discernible name. Lighthouse Fix
Se você não lidar com o problema do LCP no celular para obter uma imagem em destaque (especialmente para GereatePress), deixe -me comentar aqui.
