[Support request] Please help me fix Avoid Large Layout Shift

[Pintu]

Hi, can you tell me how to fix the ‘Avoid Large Layout Shift’ warning in GTMatrix and PageSpeed Insights? The mobile page speed score is very good (90+) but on the desktop, it is around 80. Can you help me make the score 90+ on both? The site is hosted on Cloudways and for caching I’m using WP Rocket. Thanks

[David]

Hi there,

can you share a link to the site ( page ) where we can see the CLS issue ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pintu]

Gizmoradar

[David]

When I test your site with WP Rocket disabled ( by adding the ?nowprocket query string to the URL ) then the CLS is virtually 0.

The main issue looks to be related to WP Rocket adding display=swap to the font loading. I would suggest you change this to auto – see here:

https://docs.wp-rocket.me/article/1312-optimize-google-fonts

And for better performance you may want to load the fonts locally

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pintu]

Okay. Thanks

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pintu]

Hi, David. I’m now using system font on my site and ditched Google font altogether. However, there are still 5 elements causing a Large Layout Shift. Can you please check my site again and help me fix those. I know these shifts have very little impact on my site’s overall speed and ranking. But I want to see if I could make the CLS 0 and get a perfect 100 score or not – it’s a dream 🙂 So, please make this dream come true.

[David]

You will need to check with WP Rocket, as again if i test the site with WP Rocket disabled the CLS disappears.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts