LCP is Slow

Hi there,

Ultimately you will want to improve FCP as this will trickle down to LCP.
Couple of easy things to try is loading fonts locally:

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

Or you can use OMGF plugin to do that automatically.

The image size could be reduced - in Customizer > Layout > Blog --> Featuered Images >>> Posts (tab) set the attachment size to medium_large.

Hi David,

I have tried to host a google font "Montserrat" onto my website and I have followed the instruction from the link provided above.

I uploaded the fonts and put the codes into style.css and use a code snippet plugin to add the fonts to default typography.

However, when I go to the customizer and font of the website actually has changed ! Not sure which font was that. Under the default typography, I selected Montserrat and publish but the fonts does not change. At the same time, when I scroll the typography, I realised that it went back to the Google Fonts Montserrat instead of the Default Montserrat.

Can you advise what has happened ?

You can now eliminate any Google Fonts from loading and being displayed in the customizer using the two snippets here:

https://docs.generatepress.com/article/remove-google-fonts/

This way it will ensure it only loads the local font.

As a note - i couldn't see the CSS for your local font on the site - are you using a Child Theme for the @font-face CSS?

I've reduced the image size and installed OMGF to host fonts locally but the FCP and LCP are still pretty poor for mobile.

I noticed the featured image is the main LCP element and it has this 'loading="lazy" - Is this lazy loading causing the page to appear not fully loaded for a period of time. Is this something added by GP or WP?

I can still see the fonts being requested from Google servers - which shouldn't happen if you ran the automatic setup in OMGF. And make sure to clear and plugin caches afterwards.

The other render blocking resources are being loaded from stackpathdns - is that a CDN ? As those will be making additional DNS requests which can slow down there loading.

The loading=lazy attribute is added by WordPress - its the browser native lazy loading which is fine as the browser knows not to lazy load that element as its above the fold.

Regarding image size - not sure if this will work with the webP converter being used but we can try and force the browser to load the smallest image on mobile using this PHP Snippet

function db_modify_srcset_sizes($sizes, $size) {
	return '(max-width: 360px) 300px, (min-width: 361px) 768px, 100vw';
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2); 

Cheers for the speedy reply David.

My fault with OMGF, was using manual mode. Switched to automatic, LCP figure has improved but the font isn't loading on the site now whether I select preload or not for the font in OMGF.

I appreciate you're not the dev for OMGF but is there something obvious I'm missing.

I tried the image size code above but that didn't do anything but LCP figure is green when OMGF is active so just need to get that working really with the correct font on the frontend.

To follow up on above, I've removed OMGF and installed fonts manually and that seems to be helping somewhat.

Can't see any requests being made to fonts.google - all fonts are being served locally now - so that fixed it :)
What i see is Fira Sans ( for headings ) and Merriweather Sans ( for body ) loading - they look correct to me ?

That code probably didn't work as the default image is being swapped out by whatever image optimization/webP service is in place. Not much i can do to change that unfortunately. But i did notice the LCP now passes and 97 score on mobile now.

Yeah LCP scores look solid. Obviously takes Google's Origin data a while to catch up with the changes to Lab data so hopefully enough speed changes have been made.

Thanks for the help!

Awesome - glad to be of help

Regarding image size – not sure if this will work with the webP converter being used but we can try and force the browser to load the smallest image on mobile using this PHP Snippet

The snippet works like a charm (and adding a few points to the pagespeed), but it's unfortunately not working with webP-images. Or do I have to regenerate them afterwards?

Hi there,

it depends on how the webP images are being added to the site. A lot of plugins/services strip the original <img> HTML and output their own <img>/<picture> HTML in its place which will exclude the adjust src-set sizes attribute.

You could try regenerating them, although i am doubtful it will fix that.

If you want to share a link to the site where i can see the issue - raise a new topic - and ill take a look.