- This topic has 82 replies, 5 voices, and was last updated 2 weeks, 1 day ago by
.
-
Posts
-
Hello,
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 issueCan you please help here.
Regards
DeepakLead Developer
Hi there,
I just scanned the page you linked to and I’m seeing a 0 CLS. Did you resolve this?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHello Tom,
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 executionIn all such execution this class is the culprit but how do I fix it
Regards
DeepakCustomer Support
Hi there,
any particular post you seeing this?
I ran a pagespeed insights test and the results also show0CLS:
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 mostlyYou can check this link
https://testing.golinuxcloud.com/grep-recursive/Regards
DeepakOn 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 foundDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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">I tested on
https://testing.golinuxcloud.com/grep-multiple-strings/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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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?
Regards
DeepakIt’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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentHello,
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 wellI hope someone can consider this and check this further.
Regards
DeepakJust 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.
Regards
DeepakHi
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.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)
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.