A Brief Breakdown of Cumulative Layout Shift and Why Bloggers Should Care

Last year, Google released a “page experience” update. With new ranking factors worked into the mix, this search algorithm incorporates signals that speak to the user’s experience on their mobile device. This makes one thing clear: site owners must pay attention to how well users can navigate and interact with their site. Slow load time is a common roadblock, but it’s not the only one. Other user experience factors that can impact performance are speed, ease of navigation, readability, and content quality.

Page experience signals already take mobile friendliness, safe-browsing, HTTPS security, and the removal of interstitial popups into account. With this latest update, three KPIs (key performance indicators) were added to that list:

1. Largest Contentful Paint

The time it takes for a page’s main content to load. An ideal LCP measurement is 2.5 seconds or faster.

2. First Input Delay

The time it takes for a page to become interactive. An ideal measurement is less than 100 ms.

3. Cumulative Layout Shift

The amount of unexpected layout shift of visual page content. An ideal measurement is less than 0.1.

Pro-tip: If you’re a Chrome user, download this extension.

Let’s talk a little more about that third addition…

What is Cumulative Layout Shift (CLS)?

Cumulative layout shift, an important factor for bloggers to always consider, is the visual shift or bounciness that happens after a mobile web page loads. For me, the shift seems to happen at the very moment my finger touches the screen, often sending me to an ad or a different page altogether, not to mention a higher blood pressure.

Common Culprits for Slow CLS

Think of all the different areas of your blog article template. You have content, images, an e-mail subscription widget, shopping widgets, an ad or two, social media widgets, maybe a video, and a content recirculation widget. They load and re-load at different times, and depending on the sizes and the layout, this might cause the page to shift.

Ahead are Google’s most common reasons for the shift, and how to solve them:

1. Images with inconsistent dimensions

The best practice here is to make sure your videos and images have a specified height and width tag attribute defined in the code. This is how it was originally done by developers but with the later introduction of responsive images came the use of CSS to resize images to fit a variety of screen sizes.

The main problem with the image height and width settings at the time was that even if the image itself didn’t match those dimensions, the image would be forced into that space. Today, a lot of the image resizing is done through the browser, as long as there are dimensions in the image tag.

Solution: Make sure your images have a defined height and width.

2. Ads

Publishers and ad networks often support dynamic ad sizes. This means that one ad unit might hold two different ad sizes. When the ad refreshes and the size of the unit are different than the one prior, this can cause a shift on the page. For SHE Media Collective members, we’ve implemented code updates to address the shift around ad units, but keep in mind that ads are only one of the various reasons for high CLS. If you’re a member of the SHE Media Collective and want to get a head start on addressing the impact of ads, you can implement the same fix all on your own; just e-mail our support team.

Solution: Google says sites can lessen these layout shifts by:

• Statically reserving space for the ad slot.

• Take care when placing non-sticky ads near the top of the viewport.

• Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.

• Eliminate shifts by reserving the largest possible size for the ad slot.

• Choose the most likely size for the ad slot based on historical data.

More information on that can be found here.

3. Dynamically injected content

This is almost impossible to avoid if you’re loading anything other than content onto your pages. When certain elements stack on top of each other, like GDPR, cookie consent forms, or newsletter banners, this can cause the page to shift.

Solution: One way for bloggers to manage this is to lazy load as much as possible.

What is a Good CLS Score?

Google gives the green light to anything .1 or below. If your CLS is between a .1 and a .25, that’s moderate, and anything above a .25 is considered to be a poor experience. A high amount of page shifting is irritating for users and can lead to a high bounce rate. Take the time to make sure yours is near or exact to what Google recommends.

The SHE Media Collective is comprised of Publishers, Creators, and Experts who use their voices to produce premium lifestyle content and community for both niche and mass audiences. Through our flagship editorial sites, events, and our proprietary network, we identify the best content producers to deliver against advertiser campaign objectives. Apply here to join.