- This topic has 82 replies, 5 voices, and was last updated 2 weeks, 1 day ago by David.
September 8, 2020 at 8:08 am #1435507Deepak
How can I fix the CLS issue reported by Google PSI
I am using Flyingpress cache plugin. I have tried with and without this plugin but CLS always reports these 5 elements
While on my production site there is no such issue
Can you please help here.
DeepakSeptember 8, 2020 at 3:00 pm #1435869TomLead DeveloperLead DeveloperSeptember 9, 2020 at 1:45 am #1436217Deepak
No it is not yet fixed.
I did some changes but I don’t have 100% success. If you execute PSI multiple times them we see this shift in some of the execution
In all such execution this class is the culprit but how do I fix it
DeepakSeptember 9, 2020 at 6:21 am #1436481DavidStaffCustomer SupportSeptember 9, 2020 at 6:29 am #1436492Deepak
Thanks David for looking into this
For mobile the CLS shows 0, I assume because the sidebar is not involved there.
For desktop I see the problem mostly
You can check this link
DeepakSeptember 9, 2020 at 6:57 am #1436535DavidStaffCustomer Support
On your Site URL provided in the original topic i see 0 CLS for both Desktop and Mobile.
And i also see 0 on the new link you provided.
I tested again on local dev tools > lighthouse and again the result was 0 and
Avoid large layout shifts No elements foundSeptember 9, 2020 at 7:12 am #1436571Deepak
Apologies for this but it keeps coming for me
Can you run multiple trials on the same link. Even if this is not visible in your trial, can you please help on how we can control the shift for this
<div id="primary" class="content-area">September 9, 2020 at 7:29 am #1436608DavidStaffCustomer Support
I just ran the test 10x on that latest URL and not once did it report a CLS issue on either mobile or desktop.
I would begin by disabling the Flying CSS you’re using in case this is messing with the CSS order, and as you have custom CSS that is controlling its layouts is the most likely reason this ‘random’ warning occurs.September 9, 2020 at 7:54 am #1436806Deepak
Thank you for the swift response and validating
I was also testing different combinations in the backend and I think I have found a stable configuration which seems to be working.
The issue was also there “without” FlyingPress, I also tested by completely removing my custom CSS but that also didn’t helped.
Now instead of using External File for Dynamic CSS, I am using “Inline Embedding” which seems to have done the trick (not sure how?)
With this change I also did multiple rounds of testing and I can see CLS as 0 now.
I have also disabled critical CSS of FlyingPress (somehow this setting worked with my theme on production site but here it looks like is not required).
But I would like to understand how both the options for dynamic CSS impact the CLS? Do you have any idea?
DeepakSeptember 9, 2020 at 2:24 pm #1437273TomLead DeveloperLead Developer
It’s possible that something was moving the CSS files to the footer (critical CSS). That would make elements display without CSS styling until those files are reached and loaded.September 12, 2020 at 1:07 am #1440171Deepak
I did some more testing and definitely there is some issue with the theme which needs optimization.
I used the lighthouse from the developer tools to get more detailed stats on the layout shift
You can check this video for more details, this is collected for mobile but same is also seen for desktop as well
I hope someone can consider this and check this further.
DeepakSeptember 12, 2020 at 1:10 am #1440173Deepak
Just to add, I am only using minify CSS (no critical CSS, no combine CSS) from WP Rocket
verified the issue exists with default theme layout (without custom CSS or any caching plugin) when the theme is used with sidebar/content/sidebar layout.
The issue is not seen if I use content/sidebar.
DeepakSeptember 12, 2020 at 4:07 am #1440326Longinos
I´m facing some issues related to this. In my case, when secondary menu, abobe the header, is centered.
To see the issue in the url provided here, you must go to Dev Tools -> Performance and set network to Fast3G and cpu to 4xslowdown.
Make a record and then you can see that the web page is showed w/o issue, until the logo and the 2 side-bars disappears and then appears again.
Css files are loaded in top. Seems that some elemens make a reflow and some no, so the elements that don´t reflow are moved.September 12, 2020 at 4:14 am #1440331Deepak
Yes, in my case also I see layout shifts with secondary menu in Google PSI but that is more sporadic
For me the content layout shift is seen quite often for the primary body container.
We can actually see the shift happening on the browser, here is a video from my page (just doing refresh)September 12, 2020 at 4:57 am #1440371Longinos
In this image,you can view the reflow. Css code is inlined at top of the page so not FOUC here.
Ah! forgott to mention, the theme is 3.0.0 Alpha 4, but in 2.4.2 the issue is here too.
In this case Dev Tools don´t report CLS issues, but the LCP is about 2000ms because is when it appears for second time.
So the issue maybe is why these reflow that cause CLS and large LCP delays?
- You must be logged in to reply to this topic.