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

  1. What is Layout Shift

  2. What is CLS a.k.a Cumulative Layout Shift

  3. What is a good CLS Score

  4. Layout shifts for images

  5. 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 ❓


👉 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!

Cumulative Layout Shift (CLS)
*Updated Jun 1, 2021: The implementation of CLS has changed. To learn more about the reasons behind the change, check…*

PageSpeed Insights
*Have specific, answerable questions about using PageSpeed Insights? Ask your question on Stack Overflow. For general…*