[Resolved] Largest Contentful Paint on mobile

[Caro]

Hi team,

I’ve read lots of the threads on the forum for this subject — and tried lots of different things for the site I’m working on.

The speed on desktop is 100.

On mobile it’s 95 — thanks to the LCP on the hero image; which is 2.7s.

No matter what I do, I can’t seem to change this. The options for image size are full, medium, thumbnail — the image is 1024px and I have it set at medium.

I’ve uploaded different versions of the image; made it smaller, bigger.

Made it a wide width block image; a full width block image.

Put it in a full width container.

Removed it from the page altogether and made it a featured image instead.

I’ve even tried to make a preload element in the head — I’m a designer though — not a coder, so this is probably wrong!

PLEASE can someone help me!!! I’ve tried every which way to get it less than 2.5 and I just can’t work out how to fix it!!

The site is https://www.mooksdesign.co.uk/

Thank you 🙂

[David]

Hi there,

try removing your lazyloader to start with, as thats going to affect the loading order of that image.

[Caro]

Hiya — I’ve done that and it doesn’t make a difference. Still 95 with the LCP at 2.7px.

Is there an optimum image size that I should use for that hero image? Or a way to make it smaller just for mobile use?

[David]

With LCP elements its less commonly the element itself that is affecting the timing. Unless that element requires a lot of network resources eg. Large File size or it is being deferred from loading eg. Lazy Loaders.

The more common issues is what the Browser has to process before it can load or render that image. The causes for this can be many ranging from Server Response times to render blocking resources to javascripts creating long tasks ( during which a browser can’t do much else ) … plus other factors.

To test whether the image is at fault, the simplest test is to remove the image, and just have some text displaying above the fold. If you don’t see a real significant improvement in LCP then you know the actual image file is not the problem. And we need to look up the chain to see what the issue is.

[Caro]

Hello! I’ve deleted the image and put some text above instead — as you mentioned, the problem still remains!! So it’s not the image at all. It’s making mw think it could be the top bar possibly.

I’m using the same settings as on another site — and that’s really the only marked difference between the two.

I will disable it and see if it makes any difference.

[David]

When you check the PSI report you will see that the FCP is very high, and thats what needs to be improved.
And it won’t be because of anything what you seen on the page. It will be more related to any JS, CSS, Preloaded Fonts that is blocking the page from loading.

It will require optimization of CSS files, and deferring any CSS or scripts that are not required for content above the fold eg. Woocommerce related code.

[Caro]

Gah — this is way over my head!!!!!! OK — will try and do more digging. I’m not wholly convinced I have any idea what I’m doing though!! 😉

[David]

Some steps on troubleshooting:

1. Temporarily disable all plugins apart from GPP and GB.
Retest your site.

If you’re still seeing a slow loading FCP then you may want to talk with your host.

If theres an improvement

2. Re-neable each plugin one at a time and retest to see what impact it has ( Woocommerce will be a likely culprit )

That should give you a handle on what code is delaying the loading.

3. Once you know what code is interfering eg. Woocommerce then plugins like Perfmatters or WP Rocket will give you controls to exclude or defer the loading of those codes.

One observation:

I see you use the Woocommerce Blocks – they are really bloated, i personally don’t use them and instead use the built in Woocommerce Shortcodes.

If you use shortcodes you can then remove the Woo Blocks plugin or Extension thats adding them.

[Caro]

Hello — right this is interesting.

I’ve disabled all Woo cCommerce plugins.
and everything else too. Even WP Rocket.

The only plugins that I currently have active are:

GenerateBlocks
GenerateBlocks Pro
GP Premium
Wordfence
Yoast

And the LCP is still 2.6px — the FCP has now gone up to 2.5s — probably cos I’ve disabled Rocket.

https://www.screencast.com/t/qmmHx6Yz8

[Caro]

So, after disabling every plugin — apart from changing themes — I worked out that it couldn’t be any of the plug-ins that were causing the issue.

I ran the site GTMetrix and had a look at the waterfall to see what was taking the longest to load and it was the Google font I was using on the headings. I changed this to the system font and it’s fixed it.

All that time spent faffing and it was the font!! Arrrgh!!!

Worth it to see this though!!!

https://www.screencast.com/t/gjwokpPYtXzX

[Tom]

Glad you were able to track it down!

It might be worth trying some different font-display values if you want to use Google Fonts. It’s possible that one of them will fix the issue.

This feature is built into GP 3.1 (currently in alpha: https://generatepress.com/generatepress-3-1-global-colors-dynamic-typography/), but you can use a filter in the current version:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

[Caro]

This is brilliant news — thanks so much Tom! 🙂

[Tom]

No problem!

[Author]

Posts