[Resolved] CLS issue on Home page for mobile, and after first image on posts for desktop.

Home Forums Support [Resolved] CLS issue on Home page for mobile, and after first image on posts for desktop.

Home Forums Support CLS issue on Home page for mobile, and after first image on posts for desktop.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1655200
    Kevin 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!

    #1655594
    David
    Staff
    Customer Support

    Hi 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.

    #1656203
    Kevin Wabiszewski

    David,

    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.

    #1656233
    Kevin Wabiszewski

    David,

    I also removed all custom CSS to see if that helped and it did not.

    #1656325
    Leo
    Staff
    Customer Support

    Any chance you can disable all plugins except GP Premium and let us have a cleaner look?

    #1656376
    Kevin Wabiszewski

    Leo,

    Everything is deactivated for a bit. Let me know if this helps you troubleshoot.

    Thank you!

    #1656378
    Kevin Wabiszewski

    It did remove the CLS issue. Let me reactivate them slowly and see what plugin is causing the issue.

    #1656379
    Leo
    Staff
    Customer Support

    I’m getting 0 for CLS using PageSpeed Insights:
    https://www.screencast.com/t/BTAlY6G9QwK

    Can you confirm?

    #1656388
    Kevin Wabiszewski

    It 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?

    #1656398
    Leo
    Staff
    Customer Support

    I 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/

    #1656428
    Kevin Wabiszewski

    I 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.

    #1656435
    Leo
    Staff
    Customer Support

    Just to make sure, we are talking about the first image in this post here right?

    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?

    #1656443
    Kevin Wabiszewski

    Leo,

    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!

    #1656448
    Leo
    Staff
    Customer Support
    #1656472
    Kevin Wabiszewski

    See customer support message.

    Thanks again!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.