[Resolved] Cumulative Layout Shift Issues CLS

[Kevin Wabiszewski]

Hi,

I have a few websites that all use generate press. In google page speed I typically get 100 for mobile and desktop. However, the Cumulative Layout Shift (CLS) still does not pass google for core vitals. On some pages it is orange on others it is red. This is for desktop and recently the test data is bad on mobile as well.

I have been trying for two days to fix this. I have read all the previous support forums about CLS issues. When I load the page slowly in development mode the logo appears to load late. I lazy load the images with a3 lazy load and tried to exclude the logo class but that did not work. Removing the breadcrumbs also did not help. It just switched the error to the H1 title and avatar rather than the breadcrumbs.

My goal is to get the CLS to zero.

Here are the avoid large layout shift message in google page speed.

Mobile
“Breadcrumbs”
div class=”content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100″
CLS time 0.135
Menu <button class=”menu-toggle” aria-controls=”mobile-menu” aria-expanded=”false”>
CLS time 0.006
Open Search Bar a href=”#”
CLS time 0.003

Desktop
“Breadcrumbs”
div class=”content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100″
CLS time 0.057
and several more smaller CLS times.

Any feedback would be greatly appreciated!

[Elvin]

Hi there,

I’ve ran the site on Google PSI, Webpagetest.org and GTMetrix.
https://share.getcloudapp.com/jkuenbN7

The logo seems to be contributing a bit. That said you can try the solution suggested here for it.
https://generatepress.com/forums/topic/svg-causing-cls-movement/#post-1545284

As for the other things:

The biggest contributor is the contents.
<div id="primary" class="content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100">

This could be from unoptimized or lazy loading images.

You can try the usual suggestions which are:
Disable Lazy loading
Disable Critical CSS on your caching plugin.
Optimize the image so it loads faster. (smush, optimole, etc)

[Kevin Wabiszewski]

Elvin,

Thanks for all the ideas. I actually did not see SVG CLS movement thread.

It looks like Switching from Floats to Flexbox fixed the CLS issues on mobile and desktop. My sites needs some minor formatting changes now but definitely seems worth it.

Nice work to all the developers!

Thank you!

[Elvin]

Nice one. Thank you for sharing it with us. No problem. 🙂

[Author]

Posts