I Have a High Cumulative Layout Shift, What's the Solution

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi Leo Yes I have provided that detail in the private info area, thanks

Hi there,

Let's tackle each one by one.

"Ensure text remains visible during webfont load"

The theme's font icons are being flagged. To address this, you can switch GP icons from fonts to SVG icons through Customizer > General.
https://docs.generatepress.com/article/svg-icons/

"Avoid large layout shifts"

The elements flagged here are usually the contents of your pages. The reason can be from an unoptimized image, font, or CSS.

In your case, It may be from the image or CSS. As for the Image, try optimizing it with Optimole or Smush. As for the CSS, you can use Autopmitize.

"Eliminate render-blocking resources"

Tom recommends Autoptimize to address this:
https://generatepress.com/forums/topic/eliminate-render-blocking-resources-2/#post-1527484

Here's a brief documentation on configuring Autoptimize.
https://docs.generatepress.com/article/configuring-autoptimize/

As to why we recommend Autoptimize, check David's reply here.
https://generatepress.com/forums/topic/why-autoptimize/#post-1517520

Note: You may have to exclude a few styles or scripts on Autoptimize incase some plugins don't work.

Thank you Elvin, I have changed GP icons to SVG icons, plus I have now activated Autoptimize and completed those tasks as per https://docs.generatepress.com/article/configuring-autoptimize/
I also clear the cache daily on my site.
What do you suggest is the next step, please?

Try disabling lazyload.

To turn off WordPress default's lazyloading, try adding this PHP snippet:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Here's how to add PHP code/s - https://docs.generatepress.com/article/adding-php/

If you're using WP Rocket, try following this article.
https://wp-rocket.me/blog/lazy-load-images-wordpress-site/

Thank you Elvin, Can I ask what turning off WordPress default’s lazyloading actually achieves?
Thank you.

Hi there,

the main issue i see is the Logo being lazyloaded from the Smush CDN. Are you able exclude specific images from Smush ?

Thank you, I have now turned off WordPress default’s lazyloading, by adding this PHP snippet:

( 'wp_lazy_loading_enabled', '__return_false' );

I have now completed all the above tasks except excluding specific images from Smush (Last Message)
and the CLS score of 0.28 has not changed.

I will now try to disable the Logo being lazyloaded from the Smush CDN and see how that goes.

Thank you

Hi Support, I have now disabled the Logo being lazyloaded from the Smush CDN.

Well thats a lot better - the CLS is well below where it was and is in the Green values.
The minor CLS that is left, still looks related to the lazyloading.

Open the site in Chrome, open the Dev Tools, and go to Network tab and switch from Online to Slow 3G - with dev tools still open, refresh the page or navigate some links.... you will see that some of the image placeholder sizes are incorrect, causing CLS when the image loads.

Hi David, Yes much better I am very happy with those results so far. I will take care of that task you have given me tomorrow. Thank you.

You're welcome

Hi David, so I done that task, switched from online to slow 3G and refreshed the page, however, when I go back into the dev tools it still shows as online is this correct? thanks

You have to keep the Dev tools open when refreshing the page to keep the slow 3G connection.

Closing the Dev tools will reset the connection to online.