CLS is very high in Google Pagespeed Insights tool

Hi there,

try disabling the Optimized CSS Delivery (Critical CSS) option in WP Rocket ... the automatic critical CSS it generates is one of the most common causes of CLS that we see.

Hi there,

That reduces the CLS to 0 but it's made the FCP and LCP increase by about a second. Is there a way to reduce that?

Many thanks,
Charles

Well how can you believe those PSI metrics lol - it only lists one render blocking resource - a tiny 1.8kb font CSS file... and yet it generates a 1.6s delay....

i done a network check on the site and the site is making some double requests.
Can you clear the WP Rocket Cache and any server page caching - to see if that clears up those double requests.

Hi there,

I've cleared the cache for WP Rocket and the server side caching. Let me know if there's anyting else I need to do.

Kind regards,
Charles

Well that didn't work - can you disable the lazy load JS option in WP Rocket - as that may be the culprit

Hi there,

Is this either of the following options?

Charles

Disable the Load Javascript Deferred.

Hi there, I've made that change.

Charles

Well that cleared the double javascript requests.
But PSI is still hating on the Google Font CSS which is so ironic.

Options here:
1. Don't use a google font - use the System stack option - this generates no font requests.
2. Serve the current font locally, which can be done:

a. Manually
https://docs.generatepress.com/article/adding-local-fonts/
b. Automatic with Plugin
https://en-gb.wordpress.org/plugins/host-webfonts-local/

How can I check for double javascript requests? Is it in dev tools?

Thanks for the advice, I'll have a look into both of those.

I've just uploaded the font files and it won't let me add ttf files. I added the function in the article. Is there a workaround for this?

Yes - in chrome developers tools - Network tab, once its open clear the cache and reload - any 'failed' requests show up in red.

TTF shouldn't be required. You should need the .woff files that google provides

I think that's sorted it. If you could check your end that would be great.

Thanks for all the help.

OK - couple of other things :)

1. In the Customizer > Typography - make sure you have the font under System Stack selected - you should see the Local copy of Open Sans there,
2. With that selected we can dequeue and google fonts - just to ensure it doesn't make that request with this PHP Snippet:

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-fonts' );
} );