[Resolved] LCP Issue – Mobile longer than 2.5s

Home Forums Support [Resolved] LCP Issue – Mobile longer than 2.5s

Home Forums Support LCP Issue – Mobile longer than 2.5s

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2346410
    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

    #2346666
    David
    Staff
    Customer Support

    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.

    #2346700
    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.

    #2347048
    Fernando
    Customer Support

    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/

    #2349713
    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.

    #2350211
    Fernando
    Customer Support

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

    #2351360
    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.

    #2351370
    Fernando
    Customer Support

    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

    #2351378
    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.

    #2351381
    Fernando
    Customer Support

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

    #2351383
    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?

    #2351403
    Fernando
    Customer Support

    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?

    #2351414
    Thomas

    Thanks, I didn’t know that either.

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

    #2351797
    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!

    #2353533
    Fernando
    Customer Support

    Nice! Glad you found the solution!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.