Cumulative Layout Shift while using Cache Everything

After implementing the ‘Cache Everything’ rule, I’ve started getting ‘Cumulative Layout Shift’ errors in Google PageSpeed for all sorts of things, like the menu or the title of pages. I can also see the page been scrambled for up to 1 second while loading.

The thing is ‘Cache Everything’ made my site faster and it shorted the ‘initial server response time’ in PageSpeed, which is what I was after. But the layout shifts are an unwelcomed bonus.

Does anyone have any tips on how to fix the ‘Cumulative Layout Shift’ issue while using the ‘Cache Everything’ rule? Thanks!

PS: I also have Rocket Loader, for what is worth. Although I don’t seem to get layout shifts when only Rocket Loaders is on (no Cache Everything rule)

Hi! Is there a way to exclude the Class or ID of certain elements from Cache Everything? I’m on the free plan and run a WordPress site. I get Cumulative Layout Shifts when having Cache Everything on. Thanks!

Are you talking about DOM/HTML Elements? If so: no

1 Like

If CLS (Cumulative Layout Shift) in general is the problem I would recommend this Page from web.dev directly web.dev/cls/. They explain how it is calcilated and how to prevent it in general.

More informations about what exactly is shifting can be obtained when analysing your page with Google PageSpeed Insights. They clearly show which elements are shifting.

I can not help any further then this as I dont know when URL and therefore can not analyse it.

Also: I have never seen a page with “Cache Everything” producing more CLS then without.

Thanks, @M4rt1n I’m reading through the resource you linked right now. Basically, the CLS are for the mobile version only and I’m only getting them when the Cache Everything is on. These issues are related to the top menu. While the desktop version has a normal menu with several links, the mobile menu is a hamburger menu and that’s where the issue lies. What is the normal approach in these cases? I wouldn’t want to use a hamburger menu for the desktop version. But I can’t use the normal menu on mobiles either.

Thats often the case as they often are getting “restructured” by JavaScript and all that JavaScript is often deferred and therefore is getting executed AFTER page is loaded and therefore will result in CLS.
A good way to improve this would be:

  1. minimize the needed JS and the resulting JS execution time for restructuring the mobile menu
  2. prioritize the execution of this particular JS snippet. Maybe even place it inline (before closing tag)

Mostly such issues happen if people use prebuild Themes for WordPress. If this is the case, pls report this issue to the developers and let them to their job.

Another questions:

Are you using any other CloudFlare feature for example “Rocket Loader”?
If yes = try without
If no = try it

The effect vary for every page but it can have a big positive impact on some pages.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.