[Support request] Cumulative Layout Shift – Really bad

[Lennart]

Hi

I switched to GeneratePress to get one of the fastest Themes for WordPress.
But the Cumulative Layout Shift in Google Pagespeed Insights are just as bad is not worse now

I have https://knib.dk and https://erotik.dk, which both performs really bad.

After the last two updates Google shows ALL my Urls as bad in Google Search Console.
When looking at it it shows lots of shifts

What can I do ?

I use WPRocket and Asset Cleanup

[Julien]

Hello,

I had the same issue on a website that was fixed by deactivating wp rocket lazy loading for image. Maybe it’s worth a try ?

[David]

Hi there,

few issues.

1. WP Rocket Critical CSS – unless you can manually create the necessary CSS for each of your various layouts you should disable this feature. The automatic method has no clue as to what is critical or what is above the fold which is leading to the late loading of CSS for elements above the fold such as the Page Hero.

2. Lazy loading – as Kaspof pointed out ( Thanks Kaspof ) – you need to exclude your logo from the lazy loader. Simplest method is to exclude by filename as explained here:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

There the first two things to resolve.

[Lennart]

Thanks. I’ll try both of these.
When I can get in the customize 🙂

[David]

You’re welcome – have replied to your other topic

[Lennart]

Hi

I have tried this, and the logo now stays put, but the burger menu on mobile still jumps from left to right
So it had not much effect at all.

If I purge all cache Op, Cloudflare etc. and runs, then the first 2-3 times it looks good and then starts to decay again

For almost all sub pages it does not help a bit. Only the frontpage looks ok.

I now have render blokcing css, but if CLS is more important I will have to live with that

Any other suggestions ?

Mine is to disable the logo and put it in a hook instead – dont know if it makes sense

[Lennart]

I found a temporary solution.
I moved the logo into a hook and removed the logos from the Customization (still super slow)

Now I get CLS 0,00 ms on mobile, but still too much on desktop (0,731)

Its the menu section that starts out really heigh and resizes it self in the end.

I tried removing cache module entirely. No changes

[David]

Lets do one site at a time.

The Erotik site – the main issue i see is the rating stars image. The <img> has not height or width specified. So on initial load the browser does not know how much space the images should occupy before it is loaded. So it goes from 0 height to 57px after load.

try adding adding a height attribute to your img HTML eg. height="50"

[Lennart]

Thank. I will.
But the worst pages are all other than the front page and it does NOT have the ratings.

Here the menu area seems to shift in size. Cant figure out what it is

[David]

Ok looks like you’re using WP Rocket Critical CSS – and the automatic option is prone to cause these kind of problems. Can you disable that option?

[Lennart]

Hi

I tried this. Even removed it completely. Same same.
Thats why i enabled it again, to get better load times with no render blocking

[David]

Can you disable it again so i can take a look?

[Lennart]

Done 🙂 on https://erotik.dk
I added their helper module to disable Critical CSS

So WP Rocket is running but without Critical CSS generation. This can now be done manually

[David]

Still seeing some elements such as the Search bar receiving their styles after load.
Thats the problem with cache/optimization plugins that are combining and deferring scripts.
We could probably stop those elements from resizing of the Header after load by setting a min height:

@media(min-width: 1024px) {
    #masthead {
        min-height: 150px;
    }
}

The rest of the issue look related to the WPSP images not lazyloading. You can re-enable lazy load – but you will want to exclude the logo.

[Lennart]

Hi

Hi. I have tried this. I added height to all elements that I could think of.
I added the CSS you suggested to the extra CSS section in the customize.

When looking at the screenshots in GPSI i cant see where the shift is anymore.

Its really bothering me that I cant get this down to 0 for desktop as well.

I even trid removing all other elements but text. So no shortcodes, products, nothing. Still the same number or higher actually.

The only thing I dont seem to be able to conttrol the height for is the hero element. I guess this must be the one ?

[Author]

Posts