Ever feel personally victimized by ads?

And we’re not talking about the content, although sometimes that can hit a little too close to home (we’re looking at you, AdChoice). We’re referring to those moments when you land on a page, start scrolling, and all of a sudden it’s as if someone forgot to batten down the hatches; ads and what-have-you are flying across the screen, causing you to try and close them out which only results in accidentally clicking the ad and taking you to a website you have no desire to peruse.

To incentivize website owners to fix web page behavior like this, Google released their Core Web Vitals in June 2021, three metrics that attempt to quantify how user-friendly a web page is. One of these three Core Web Vitals is called “Cumulative Layout Shift”, and is characterized by scenarios like the one described above. Journey onward into this article to find out everything you would need to know about CLS, and if you have questions at the end, toss ‘em our way!

What is Cumulative Layout Shift? What are Layout Shifts?

Cumulative Layout Shift is a measure of the largest burst of “layout shift” scores that happen over the lifespan of a webpage. Any time an element that is visible to a user moves, a layout shift score is calculated. 

When these shifts happen in quick succession, it is called a session window; CLS is the maximum cumulative score of the session window with the highest aggregate layout shift scores of all session windows over the lifespan of a web page.

#1: How Do You Calculate CLS?

Oof, buckle up for this one. It’s gonna be a bumpy ride.

Unlike the other two Core Web Vitals, Largest Contentful Paint and First Input Delay, Cumulative Layout Shift gets its very own equation:

Cumulative Layout Shift = Impact Fraction * Distance Fraction

Let’s begin by unpacking impact fraction. Impact fraction, as the name suggests, measures how unstable elements in a viewport impact the user’s viewing experience between two frames. To get the impact fraction, you add the visible areas of impact, or movement, for the unstable elements between two frames.

Distance fraction is similar, yet different. Distance fraction is calculated by taking the greatest distance any unstable element has moved in the frame divided by the viewport’s largest dimension (either width or height). It is basically a spatial metric for how far an unstable element travels between two frames. The first “frame” to which we’re referring is like the before shot, and the second frame is like the after shot. The difference in position of the element from the before and after frames is measured and divided by either the width or height of the viewport and BAM! Distance fraction magic.

Take these two numbers, toss ‘em in a calculator, and you have determined one layout shift. CLS is the aggregate of the largest session window of layout shifts.

Now you see why we told you to buckle up?

#2: Why is CLS Important?

We think it’s pretty indicative of a user’s satisfaction when elements moving on their screen cause them to click unintentionally on the wrong thing, and Google agrees. That’s why CLS is one-third of the way Google judges the goodness of websites, and one of the many ways you can improve user experience on your site to drive up traffic. Because if Google deems your site user-friendly, your website is more likely to show up on the first page of Google search results.

CLS is important because it’s empirical evidence that you can use as a starting point to springboard your site into getting more traffic, and hopefully more business. Here at Marketwake, we believe and practice the idea that capitalizing upon any and all data will always lead to better end results. Because when it comes to marketing and SEO, it is an absolute necessity to work with the consumer in mind. 

#3: What Causes Cumulative Layout Shift?

There is usually one huge culprit for a CLS issue: ads. Everyone has experienced a website laden with ads that hop all over your screen, flashing and moving so much that they should have come with an epilepsy warning. Those types of ads have dynamic sizes to bring in revenue by causing higher click rates, but unfortunately, they also push visible content around on a page.

Some other things that can affect CLS score are images placed in a site without dimension specification, downloading and rendering fonts for a webpage, and inserting new content above existing content (dynamic content).

#4: How to Optimize Cumulative Layout Shift

Best practices for showing ads and preventing them from affecting your CLS score include reserving space for the ad to sit statically on a web page, proceed with caution when putting non-sticky ads at the top of a user viewport, and reserve the largest possible amount of space for ads to reduce the chance of a shift.

When putting videos and images onto your web page, make sure to always specify height and width attributes. Giving the browser these specifications ensures that your page will load correctly.

Downloading fonts can cause one of two layout-shifting things to occur: either the fallback font (the font used when a symbol in another font is not recognized) is swapped with a new font, causing a flash of unstyled text (FOUT); or invisible text (computer text that is not visible to the user) is put in place of the new unrecognized font symbol, known as a flash of invisible text (FOIT). Ensure that you have tools in place to make sure that fonts display while the browser loads them to minimize the effects of font rendering on your CLS score.

You may not know dynamic content by name, but you certainly have seen it before. Anything that yells at you from a little pop-up box to “Sign up!” or “Get 30% off your first purchase if you act NOW!” is dynamic content. If you have this content, or wish to show it to your site visitors, make sure you reserve space for it in the viewport. This will ensure that, come loading time, the dynamic content does not shift the layout of other page elements.

The Bottom Line

Oh Google; you keep us on our toes, that’s for certain. But Core Web Vitals are useful in that they give us guidelines to follow that can lead us down the path of better websites for both users and owners. 

We hope that this article has been an SEO version of a glance behind the Wizard of Oz’s curtain, but if it hasn’t and you’re thinking, I don’t even know where to begin to fix my CLS, connect with us here at Marketwake! Reach out to us today to start a conversation.