A3 Lazy Load and Cumulative Layout Shift

  • Hi,

    A3 Lazy Load is a great plugin! However, since Google Search Console has added the Core Web Vitals to the panel, my website is having a poor score in Cumulative Layout Shift due to the lack of a defined width and height for images. When an image is loaded, the text right below shifts and it causes a poor user experience.

    I have been trying to find a proper configuration in A3 Lazy Load’s settings, without any success.

    Is there a way to configure A3 Lazy Load to read the width and height attributes, which are declared in image’s attributes, in order to prevent this layout shift?

    Any help on that matter would be very appreciated.

    Thank you!

    • This topic was modified 3 years, 11 months ago by billbordallo.
Viewing 5 replies - 1 through 5 (of 5 total)

  • I am seeing similar issues. a3 lazy load adds its placeholder gif into src which has an aspect ratio of 1:1. The browser thinks the actual img has an aspect ratio of 1:1 and scales the entire frame.

    Not sure how to go about this. Did you find a solution?

    Same issue here. Thumbnails were all added as 1:1 and blew out my pages layouts.

    Thread Starter billbordallo

    (@billbordallo)

    Currently I am just ignoring CLS errors and warnings on Google Search Console until I find a solution (nothing found so far).

    I am having the same issue. Ignoring the CLS problems is not good as the CLS is a google core vital. My issue is just with the top avatar on the page which is a local image 40px by 40px pixels large.

    In the lab data, it shows a small .021s CLS. However, in-field data it ends up being large over the .1s requirement.

    If I use the full-size 150px-150px thumbnail it works. However, when making it small 40x40px it causes the shift.

    Here is the HTML when inspecting the image.
    img src=”ttps://www.website.com/wp-content/uploads/2021/02/author.jpg” width=”40″ height=”40″ alt=”Author, Technician”

    If I use a different caching program it removes the CLS. However, I like A3 lazy load and would like to continue to use it.

    Any ideas on how to solve this would be greatly appreciated.

    • This reply was modified 3 years, 8 months ago by cbw5007.
    • This reply was modified 3 years, 8 months ago by cbw5007.
    • This reply was modified 3 years, 8 months ago by cbw5007.
    • This reply was modified 3 years, 8 months ago by cbw5007.

    Actually, after looking into this more, it seems to be as Jupplid stated. The Aspect ratios save space for the width of the images rather than the height. This creates a really bad shift on all the images.

    Maybe A3 was expecting height to be defined frist. The theme I use defines the width and then the height. I will open another support ticket to try and get this solved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘A3 Lazy Load and Cumulative Layout Shift’ is closed to new replies.