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!
-
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.
- The topic ‘A3 Lazy Load and Cumulative Layout Shift’ is closed to new replies.
