isotropic-2022
Share
Blog
Search
Menu

Minimize CLS With Aspect Ratio Divs Wrapping Slow Loading Content

By James LePage
 on January 7, 2021
Last modified on January 7th, 2022

Minimize CLS With Aspect Ratio Divs Wrapping Slow Loading Content

By James LePage
 on January 7, 2021
Last modified on January 7th, 2022

CLS is caused by items loading into your page after the user has begun interacting with the content.

For example, if you have a slow loading video or image, and the user has already begun using your website, once it loads in it will push content up and down, resulting in a layout shift. This layout shift is very bad for your users experience, because it pushes the content that they were interested in on to a new position on the screen.

The user then loses their place, or tries to click on a button that was there seconds ago and no longer is, and gets frustrated. As part of Google's quest to make the Internet the best it can be, they severely penalize websites with major cumulative layout shift issues.

There are many ways to resolve these type of issues, and we have discussed them in depth and some other articles that we have published here. However, this is a very interesting method that we can use to reduce the number of cumulative layout shifts, and it's completely responsive to any screen size.

If you have a video or an image that has a standard aspect ratio, wrapping it in a div that has that same aspect ratio will ensure that there is position and placement for the slower loading item to populate as the data transfers and it loads into the page. Because there's already a position for it to load into, it doesn't push anything out of the way, eliminating any layout shifts that may occur.

This is incredibly helpful if you have dynamic elements that have a standard aspect ratio. For example, if you have a high resolution image that has an aspect ratio of four to three, but is set to be 100% wide, the actual pixel dimensions will change depending on the size of the screen. Therefore, you can't simply wrap it in a div that has a height of 400 fixed pixels. Instead, setting it so it has the same aspect ratio as the image, meaning the height could be any value, ensures that as the data transfers there is already space where to load into, removing the probability the layout shifts.

This is a great method for videos as well, as many of them are slow to load, but all have the standard aspect ratio of 16 by 9. Many advertisements are sized at 300 by 250 pixels, which is an aspect ratio too.

If you would like to learn how to create the div that wraps the slower loading content in a fixed aspect ratio that is responsive to the screen size, we recommend reading our article on how to do just that right here:

Responsive Aspect Ratio Divs/Boxes Using CSS Variables

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
jimykx
jimykx
10 months ago

I'm doing this with Oxygen, the DIV gets the correct aspect ration but for some reason the Div always pushes all the content outside of it and I can't figure out why :/

jimykx
jimykx
10 months ago

Ah of course, because the content inside the div needs to be positioned absolutely! (facepalm)

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram