Minimize CLS With Aspect Ratio Divs Wrapping Slow Loading Content

Published: 4 months ago

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

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
jimykx
jimykx
1 month 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
1 month ago

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

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram