ThemeIM Blog Details

How to Reduce Cumulative Layout Shift

How to Reduce Cumulative Layout Shift

Often, layout shifts can be distracting. Suppose you found something interesting while reading an article. Just when you were finally getting the point of a specific paragraph, elements began shifting around all of a sudden. As a result, you will need to find your last position again, which can be frustrating.

Now, imagine you want to establish a brand image for yourself.—In that case, would you prefer frequent layout shifts on your website? Of course not. The total manufacturing of a car is postponed when there is a slight mistake. Similarly, this small issue is more than enough to create a bad user experience.

What is Cumulative Layout Shift?

Cumulative Layout Shift

Cumulative Layout Shift or CLS is a Core Web Vitals metric that measures the volatility of content by adding a layout shift score that does not occur within 500 milliseconds of user input.

The equation for finding a layout shift score is like –

Layout Shift Score = Impact Fraction x Distance Fraction

Scores of cumulative layout shifts are applied depending on the movement of the unstable elements between the two rendered frames and the size of the browser viewport. The final score is then calculated by multiplying the ‘effect fraction’ by the distance fraction.

If we find a distance fraction of 0.10 and an impact fraction of 0.75, then the cumulative layout shift will be –

Cumulative Layout Shift Score = 0.75 x 0.10 = 0.075

How to reduce Cumulative Layout Shift: Effective Methods That Works Every Time

If you read this far, you probably understand what cumulative layout shift is and how to calculate it. But you still don’t know how to reduce CLS or cumulative layout shifts. That’s exactly what we are going to discuss now.

Procedure 1: Using Aspect Ratios on Images

Examples Aspect Ratios on Images

Being mobile-responsive is the new fancy. Your brand won’t get a chance to improvise if the website is not responsive and only appears beautifully on desktops. That being said, modern browsers are smarter than ever and they tend to set the aspect ratio based on the width and height of the image.

Images are the first reason for cumulative layout shifts. Whether or not you have ads or other content, you will eventually insert images for various reasons. Just try to specify the width and height size attributes while inserting images or videos on your website.

Related and Important: Increase Page Speed using htaccess

—The browser will do its best to adjust the aspect ratio based on the width and height attributes of the image. This happens at the very early stage of layout calculation to prevent images from shifting.

As for responsive images, the aspect ratio is mostly defined by the srcset attribute. You just need to ensure all images have the same aspect ratio to make the browser understand. The result is – perfect image layouts on any device.    

Pro-Tip – 

Using the ‘object-fit: contain’ CSS property can be a viable solution to prevent cumulative layout shifts, especially when you are unable to add image dimensions and aspect ratio to the HTML. All you need to do is estimate a proper aspect ratio and use the CSS property.

Procedure 2: Preload Web Fonts

Preload Web Fonts

Instead of downloading web fonts, again and again, it is better to use the Font Loading API. This will cut off the time taken for downloading web fonts. Font-display tools can be a great alternative. It turns custom rendering fonts to values like swap, fallback, auto, block, and optional.

However, there is a problem using a font-display tool. Turning all these rendering fonts may layout the page differently. This may result in cumulative layout shifts.

One effective solution for CLS is to use preloaded web fonts. For example, Google recommends using the most used web fonts for all browsers from Chrome 83 to the latest version.

Preloaded web fonts fulfill the requirements of “First Paint” and help prevent layout shifting. For most used web fonts, the browser already understands that they should be downloaded earlier. So, the browser fetches this earlier in the application. As a result, it is removed from the critical request chain.

Procedure 3: Reserve Space for Ad Slots

Reserve Space for Ad Slots

As is often seen, the layout shift decreases even after being able to offer dynamic ad sizes. This is because the ad tags the content element before the library is loaded. Typically, statically style slots are the size of the DOM element and are passed to the tag library. Slot size will be saved to prevent layout shifts before ads are off-screen loaded.

—Even after the page layout is set, the tag library may change the size of the ad if there isn’t enough space available. As a result, there are high chances that the ad will shift on the area of the page where the user will be clicking. This will significantly drop the quality of the user interface.

You can follow the best practices for ad slots without CLS that are offered by Google itself –

  • If it doesn’t return any ad, ignore collapsing space allocated for ads. Try using placeholders instead.
  • If you are not bothered with a little white space, it is better to reserve extra spaces for ads for preventing shifts.
  • Use the most used sizes for each ad slot. This can give the best odds.
  • Try to avoid placing ads on top of the viewport. Because, if they have too much content they may shift to viewing areas.

Procedure 4: Commute Space for Embeds in Advance

Pre-compute space for embedding is another great way of reducing cumulative layout shifts. Embeds are often responsible for causing CLS. Placeholders or fallbacks are great options to precompute ample space for embeds.

Another important: Eliminate Render Blocking Resources

Please follow these steps to achieve this –

  • Using the developer tool, obtain the height of the embed by inspecting it.
  • Design a placeholder measuring the exact dimensions of the embed.
  • Placeholder size may vary depending on various form factors. You can use media queries to account for such differences.
  • The iframe will resize itself to contain the content as soon as the embed loads.

Reaching 0 Cumulative Layout Shift

The above practices are the answers to how to reduce cumulative layout shift to 0 in WordPress. Aside from that, following the steps below can also help your website reach 0 cumulative layout shift –

  • Identify the elements on your website that are shifting.
  • Avoid loading CSS asynchronously.
  • Use critical CSS to load asynchronous CSS without FOUC (Flash Of Unstyled Content)
  • . Local fonts are good for hosting and you can preload them from time to time.
  • Use the Swap Google Fonts Display plugin if you are using Google fonts to avoid layout shifts due to  FOIT (Flash Of Invisible Text).
  • Specify image dimensions accurately for mobile and other devices.
  • Also, specify the dimensions of videos and iframes.
  • If you are using any animations, you need to apply some CSS transform properties.
  • Use CSS property transform: scale() – instead of changing the width and height attributes
  • Use CSS property transform: translate() – to move the elements without causing CLS.
  • Reserve enough space for advertisements so that they won’t shift around.
  • Use dynamic content properly as they are one of the common offenders of CLS.

Although the following video is about WordPress speed optimization guiding you on how to get a 100% score on Google PageSpeed Insights, we found it very useful for reducing cumulative layout shifts as well.

Summary

Get rid of CLS and reach 0 cumulative layout shifts for your website by following the instructions in this article. If you are serious about your website performance and you are willing to take it to the next stage, you have to take the necessary steps as early as possible to reduce cumulative layout shifts.

—That’s it for today, we are assuming your web pages are now less shifty after implementing the above practices

Editor Team

We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.