Home › Forums › Support › CLS issue on Home page for mobile, and after first image on posts for desktop.
- This topic has 15 replies, 3 voices, and was last updated 3 years, 2 months ago by Leo.
-
AuthorPosts
-
February 11, 2021 at 6:59 pm #1655200Kevin Wabiszewski
Hi,
I posted once about recent CLS issues on GP. Switching from floats to flexbox made the CLS times go down significantly.
I am using google page speed to try and get CLS to zero. On the home page and page 1, page 2, page 3 etc, the CLS on mobile is yellow in the lab data. It references the first paragraph text as a CLS contribution of .174.
There is a desktop CLS shift of .015. This happens on most pages on all my GP websites. It is not a huge value but varies from 0 to .06 and would be nice to bring it to zero.
Any suggestions would be appreciated!
Thank you!
February 12, 2021 at 4:25 am #1655594DavidStaffCustomer SupportHi there,
you have the Critical CSS option enabled in your cache plugin.
The automated version isn’t accurate enough to cover all the basis. And will defer some of the Themes CSS that is required on initial load.Unless you know how to manually write your own critical CSS then you should disable that option.
February 12, 2021 at 10:51 am #1656203Kevin WabiszewskiDavid,
Thanks for the response.
I turned off the Optimize CSS check box in wp rocket. I thought it would slow down the site but did not.
However, this did not change the CLS times. The homepage for example still has a CLS of .175. I did clear the cache for the entire site.
Any other ideas?
Thank you.
February 12, 2021 at 11:21 am #1656233Kevin WabiszewskiDavid,
I also removed all custom CSS to see if that helped and it did not.
February 12, 2021 at 12:59 pm #1656325LeoStaffCustomer SupportAny chance you can disable all plugins except GP Premium and let us have a cleaner look?
February 12, 2021 at 2:21 pm #1656376Kevin WabiszewskiLeo,
Everything is deactivated for a bit. Let me know if this helps you troubleshoot.
Thank you!
February 12, 2021 at 2:24 pm #1656378Kevin WabiszewskiIt did remove the CLS issue. Let me reactivate them slowly and see what plugin is causing the issue.
February 12, 2021 at 2:24 pm #1656379LeoStaffCustomer SupportI’m getting 0 for CLS using PageSpeed Insights:
https://www.screencast.com/t/BTAlY6G9QwKCan you confirm?
February 12, 2021 at 2:44 pm #1656388Kevin WabiszewskiIt looks like it was from a3 lazy load. The problem with leaving that disabled is that long pages become very slow on mobile.
I could try playing around with the settings on A3 and WP-rocket to see if I can find the ones that work best.
I like a3 for lazy loading because it has an image load threshold to make lazy loading images appear instantly when scrolling.
Do you recommend lazy loading images with WP-rocket for GP?
February 12, 2021 at 2:58 pm #1656398LeoStaffCustomer SupportI don’t have a recommendation for this unfortunately.
Personally, I don’t use any lazy loading or caching plugins.
The only optimization I do is to use Autopimize:
https://docs.generatepress.com/article/configuring-autoptimize/And also use a site like this to optimize the images:
https://imagecompressor.com/February 12, 2021 at 3:40 pm #1656428Kevin WabiszewskiI see. On long pages, these are needed.
In A3 lazy load, not lazy loading the, Post Thumbnails, removed the CLS issue on the home page for some reason. Strange because there are no thumbnails on the homepage but I will take the fix.
Turing lazy loading on for images still creates the smaller CLS on posts around .06 seconds. I can not figure out why it happens or how to remove it.
Any ideas now that we know it is coming from lazy loading the first image?
Thank you.
February 12, 2021 at 3:51 pm #1656435LeoStaffCustomer SupportJust to make sure, we are talking about the first image in this post here right?
[URL removed]If so you will need to exclude that image from being lazy loaded – likely by adding a specific class for A3 lazy load.
Can you check with their support team first?
February 12, 2021 at 4:06 pm #1656443Kevin WabiszewskiLeo,
Thanks for your help.
I guess WProcket made some improvements to their lazy loading features. I am just going to use that rather than A3 lazy load and it solves the issue.
Thank you!
February 12, 2021 at 4:18 pm #1656448LeoStaffCustomer SupportNo problem 🙂
February 12, 2021 at 5:13 pm #1656472Kevin WabiszewskiSee customer support message.
Thanks again!
-
AuthorPosts
- You must be logged in to reply to this topic.