Images without dimensions — Layout Shift
Source: Nidhinkumar
If you don’t have time to read but want to know the crust of this post. Find the quick read 👇
A quick read of what we are going to look at today
After days of hard work building a web application where you feel proud yourself that you have built something great until the fishy eye spots the change
“I was about to click it! but why did it move? 😠”
Still, you are clueless about what we are talking about. Just look at the below example
Spot the change
Still couldn’t figure out what’s happening 🤔. Okay, let’s break the suspense.
In the above example, an image is getting loaded in between the two texts.
Oh, yes man we could see that in the picture what’s wrong with it. If that’s the question that strikes your mind right now then my answer is i haven’t completed my words yet. Just look at the below pic
Spot the difference
As I have said earlier an image is added in between the two texts (maybe it took some time to load the image that’s the glitch that we see in between the image and the text)- That’s what a user thinks🤔.
🙋 But the developer raises the question but I have set the layout like below
Layout block
Then why does it behaves like this
Layout shift
Why there is a shift in the layout ❓
By the way that’s the topic, we are going to explore today 📄
Layout Shift
We will look into
What is Layout Shift
What is CLS a.k.a Cumulative Layout Shift
What is a good CLS Score
Layout shifts for images
How to fix Layout shift for images
1. What is Layout shift?
Layout shifts are defined by the Layout Instability API which reports the layout-shift entries any time an element that is visible within the viewport changes its start position between two frames such elements are called unstable elements.
A burst of layout shifts know as a session window, occurs when one or more layout shifts occur in rapid succession with less than 1 second between each shift and a maximum of 5 seconds for the total window duration. The largest burst is the session window with the maximum cumulative score of all layout shifts on that window
2. What is CLS a.k.a Cumulative Layout Shift
CLS is a measure of the largest burst of layout shift that occurs during the entire lifespan of a page.
A layout shift occurs when a visible element changes its position from one rendered frame to another
3. What is a good CLS Score
To provide a good user experience, sites strive to have a CLS score of 0.1 or less.
CLS Score
To ensure you are hitting this target for most of the users, a good threshold to measure is the 75thpercentile of page loads, segmented across mobile and desktop devices.
4. Layout shifts for images
One of the easiest things we can do to reduce CLS is to ensure the width and height for the image tag explicitly.
But hold on I have used CSS class where I have added the width and height for the image tag 👇 then why there is a shift ❓
HTML
👉 Images that aren’t explicitly declared with width and height attributes are usually resized using CSS (either on the image or in the parent container itself) When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the unsized image
Bad and Good CLS
👉 By Explicitly declaring width and height attributes we can ensure that the browser will calculate and reserve sufficient space for the images. This can minimize the main-threadwork, prevent large layout shifts and create a smooth experience for your visitors
5. How to fix Layout shift for images
Simply specify both width and height for the image element explicitly which ensures correct spacing is used for images
The modern browsers will calculate the aspect ratio for the image automatically based on the width and height.
Congratulations 🏆
You have learned what is Layout shift, What is Cumulative Layout Shift, and how to reduce layout shift for images
Catch you up in a new post till then Happy Learning!
Reference Links 🔖
PageSpeed Insights
*Have specific, answerable questions about using PageSpeed Insights? Ask your question on Stack Overflow. For general…*developers.google.com