[Resolved] LCP Issue – Mobile longer than 2.5s

[Thomas]

Hi,

I have found that Google Search Console is flagging all my single post pages as having LCP Issues in core web vitals. I have checked on Google page speed and the LCPfor Desktop is good (1 second) but Mobile is poor (3-6 seconds).

I have Autoptimise (used recogmended settings for Generate Press) and WP Supercache running. I have managed to reduce the problem a bit (about 1 second) by converting images to Webp, lazy loading and adding a background colour to the Header image container. However at this point, I am a bit stuck for ideas! Is there anything you can suggest as it seems the large header image on Mobile is what it doesn’t like, but that is a main element of the overall theme.

The frustrating part is by using another Performance Tool such as GTMetrix the site looks great, it just seems Google has an issue with it!

Link to pagespeed and site in private info box.

Best, Tom

[David]

Hi there,

First off LCP can never be quicker than FCP. So we should focus on improving FCP first as any improvement there will flow down to LCP.

The major performance hogs are:

1. Google Fonts
Loading them locally can significantly improve that.

https://docs.generatepress.com/article/adding-local-fonts/

2. 3rd party scripts particularly adverts.
You can defer those scripts using a plugin like:

https://wordpress.org/plugins/async-javascript/
https://wordpress.org/plugins/flying-scripts/

As well as the popular plugins like Perfmatters or WP rocket.

If you want to make those changes first we can then relook at the additional time between FCP and LCP improvements.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Thanks David, that was really helpful.

I have;
Switched to loading Google fonts locally.
Installed Async Javascript, and defered the two advertising javascripts and google tag manager script.

This has improved FCP a lot, now about 1.4 seconds, but the LCP is still high (4.2 seconds) on the homepage, and simular on posts.

I am getting a warning that I am lazily loading the largest image on Pagespeed. I am using Autooptimise and have made sure to lazy load the 4th image onwards and have added what I think is the image classes of the images in the single page featured image header/magazine layout, but I must be going wrong somewhere?

My lazy load excluded images classes are;
first-featured-image,wp-show-posts-image img,img.attachment-full,div.wp-show-posts-image ,wp-show-posts-image

Do correct me on these, and happy to look at any more suggestions to get the LCP down on mobile.

[Fernando]

Hi Thomas,

Perhaps you can also try using a CDN? Using a CDN should improve delivery of your site’s resources.

A popular CDN would be Cloudflare. This link might also be helpful: https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/

[Thomas]

Thanks. At present I am not looking at a CDN, I would rather resolve this issue as it seems we are pretty close.

Do please review my reply above. I need to know what are the image clasess for the featured images, as currently all images are lazy loading, which is the only thing holding it back now.

[Fernando]

Can you try excluding wp-post-image just to test?

[Thomas]

Hi,

I have added the above image class to the exclusion on Autoptimize. I have cleared all the caches now, and re-run the Google Lighthouse test which is still reporting..

Largest Contentful Paint image was lazily loaded
Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.
img.attachment-full.size-full.wp-post-image

I have previously added the full class written above to the exclusion but that seems to make no difference.

[Fernando]

I see. Can you try adding this to test?:

function db_disable_wp_lazy_home_featured( $default, $tag_name, $context) {
    if ( is_home() && 'img' === $tag_name && 'wp_get_attachment_image' === $context  ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'db_disable_wp_lazy_home_featured', 10, 3);

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Thomas]

Thanks. I have added that function and cleared all caches again, but it is still showing as lazy loading for me?

I have found that has improved the post pages as the top featured image is now not loading lazy and the page scores have got better. It is just the homepage with the image in the top “magazine” tile header, that is still lazy loading.

[Fernando]

I see. Can you try this instead?: add_filter( 'wp_lazy_loading_enabled', '__return_false' );

[Thomas]

Thanks.

I have added that snippet, but disabled the previous one. I have cleared the cache.

I do still have lazy loading turned on in Autoptimise, do let me know if i should turn that off?

[Fernando]

Actually, just realized that the loading=lazy attribute is a browser-level lazy loader. By default images above the fold (ATF) will not be lazy loaded by it.

More info on the spec here: https://web.dev/browser-level-image-lazy-loading/

Can you try temporarily disabling Autoptimize to see if anything changes?

[Thomas]

Thanks, I didn’t know that either.

Ok have disabled Lazy Loading in Autoptimze now and cleared caches.

[Thomas]

Hi,

Just to let you know i think I have resolved it. I found this post with a slightly different filter in it. Adding this helped and seemed to sort out the lazy loading problem.

https://generatepress.com/forums/topic/avoid-native-lazy-loading-of-featured-image/page/2/#post-2183453

I have then made sure the locally added Fonts have the FontDisplay:Swap atribute as that was missing adding to the delay. All seems have improved things quite a lot. I am targeting the UK and that’s where the server is, so the server response locally was quite good and now is very good. It just seems that Google is using a US based server which is always a bit slower.

Thanks for your help, I’m going to say this is resolved!

[Fernando]

Nice! Glad you found the solution!

[Author]

Posts