MENUMENU
  • Services
    • Services
      • Search Engine Optimization
      • International Search Marketing
      • Local Search Marketing
      • Pay Per Click Advertising
      • Social Media Marketing
      • Email Marketing
      • Conversion Rate Optimization
      • Public Relations
      • Website Design & Development
      • Reporting & Analytics
      • Amazon Marketing Services
      • Digital Marketing Strategy
      • Franchise Marketing
  • Case Studies
  • About Us
    • About Ignite Visibility
      • Our Story
      • Clients
      • Our Values
      • Diversity & Inclusion
      • Our Team
      • UCSD Extension Courses
      • Careers
  • Thought Leadership
      • Our Blog
      • Podcast
      • SEO: The Movie
      • Social Media Marketing: The Movie
      • Book: The Forecaster Method
      • Attend Our Next Digital Marketing Event
  • Contact
  • 619.752.1955
Home / Search Engine Optimization / Cumulative Layout Shift: How to Solve CLS Issues

Cumulative Layout Shift: How to Solve CLS Issues

July 10, 2020 By John E Lincoln

Come 2021, CLS will be an official ranking factor and Google will start docking URLs with poor scores, as shifty layouts indicate a poor user experience.

You’ll want to learn how to monitor this metric and fix potential problems now to avoid losing your position and incoming traffic when there’s more at stake.

Below, I’ll explain what CLS is and what you need to know about this new “vital” sign.

Cumulative Layout Shift

What We’ll Cover:

  • What is cumulative layout shift?
  • Why it happens
  • How Google calculates CLS
  • Where you can track CLS performance
  • How to improve a poor CLS score
  • Ways to prevent further issues

What is Cumulative Layout Shift (CLS)?

As mentioned, Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures visual stability.

Even if you’re unfamiliar with the term, you’ve probably experienced CLS countless times.

One typical example happens when users are reading an article and an entire block of text disappears.

In other cases, users might try to click a link and all of a sudden, the link moves and you click something you didn’t want to click.

I’ve had this happen multiple times with online banking — the login button shifts and I end up on the “forgot my password” page.

While that example is a minor source of friction, if the same thing happened while making a transfer, it could turn into a bigger problem.

The main problem with CLS is it often goes unnoticed because unexpected shifts often don’t show up on the developer side but may be causing trouble for users.

In other words, CLS aims to tip you off to any unexpected shifts users experience out in the wild.

This metric allows you to measure how often users experience shifting page elements.

Reporting tools like PageSpeeds Insights and a new Google Search Console report pinpoint specific problems and recommend solutions.

Why Does Cumulative Layout Shift Happen?

Developers have something of a home-court disadvantage here.

What you often see happen is, many of the assets needed to render a page are loaded onto the browser’s cache.

On the developer/SEO side, elements load fast, without any indication that something isn’t right.

The problem is, third-party content often doesn’t behave the same way in the development setting as it might in the field.

Meaning, developers can easily miss CLS or other load-time delays, passing that sub-par experience on to their users.

According to Google, CLS is typically caused by one or more of the following problems.

  • Images without dimensions
  • Embeds, ads, or iframes without dimensions
  • Web fonts causing FOIT/FOUT
  • Dynamically injected content
  • Actions waiting on a network response before updating DOM

How Does Google Calculate Cumulative Layout Shift?

Google calculates for the impact fraction and the distance fraction for each unexpected shift happening on the page.

Your score represents the sum total of every out-of-place element on the page and looks at how much each shift impacts the viewport, as well as how far elements moved during page loads.google_cumulative_shift_layout

As the impact and distance fractions grow, the CLS score gets worse.

Note: you don’t need to worry about performing calculations on your own.

This just makes it easier to understand what your users are experiencing when visible elements are unstable.

Where Can You Track CLS Performance?

As part of the Web Vitals initiative, Google has standardized performance metrics and incorporated the Core Vitals into all of its reporting tools.

What this means is, you can check Cumulative Layout Shift within several different dashboards.

That said, they’re not interchangeable. Different tools serve different purposes.

Field tools measure performance from the perspective of your actual users, whereas lab tools are designed to help developers catch problems before pages go live.

Within those two designations, you’ll find that some tools track macro-level CLS data, while others get real granular.

Here’s a quick rundown of some of those tools and how you might use them (for more options, here’s a post that breaks down the best  PageSpeed tools available).

Chrome User Experience Report (CrUX)

This report provides real, anonymized user experience data organized by country.

To get insights relevant to your website and its users, you’ll need to incorporate the CrUX API (I should mention, this does require a bit of coding know-how).

The data displayed in the CrUX report gives users a quick way to size up website performance by region, device, demographic group, or whatever custom metrics that matter to you. CrUX is not designed for identifying or fixing specific issues.

You might use this report to gauge what percentage of your users experience unwanted shifts, then determine if these problems are more common on a particular device or in a certain location.

This way, you’ll have a pretty good idea of where to start digging in.

PageSpeed Insights

The PageSpeed Insights report allows you to track performance metrics from the lab and in the field and receive a detailed list of opportunities and diagnostics, with actionable tips for improving.

Source

Google Search Console (Core Web Vitals report)

google_search_console_cls

Source

Chrome DevTools

Chrome DevTools is a set of developer tools that are built into the Chrome browser. The idea is, developers can edit page on demand, diagnose and fix problems fast, and optimize results on the fly.

You can use DevTools to debug JavaScript, inspect animations, and audit your site. Additionally, this tool allows users to optimize page speed. While this tool is a bit more complex than Google PageSpeed Insights, it provides an all-in-one convenience.

For example, the performance panel tracks opportunities and diagnostics (ala PSI) but also allows users to fix issues from the same dashboard.

As you can see, this report shows the CLS score, along with an overlay that highlights areas causing trouble.

chrome_dev_tool

Source

Lighthouse

Lighthouse is an open-source tool that allows users to run website audits on SEO, performance, and accessibility. Here, you’ll find a lot of the same metrics and recommendations that you’ll find in PSI, though Lighthouse is a lab tool, built for testing.

Source

Measure CLS in JavaScript

According to the web.dev site, the simplest way to measure CLS (as well as the other Web Vitals field metrics) is by using the web-vitals JavaScript library.

measure_cls_in_javascript

Source

How Do You Improve a Poor CLS Score?

Honestly, much of optimizing for CLS involves making sure there’s enough space available for ads, text blocks, and other on-site elements.

When Ads Are to Blame for CLS

Ads are one of the main culprits when it comes to on-page layout shifts.

The reason is, publishers and ad networks often support dynamic ad creative, which often causes visible content to be pushed down the page.

Google recommends statically reserving space for ads by styling the element before the ad tag library loads.

This allows you to set a specific height and width, ensuring that ads will be constrained to those dimensions.

Dynamically Injected Content

You’ll want to avoid inserting content above existing web elements, as it may cause layout shifts. Dynamically inserted content refers to CLS issues that happen with banners or forms while loading a site. In some instances, users might not be able to “x” out of a pop-up.

In others, on-page elements may be usable but rearranged, as you’ll notice in these examples below.

Source

onpage_elements_cause_cls_issues

Web-Based Fonts

Downloaded web fonts can cause a couple of issues that may have a negative impact on CLS: Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT).

Chrome 83 includes font loading improvements that eliminate layout shifts associated with FOIT when pre-loading optional fonts. According to Google, adding <link rel=”preload”> with font-display: optional to your site’s backend should do the trick.

Additionally, the Font Loading API can be used to reduce the amount of time it takes to get the desired fonts.

Preventing CLS Issues

To avoid any potential “shifts,” you’ll need to declare height and width dimensions for images and videos in your site’s HTML code.

If the images in question are responsive, you’ll need to indicate the dimensions for each viewport, making sure both versions use the same aspect ratio.

Per Google, you can calculate aspect ratios with this aptly-named tool, AspectRatioCalculator.com.

You can also reserve the appropriate amount of space for media elements using a tool like CSS aspect ratio boxes. This tool tells the browser to “reserve” the right amount of space within the document, while the image loads.

Alternatively, you can also use the unsized-media feature policy to enforce “appropriate behavior” in browsers offering support for feature policies.

Make sure you avoid inserting content above existing content, unless you’re responding to a user’s comment or question. Adding additional text to the site’s backend can easily cause unexpected (and undetected) layout shifts to occur.

Finally, you’ll also want to limit the use of animations. Stick to those that create continuity during transitions or enhance the experience, while avoiding those that trigger unwanted page element shifts.

Wrapping Up

Cumulative Layout Shift is an important metric for a pretty straightforward reason: shifting website elements create a bad experience.

Again, much of the optimization process is about deliberately creating borders for ads, banners, and images, that may otherwise slide away from their intended position.

You’ll also want to pre-load web fonts, use CSS transform animations, and avoid pasting content above existing elements.

About John E Lincoln

John Lincoln (MBA) is CEO of Ignite Visibility (a 2017, 2018, 2019 and 2020 Inc. 5000 company) a highly sought-after digital marketing strategist, industry speaker and author of two books, "The Forecaster Method" and "Digital Influencer." Over the course of his career, Lincoln has worked with over 1,000 online businesses ranging from small startups to amazing clients such as Office Depot, Tony Robbins, Morgan Stanley, Fox, USA Today, COX and The Knot World Wide. John Lincoln is the editor of the Ignite Visibility blog. While he is a contributor, he does not write all of the articles and in many cases he is supported to ensure timely content.

You may also like:

  • SEO Chrome Extensions
    20 SEO Chrome Extensions to Download Now
  • History of Google Algorithm Updates
    History of Google Algorithm Updates – History Timeline for SEOs
  • SEO Reporting
    SEO Reporting The Right Way: SEO Reports Your Team Needs

  • Quality Over Quantity: The Word Count Debate for Content Length

Search Here

NEWSLETTER // SIGN UP NOW

About The Editor

John E Lincoln, CEO

John Lincoln is CEO of Ignite Visibility, one of the top digital marketing agencies in the nation and a 6x Inc. 5,000 company. Lincoln is consistently named one of the top marketing experts in the industry. He has been recipient of the Search Engine Land "Search Marketer of the Year" award, named the #1 SEO consultant in the USA by Clutch.co, most admired CEO and 40 under 40. Lincoln has written two books (The Forecaster Method and Digital Influencer) and made two movies (SEO: The Movie and Social Media Marketing: The Movie) on digital marketing. He is a digital marketing strategy adviser to some of the biggest names in business. John Lincoln is the editor of the Ignite Visibility blog. While he is a major contributor, he does not write all of the articles.

LEARN MORE ABOUT JOHN

Contact Us. Let’s Chat!

  • Hidden

Marketing Guides

SEO In 2020: How To Prepare For Major Disruption

"SEO: The Movie" - Have You Seen Our Film? Watch Now

"Social Media Marketing: The Movie" - Have You Seen Our Film? Watch Now

Amazon Seller Central vs Vendor Central

Listen To The Podcast Featuring The Best Minds In Marketing

John Lincoln Interviews Global Director of Digital Marketing & Strategy at Qualcomm, Jessica Jensen

Check Out 227 Free Online Marketing Classes

The 2020 Guide To Dominating SEO With Advanced Schema

Learn More About Our Digital Marketing Agency

Learn More About Our SEO Services

Learn More About Our Paid Media Services

SELECT CATEGORY

Become A Contributor

Interested in writing for Ignite Visibility?

APPLY NOW

Services

  • Search Engine Optimization
  • Pay Per Click Management
  • Conversion Rate Optimization
  • Website Design & Development
  • Social Media Company
  • Public Relations
  • Amazon Marketing Services
  • Franchise Marketing
  • International Services
  • Digital Marketing Agency Services

About

  • Our Team
  • Our Values
  • Clients
  • Reviews
  • UCSD Extension Courses
  • Careers
  • Tools & Resources
  • Sitemap

Contact

4250 Executive Square, Suite 100
La Jolla, California 92037

619.752.1955

Join The Newsletter

Sign up for our newsletter to get the latest from Ignite Visibility.

google parther logo

©2022 Ignite Visibility. All Rights Reserved. Privacy Policy