Cumulative Layout Shift while using the Plugin

This plugin doesn’t do any CLS issues as the only thing that this plugin manages is caching which has nothing to do with CLS. Check the Google Page Speed report, it will show you that what item in your page is causing the CLS.

Hi Saumya,

Thank you for your answer, I appreciate it. The implementation of your plugin is causing the CLS issue, and please let me explain you why.

Some background:
I’ve been trying to implement the Cache Everything page rule since more than two months ago. I even purchased for two months the Business Plan of CloudFlare so that I could implemente the page rule that your plugin does with ByPass Cache on Cookie. I had the exact same problems with this page rule, that I am having with your plugin at the moment. I’ve have exchanged many messages with CloudFlare support about this too. I obviously stopped the Business plan when I found your plugin because it is very expensive and your plugin makes it easier.

Based on what the CLoudFlare support have told me is that the page rule (now being implemented by your plugin) is caching some dynamic content that creates the issues. They suspected that the files creating the issues are some CSS files created by Elementor, so they recommended me to create a page rule to Bypass all the Elementor files, and I have placed it in the first place as they recommended me. This is the page rule I have created:
*mayangateway.com/*elementor*
Cache level: Bypass

I have applied this rule, but it did not fix the problem.

How do I know that the implementation of your plugin (or the page rule without your plugin) creates the problem?
1. Because when I deactivate your plugin the issues disappeared.
2. Because when I purge individually the pages with the CLS the problem disappeared. If you now open the link that I sent you in the previous message with the issue, it will be fine because I’ve purged its cache.

The CLS issue appears suddenly in pages that were fine, and I can only fix the pages by either purging them individually or deactivating the plugin.

It takes a lot of time to check my website daily (over 170 pages) to find and purge the cache of the pages with the issues.

The performance of my website improves a lot with the plugin, and I really want to keep it. I know it is a strange case, but would you please help me on this?
Perhaps, is there a way to find the files that are not suppose to be cache and create page rules for those files? or exclude them?

This page did not have the issue yesterday, and today it does: https://mayangateway.com/best-nicaragua-treks/
I’m going to leave it with the problem, without caching it so that you may see an example.

I know it is a strange case, but I guess it could be useful to other users that have the same problem as I do.

Thank you in advance for your assistance.
Best wishes,

Hi,
I totally understand what you are saying but I can assure you that the CLS issue is not coming from the plugin but rather coming from your site design.

When I checked page speed inside for the above mentioned URL: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmayangateway.com%2Fbest-nicaragua-treks%2F&tab=desktop
I saw that there is no CLS on Mobile: https://i.imgur.com/VqtxfyE.png

But on desktop, there are major CLS issues: https://i.imgur.com/viKMbrS.png
On the page speed insight page it even shows the list of items that are causing CLS: https://i.imgur.com/BBzYo7K.png

Upon checking your page further I can see that there are lots of elements moving around. Please note that as per the Core Web Vitals guidelines, no element of your page should change it’s position, design or looks in any way from the point of initial loading. So, when someone comes to a page each element should remain at it place always.

But when I checked your page, I saw that is not happening and a lot of items are moving around. Take a look at this loom: https://www.loom.com/share/de77477a8b904b1483a7d0caaff3ee2a

As you can see your contents are shifting around and changing positions like crazy. This is because of your theme and elementor, not this plugin. Even if you disable this plugin the core web vitals issue will remain on your site unless you use a theme what has been properly coded following all the guidelines. Your contents are highly javascript dependent which is basically means that initially your page look in a way and then after the javascript are loaded it changes it’s looks, hence the CLS.

Aain, there is nothing that can be done about it via this plugin or via Cloudflare, even if you buy the enterprise plan.

Hi Saumya,

Thank you for this information and your speedy reply. But then, why the problem disappears if I purge the page? or if I deactivate the cache and/or your plugin? also, why the pages with the issue are always different?

If you wish to see it, I can purge the cache of the link that I sent you in the previous message, and then you will see that the page is correct again. You see that the page has CLS issue in the PageSpeed test, but if you test any other page of my website you will not find this issue: https://mayangateway.com/
And as I said, if I purge the cache of the page of the previous message, you will see it correctly with cero CLS issues.

The pages are always different, later today I will have a couple of different pages whit the issue, and I will be able to fix them if I purge them.

Perhaps, I shouldn’t have said that your plugin specifically is creating the CLS, but the Cache Everything page rule that implements the plugin.

Best wishes,

But then, why the problem disappears if I purge the page? or if I deactivate the cache and/or your plugin? also, why the pages with the issue are always different?

– It does not. Deactive caching and disable the plugin. Then use an incognito window and throttle your internet and test like shown in the loom video.
You can disable caching on this plugin and let me know. I will check the page again.

As I said before, this is just a caching plugin and has nothing to do with CLS.

Yes, the problem disappears when I purge the pages.And yes, the problem disappears when I deactivate the plugin.

As proof, you may check the page now:https://mayangateway.com/best-nicaragua-treks/
(just refresh your browser please)

I know your plugin has nothing to do with CLS. But, your plugin activates the Cache Everything page rule of CloudFlare. I already tried this page rule when I had the business plan of CloudFlare, and I had the same issues. It was very difficult because as you know we are caching dynamic content, so I was very happy when I found your plugin as I am not an expert but I do know this situation very well because I’ve been trying to find a solution since two months ago.

and please, don’t get me wrong, I really want the plugin.

OK. Now I do see, what you have ben saying all along. It seems that elementor is generating different files for different devices. By that what I mean is that when you access your page via a mobile device some different CSS/JS are loaded and when you are accessing the page via desktop some other files gets loaded.

Now this is not true responsive system and with this system you will never be able to use a proper caching system and it will always give you the problem. The reason I am saying this is because lets say your page https://mayangateway.com/best-nicaragua-treks/ initially is not cached by Cloudflare.

Now the first request of this page came from a mobile device and hence Cloudflare caches the page with whatever content and HTML structure it had. Now when the same page is being visited from a desktop, the PHP is not getting parsed anymore and Elementor is not able to add the new dynamic styles for the desktop, instead the page is being served via the Cloudflare CDN cache. Now as CF initially cached it for the mobile, it delivered the page as it received initially causing your CLS issue.

That is the main reason for this problem. Unfortuantely in this situation, you won’t be able to use a cache everything page rule as the page is always needs to be served from the origin server after executing PHP.

On a true response design website this doesn’t happen. The design and code remains static while they morf themselves to the situation as needed without the need for any dynamic generation.

Hope this clarifies the question you had about why this was happening.

Thank you for your answer. I knew Elementor is causing these issues. However, isn’t WordPress dynamic anyway? so is there not a way to avoid these files from Elementor to create these problems? perhaps a page rule or anything with the plugin settings?

or you’re saying that I can’t use the plugin at all? but there should be a lot of Elementor user that have your plugin, or not?

Yes WordPress is a Dynamic system but when the first request (i.e. the HTML) is being cached by Cloudflare, when that cached response is served from CF CDN there is no PHP involvement. So, first time when someone request the page at that time it is not cached in CF so, page gets generated by WordPress after executing all PHP logics. But after CF caches the HTML of the page to it’s CDN server and from then on serve it from the CDN without even sending the request to the origin server.

Due to your current setup, this plugin (as well as cache everything page rule) will cause web vitals issues on your site so I would recommend only taking advantage of the plugin when you have a proper responsive website whose response ness is not managed by PHP logic like it is happening right now.

Hi again,

I understand, but basically your plugin is not compatible with Elementor then? or it doesn’t work very well with Elementor?

I haven’t worked or even tried to change any PHP settings, based on what you said, the problem only comes from the different Elementor CSS/JS files.

The plugin is fully compatible with elementor but your elementor setup is different where designs for different devices are being generated dynamically. That’s why you are seeing the core web vital issue, but then again the plugin is fully working and caching your pages as it is supposed to. Due to your implementation, you are seeing the issues.

I understand, I needed to know that because I’m contacting Elementor at the same time to find out a solution.

In the meantime, I have disabled in Elementor an ‘experiment’ that I had previously enabled. It is in Beta Status, and it is called Improved Asset Loading. It sounds a little like what you are explaining me: https://elementor.com/help/optimized-assets-loading/?utm_source=experiments&utm_medium=wp-dash&utm_campaign=learn
It says that when activated, parts of the infrastructure code will be loaded dynamically, only when needed. What do you think? perhaps that could be the setting that I needed to change?

Thank you for your patience by the way!

Yes, that sounds like the culprit. Can you try disabling that and then check is the problem gets resolved?

ALso if you are using “Conditional and Inline CSS Load Experiment”. Trurn that off as well.

Basically, turn off any experiments that lead to dynamic loading of assets.

Thank you! Done, I have disabled it.

The only two other experiments that I have enabled are:

1. Optimized DOM: https://elementor.com/help/what-is-the-optimized-dom/?utm_source=experiments&utm_campaign=learn&utm_medium=wp-dash
2. Accessibility Improvements: https://elementor.com/help/accessibility-improvements-experiment/?utm_source=experiments&utm_medium=wp-dash&utm_campaign=learn
What do you think? should I keep them? I didn’t really see any performance gain with the experiments anyway.

I will need sometime to test, usually the issue come after like 6 hours at least. I will let you know once I’m done, perhaps this may help other Elementor users.

Well, if they are not helping you much you can disable them. Ok. so after you have disabled them, have you tested, is the issue still persist?