Archived topic
CLS issue on desktop
44 replies · Started by ETO on September 8, 2021
Hello,
There is a CLS issue on desktop, most of which is caused by <div id="primary" class="content-area">.
Could you please have a look at what causes the problem?
Hi there,
Does the issue exist without WP Rocket?
Let me know :)
The issue does not exists without WP Rocket. When I first noticed this problem, I had been using Lite Speed Cache plugin. Then I switched to the WP Rocket in order to get rid of this issue. But there is no change.
In that case, I would recommend checking with WP Rocket's support team to see if they can help to identify the issue and perhaps improve it within their plugin settings.
Hello, again Leo. I disabled and then deleted the cache plugin. Now, there is no cache plugin installed at all and also Cloudflare is in development mode. However, the CLS issue still exists, which makes me think the problem is about the theme. That is why I need your help.
The theme itself shouldn't have any CLS issue.
Can you disable all plugins except GP Premium to test?
I disabled all the plugin that is likely to cause the issue. Moreover, I noticed the hooks I use for displaying Adsense ads are likely to cause the problem.
I tried disabling the hook but it did not work at all.
Yeah AdSense is a common cause I think.
There is also this box at the bottom which is loading slower than the rest of the page so that might be the issue:
[screenshot removed]
Can you disable all plugins and the Elements module in GP Premium for us to take a look?
Please do so in a staging site if this is a live site with traffic.
I disabled that box at the bottom and it seems that it is not the cause of the problem. As my site is a live site with a lot of traffic, I cannot disable all the plugins. So I created a staging site so that you can have a look at the problem.
Can you do this on the staging site?
Can you disable all plugins and the Elements module in GP Premium for us to take a look?
I disabled all the plugins on the staging site but could not deactivate the elements module as there is no option to do so. You do any necessary changes on the staging site to detect the issue. I will delete the staging when we find what causes the problem.
I activated the GP Premium plugin and disable the Elements module.
The Lighthouse test shows 0 CLS for desktop:
https://www.screencast.com/t/FqAS9yCh
and mobile:
https://www.screencast.com/t/fP4mKK2tP7
So what causes the problem on the live site? All the plugins and elements module are disabled and we do not if the cause is the elements module or not. I know that many people who use GP have the same CLS issue <div id="primary" class="content-area">. So I would be grateful if you could help us solve this issue.
The elements module itself cannot cause the issue - it might be the content (like ads) you've added there.
I believe my tests and results above show that it's not a theme or premium plugin issue - please run the tests to confirm that for yourself first.
Then the next step is to activate all the things you've disabled one by one and identify which one is causing the issue.
For elements, you can activate the module first, then set all the elements to Draft status, then set each of them to publish one by one.