GeneratePress es un tema de WordPress muy ligero y relativamente bueno para SEO, asegurando un bajo consumo de recursos y un código muy flexible. Sin embargo, me dio algunos dolores de cabeza para la optimización de LCP en Mobile para la imagen destacada. Esta imagen representativa genera un LCP muy grande (pintura más grande) en PagesPeed Insights, especialmente si en el blog tiene las Escrituras de Java (AdSense, Tag Manager, etc.), lo que puede bloquear la representación.
Sin embargo, logré superar este problema y tener éxito en optimizar la imagen destacada, y finalmente obtener un puntaje de rendimiento del 100% en dispositivos móviles y de escritorio.
Optimización LCP en dispositivos móviles para una imagen destacada (GenerePress)
Si encuentra este problema y su sitio web tiene una puntuación de bajo rendimiento en los dispositivos móviles debido a la imagen representativa, esto es lo que debe hacer para reducir el LCP.
1. Deshabilite cualquier sistema de caché durante los cambios y las pruebas. Desactiva el caché tanto a nivel de servidor (FastCGI, Redis, etc.) como en los módulos (WP Rocket, WP Super Cache, etc.).
2. Instale y active el módulo Regenerar miniaturas o cualquier otro módulo capaz de regenerar sus imágenes. Incluso si parece no haber sido actualizado por algún tiempo, lo usé.
3. Asegúrese de saber cuáles son las dimensiones exactas en la página (en el escritorio) del imagen representativa (imagen destacada). Para averiguarlo más fácilmente, puede usar la herramienta de captura de pantalla en Mac (o Windows) y seleccionar exactamente la región donde está la imagen. En el borde de selección le mostrará exactamente cuál es el ancho en su altura.
4. Asegúrese de que todas las imágenes originales tengan el mismo tamaño, especialmente el ancho, cuando las subas.
En mi ejemplo, tengo la imagen al tamaño máximo de 1200 × 677 píxeles.
5. Vaya a la configuración de los medios de WordPress (Configuración - Medios) y establece las dimensiones específicas de su blog (tamaño completo, tamaño mediano, miniatura).
En mi caso tengo: 1200 × 677 (grande), 745 × 420 (promedio), 510 × 288 (miniatura).
6. Abra el archivo Functions.php del tema y agregue el siguiente 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 ImageCambiar "add_image_size('desktop-featured', 745, 420, true);"Con las dimensiones de su imagen representativa, obtenidas del punto 4 ... también, ajuste el resto del código donde aparecen estas dimensiones. Por ejemplo", ",", ", por ejemplo", ", por ejemplo",$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Guarda cambios.
7. Vaya a herramientas en WordPress (herramientas) - regenerar miniaturas.
En la parte inferior debe aparecer sus nuevos valores agregados anteriormente:
- Desktop-Forturado:745 × 420 píxeles (corte para ajustar)
- Funcionado con el teléfono móvil:400 × 226 píxeles (corte para ajustar)
- Mobile-Fature-2x:800 × 451 píxeles (corte para ajustar)
Si aparecen estos valores, elija regenerar miniaturas solo para imágenes representativas (solo imágenes presentadas).
8. Vaya a la configuración del tema y elija el tamaño promedio de "Imagen destacada" (GenerePress).
Después de que finaliza la regeneración de las imágenes, se debe resolver el problema LCP en el móvil de la imagen destacada.
Solo necesitas probar en Chrome (Lighthouse) y en PagesPeed Insights Para asegurarse de que todo funcione como desee y se ha eliminado el gran LCP.
Como complemento, puede agregar coordenadas para pantallas de escritorio retina, comenzando con "add_image_size('desktop-featured', 1490, 840, true);"Y completar las funciones en el código.
Relacionado: Links do not have a discernible name. Lighthouse Fix
Si no maneja el problema de LCP en dispositivos móviles para una imagen destacada (especialmente para GeneratePress), déjame comentar aquí.
