How Bloggers Can Fix a Slow CLS to Improve User Experience

This May, Google is releasing a new search algorithm called the Page Experience Algorithm. With new ranking factors worked into the mix, this algorithm will be incorporating signals that speak to the user’s experience on their mobile device. As more information is learned about the new algorithm, one thing is clear: site owners must pay attention to how well users can navigate and interact with their site. Slow load time is a biggie, but it’s not the only one. User experience spans from speed to seamless navigation, to readability, even down to content quality.

This new Core Web Vitals algorithm will take into account all the user experience hurdles we tackled over the last few years, like mobile-friendliness, safe-browsing, HTTPS security, and the removal of interstitial popups. The three new KPIs that Google is using for Core Web Vitals are:

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.

What is Cumulative Layout Shift (CLS)?

The buzziest word for bloggers everywhere, CLS is the shift or bounciness on a mobile web page, happening after the 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 the content, some images, an e-mail subscribe button, buy buttons, an ad or two, social buttons, 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.

Google gives us the most common reasons for the shift:

1. Images without 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 Partners, we will be implementing 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 Partner Network 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 is recommending.

The SHE Media Partner Network helps content creators and entrepreneurs build sustainable businesses with dedicated support for managing ads, brand partnerships, and more. Apply now to join our mission-driven platform.