[Resolved] CLS issue

Home Forums Support [Resolved] CLS issue

Home Forums Support CLS issue

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1524451
    Bernhard

    Hello,
    Search Console complains CLS issue more than 0.25 (mobile) for the whole site.
    I tested with page speed insight and it says CLS field data 0.18 lab data 0
    With Webpagetest it says CLS 0.184
    I tested with the Chrome developer tools ->network->no cache->3G but I haven’t seen any shift.
    The logo is cached (WP Fastest Cache).
    Have you any suggestion how to solve the problem? Thank you.

    #1524452
    Leo
    Staff
    Customer Support

    Hi there,

    If you look at the result from Page Speed Insight, you can see that the featured image seems to be the issue:
    https://www.screencast.com/t/qKMBeJxrT6m

    Looks like it might be lazy loaded?

    Can you try disabling your caching plugin to test?

    Thanks 🙂

    #1524467
    Bernhard

    Hi Leo,
    this brings the CLS to 0 also in Webpagetest.

    So I have to check this with WPFastest Cache, right?

    During my tests I found that the featured images, and the background images in page hero, are loaded full size even on mobile. I think, this is one of the main reasons why I have so bad load times on mobile. Is there a way to load scaled images?

    Thank you.

    #1524554
    Leo
    Staff
    Customer Support

    I think you just have to exclude featured image from lazy loading.

    Does WP Rocket allows you to specify the classes to be excluded from lazy loading?

    #1524870
    Bernhard

    Hello,
    I have now disabled lazy load in WP Fastest Cache and enabled in Autoptimize. This seems to solve the CLS problem.

    The remaining question is, why featured images and page hero backgrounds are not scaled on mobile. I mean, the full size is loaded and not a smaller resized image.

    Page hero sample

    Featured image sample

    #1525033
    David
    Staff
    Customer Support

    Hi there,

    Page Hero images are loaded as CSS backgrounds, there is no simple way to load a different sized image for different device sizes.

    Featured Images are displayed responsively using src-set images.
    In your case your src-set only contains the original image size 672 x 345px and the thumbnail size of 300 x 154px
    The browser will choose the most suitable size images.
    You could register another thumbnail size of say 400px for the browser to choose from BUT as the majority of Mobile devices are HD/Retina then they will still load the larger image.

    #1525203
    Bernhard

    OK, probably I will prepare the page hero background in a lower resolution or with another compression.

    For the featured image, would it be possible to block loading on mobile devices or (slow) mobile connections?

    #1525487
    David
    Staff
    Customer Support

    There isn’t a reliable solution for disabling featured images only on Mobile device. As your servers Page Caching will generally capture the images and still serve them up on mobile devices.
    Maybe the best thing would be to reduce the number of posts you’re displaying in your arhives.

    #1527477
    Bernhard

    OK, thank you.

    #1527557
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.