Generatepress is a very light and relatively good WordPress theme for SEO, ensuring a low resource consumption and a very flexible code. However, he gave me some headaches for the optimization of LCP on Mobile for the Featured Image. This representative image generates a very large LCP (Largest Paint) in PageSpeed Insights, especially if in the blog you have Java Scriptures (Adsense, Tag Manager, etc.), which can block the rendering.
However, I managed to overcome this problem and succeed in optimizing Featured Image, and finally to get a 100% performance score on mobile and desktop.
Optimization LCP on Mobile for featured Image (Generatepress)
If you encounter this problem and your website has a low performance score on mobile devices because of the representative image, here's what you need to do to reduce the LCP.
1. Disable any cache system during changes and testing. It disables cache both at the server level (fastcgi, redis, etc.) and at modules (WP Rocket, WP Super Cache, etc.).
2. Install and activate the module Regenerate Thumbnails or any other module able to regenerate your images. Even if it seems to have not been updated for some time, I used it.
3. Make sure you know what are the exact dimensions on the page (on the desktop) of the representative image (featured Image). To find out easier, you can use the screenshot tool on Mac (or Windows) and select exactly the region where the picture is. On the selection edge you will show you exactly what the width is in its height.
4. Make sure all the original pictures have the same size-especially the width-when you upload them.
In my example I have the picture to the maximum size of 1200 × 677 pixels.
5. Go to the media settings of WordPress (Settings - Media) and sets the specific dimensions of your blog (full size, medium size, thumbnail).
In my case I have: 1200 × 677 (large), 745 × 420 (average), 510 × 288 (thumbnail).
6. Open the Functions.php file of the theme and add the following code:
// 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 ImageChange ”add_image_size('desktop-featured', 745, 420, true);"With the dimensions of your representative image, obtained from point 4.. Also, adjust the rest of the code where these dimensions appear. For example,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Saves changes.
7. Go to tools in WordPress (Tools) - Regenerate Thumbnails.
At the bottom should appear your new values added above:
- desktop-featured:745 × 420 pixels (cut to fit)
- mobile-featured:400 × 226 pixels (cut to fit)
- mobile-featured-2x:800 × 451 pixels (cut to fit)
If these values appear, choose to regenerate Thumbnails only for representative images (featured images only).
8. Go to the theme settings and choose the average size for "featured Image" (Generatepress).
After the regeneration of the images ends, the LCP problem on the featured Image mobile should be solved.
You just need to test in Chrome (Lighthouse) and on PageSpeed Insights To make sure everything works as you want and the big LCP has been removed.
As a complement, you can add coordinates for retina desktop screens, starting with "add_image_size('desktop-featured', 1490, 840, true);"And completing the functions in the code.
Related: Links do not have a discernible name. Lighthouse Fix
If you do not handle the LCP problem on Mobile for featured Image (especially for Generatepress), leave me comment here.
