[Support request] Improve CLS score on Desktop

[Graham]

Hello support team,
My website has CLS issue happening ONLY on the Desktop.
This element <div class="site grid-container container hfeed"> causing layout shift and I’m already out of options to fix it. Could you help?

Here is the report

Basic troubleshooting I did:

1. Tried disabling “Optimized CSS Delivery” on WP Rocket but didn’t solved the issue.
2. Disabled Lazy Loading on WP Rocket still didn’t solved the issue.
3. Tried disabling all plugins but didn’t work as well.

[Leo]

Hi Graham,

That seems strange – the element <div class="site grid-container container hfeed"> is basically used on every single page of a GeneratePress site so this shouldn’t be a home page only issue.

Can you disable all plugins and let us take a look?

[Graham]

Hi Leo,

Thanks for your reply. I don’t have any issues on the home page. Google PSI report showing high CLS Contribution time mostly on my website’s posts. Please check this Google PSI report on one of my post.

I already tried disabling all plugins and still it is showing CLS issue on this element <div class="site grid-container container hfeed">

Thanks

[Elvin]

Hi Graham,

It seems like the CLS comes from FOUT (flash of unstyled text).

What happens is, the site loads with system stack/fallback fonts while waiting for MaryKate and Comic Sans to load.

And then, when MaryKate and Comic Sans loads, the font style changes, causing the layout shift.

That said, consider preloading the fonts so it loads immediately. 😀

[Graham]

Hi Elvin,

Thanks for your quick response and for your explanation regarding FOUT. But I’ve already enabled preloading of fonts via WP Rocket settings in the first place and the issue is still there so it’s unlikely the fonts causing the issue.

Screenshot WP Rocket preload font settings – https://prnt.sc/1q9r0dq

Can you please take a deep look on this one please?

Thanks

[David]

Hi there,

the issue is because your font loading has the display=swap attribute. Which is added by WP Rocket.
On initial load this tells the browser to use its system font, until the actual font is loaded.
Preloading only tells the browser to expect this font and to start downloading it.
But the display=swap tells the browser NOT to wait for the font to load, before displaying the text.

I can see the fonts swapping on a normal load.

If you want to see it in slow motion ( and how a slow 3G device will deal with it).
Open the site in Chrome, Right Click > Inspect to open the browser developers tools.
Go to the Performance Tab, set the Network to Slow 3G.
In the performance panel, click the reload button.

You will see the page loads first with the system font.
And then reflows as the google font is loaded.

Options:

1. Improve the loading time of the font, by:

a) removing any unused variants:
https://docs.generatepress.com/article/google-font-variants/

b) serve them locally:
https://docs.generatepress.com/article/adding-local-fonts/

2. Don’t use display=swap
You would need to check with WP Rocket as i believe they auto add this when using the Optimized CSS delivery options.

[Graham]

Hi David,

Thanks for your detailed explanation. I will follow the options you have provided. I’ll update you how it goes.

Thanks

[David]

Glad we could be of help

[Graham]

Hi Support Team,

Here’s my new update regarding with this issue. I have tried the different solutions that David provided but still no luck.

Right now I ended up changing my content body font to a system font hoping to eliminate the font swapping but it didn’t fix the issue.

Here’s my latest Google PSI report

Can you please check again this issue? Or maybe I missed out something. Please advice.

[Quang]

I have same issue with you My CLS is always is 1 https://prnt.sc/1qgxt1q

https://prnt.sc/1qgxtso

[David]

Hi Quang,

please raise a new topic and share a link to your site, and we can take a look and advise.

[David]

Hi Graham, the issue remains with the font-swap – as the Body font was not the issue. You still have other fonts being loaded on the site particularly the nav and sidebar see here:

https://www.screencast.com/t/0Jzh7c8vxtA

Unless the google fonts are massively optimized and served locally and theres no delay between the browser loading them, then the display=swap option is always going to cause an issue with those particular fonts.

[Graham]

Hi David,

Thanks for your reply and for your patience about this issue. So it seems that the real problem here is the display=swap added by WP Rocket plugin.

My website is only using 2 types of fonts, Marykate font for the nav and sidebar, Montserrat for the body. Please take note that both fonts were already served locally, I’ve set them up on my child theme’s CSS and functions.php file, please see this screenshot – https://prnt.sc/1qhjdv9

Also preloaded both fonts via WP Rocket settings, see screenshot – https://prnt.sc/1qhjgmx

So is there any chance of fixing this issue if we disable WP Rocket from force adding display=swap?

Looking forward for your reply. Thanks

[Elvin]

Here are a few suggestions:

– Try disabling WP Rocket Lazy load script.
– Try disabling Critical CSS.

Particularly Critical CSS. I see that you have a lot on your site.

This one is quite tricky to deal with because you have to be really precise about what should be added because if there’s another styling on the same selector that will load after the Critical CSS you’ve specified, that will cause CLS.

An example scenario would be:

Say for example, you have a critical CSS line “.entry-title{ font-size: 14px; }” but after this CSS, another CSS from the stylesheet with “.entry-title{ font-size: 20px; }” loads.

What happens is, the site will load the critical CSS first, which loads 14px sized font. After this, the next CSS stylesheets on the page will load.

Once it gets to the stylesheet with .entry-title{ font-size: 20px; }, it will then change the previously loaded 14px to 20px. This one happens in seconds while the whole page loads. The change from 14px to 20px can cause a shift.

This is just one example (font related), there are other ways Critical CSS can cause CLS.

[Graham]

Hi Elvin,

Thanks for your response and I apologize for my late reply. I already tried your suggestions, I have disabled lazy load script from WP Rocket and also Optimize CSS Delivery for Critical CSS but no luck. Still the issue on CLS on desktop is still there and also disabling Optimize CSS Delivery reduced my score on some other areas so I turned it back on after the test.

I already tried different workaround on this issue but still can’t get my CLS on desktop to drop.

Already hosted locally all the fonts I’ve used on my website and preloaded the font as well. But still my PSI report still tagging this element <div class="site grid-container container hfeed"> as the primary cause of the CLS.

I have also disabled WP Rocket from force adding display=swap but it did not reduce my CLS.

I’m already out of options in fixing this issue. Hope someone can help me. Thanks

[Author]

Posts