- This topic has 15 replies, 5 voices, and was last updated 1 year, 3 months ago by David.
June 13, 2022 at 5:40 am #2251874lee
When running my site through google PSI, I’m getting a significant CLS of 0.39 from
<div class="site grid-container container hfeed grid-parent" id="page">. This seems to be GP-related, and I’ve read through a number of other topics here addressing similar issues, but I’m not sure how to fix my particular one. Is it simply a matter of disabling lazy loading of images in wp-core, or is there another issue here?
Thanks very much for any assistance 🙂June 13, 2022 at 6:13 am #2251903DavidStaffCustomer Support
see here, this report provides a nice filmstrip so you can see whats going on:
You will notice on initial load the text is occupying more space then it does at the 1.0s cell.
Most noticeable on the Navigation which wraps to two lines.
Which causes a shift of all the elements below it, and the largest of those is the
<div class="site grid-container container hfeed grid-parent" id="page">which gets hit by the biggest layout shift ( its suffering the symptoms of layout shift ).
So, this happens when Fonts or the CSS styles are loaded after initial render.
Fonts loaded with the
display=swapproperty and CSS optimizations are both primary causes of this.
However, before delving into that, go to Customizer > Layout > Primary Navigation, and reduce the Menu Item Width.
The logic here is to reduce the space the menu occupies as currently it is almost the same width as the laptop size screen that google simulates its tests on.
Try setting it to 30px instead of 50px. And retest – let me know.June 23, 2022 at 4:19 am #2262152lee
I followed your suggestion and reduced the menu width to 30 and it’s made a tremendous improvement — I’m seeing only minimal CLS now. Thank you!!!
Do you think I should change
display=swapto a different method? I went with
swapbecause I wanted to minimize blocking, but if it’s causing problems, I could put it to whatever you’d suggest.
Apologies about the length of time it took me to reply. Thank you again for the excellent suggestion!June 23, 2022 at 4:33 am #2262165DavidStaffCustomer Support
No need for apologies 🙂
displayattribute i generally leave it as
Google will moan about it, but if it reduces CLS i would suffer the moaning lolJune 23, 2022 at 5:46 am #2262203lee
I’ll make that change. Thanks again!June 23, 2022 at 7:06 am #2262248DavidStaffCustomer Support
Let us know how you get on 🙂August 16, 2022 at 6:35 am #2314439James
When running a page through google PSI, f.i. https://www.onlinemarketingmonkey.be/blog/het-verschil-tussen-sea-en-seo , I’m also getting a significant CLS of 0.372 (for Desktop) from div class=”site grid-container container hfeed”. The same for div class=”inside-navigation grid-container” of 0.033 and even for a H2 of 0.015.
I’ve read through a number of other topics here addressing similar issues, but I’m not sure how to fix mine? Thanks for your help.August 16, 2022 at 7:14 am #2314477DavidStaffCustomer Support
can you disable your image lazy loader and retest your page.
As when i test your page on a throttled network i can see the lazy loader is using a square image for the placeholder which means the browser reserves too much space for the image, and when the image loads that space shrinks which results in the Layout shift of those elements.August 16, 2022 at 7:35 am #2314502James
Many thanks for your feedback David! Problem seems to be solved with this 🙂
Hopefully the deactivation of the lazy loading doesn’t cause any other SEO problems.August 16, 2022 at 7:41 am #2314507DavidStaffCustomer Support
Glad to hear that.
As a general note – NOT all lazy loaders are built the same, most of them load the right size placeholder 🙂August 25, 2022 at 2:31 pm #2323992Amy
I’m having the same issue, but when I go through the steps laid out above, it seems to get worse. Would you mind taking a look at my CLS on desktop? https://www.leveeroadstudio.com/best-free-script-fonts-on-canva/August 25, 2022 at 2:54 pm #2324000YingStaffCustomer Support
Can you try modify the logo image’s dimention to 340px * 68px in media library?August 26, 2022 at 6:37 am #2324569Amy
Hi Ying! I’ve updated the logo media file. I don’t see any improvement though.August 26, 2022 at 7:04 am #2324596DavidStaffCustomer Support
in your lazy loader plugin, they generally provide an option to exlcude lazy loading of images by adding a CSS Class to the field provided. Can you add:
is-logo-imageso it doesn’t lazy load your logo. We can then eliminate that as a potential issue.August 26, 2022 at 7:50 am #2324771Amy
- You must be logged in to reply to this topic.