- This topic has 5 replies, 2 voices, and was last updated 1 month, 2 weeks 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 SupportJune 23, 2022 at 5:46 am #2262203lee
I’ll make that change. Thanks again!June 23, 2022 at 7:06 am #2262248
- You must be logged in to reply to this topic.