Digital Marketing for Franchises: Your Complete Guide Read More...

  • Home
  • Services
    • Digital Marketing
      • Search Engine Optimization (SEO)
      • Local SEO
      • Technical SEO
      • Digital Marketing Strategy
      • Pay Per Click (PPC) Marketing
      • Link Building Services
      • Google Analytics Service
      • Conversion Rate Optimization
      • White Label Services
      • Franchise SEO
      • Search Engine Marketing (SEM)
      • HARO Link Building
    • Web Design
      • Custom Website Design
      • WordPress Website Design
      • eCommerce Web Design
      • ADA Compliance Services
      • Video Production
      • Email Marketing Services
      • SMS Marketing Services
      • Website Hosting
      • SEO Content Writing Services
    • Social Media Marketing
      • Social Media Management
      • Social Media Advertising
      • Social Media Brand Management
      • Reputation Management
        • Reputation Management Software
        • Online Reputation Repair
        • Franchise Reputation Management
        • Social Media Reputation Management
    • eCommerce Marketing
      • eCommerce Optimization
      • eCommerce SEO
      • eCommerce PPC
      • eCommerce Web Design
      • Shopify SEO
      • Walmart Marketplace
      • Target Plus Marketplace
      • Amazon Marketing
        • Amazon SEO
        • Amazon Advertising/PPC
        • Amazon Storefront & Branding
        • Amazon Seller Consulting
        • Amazon Posts Management
        • Amazon DSP Advertising Management
  • Work
    • Case Studies
    • Web Designs
    • Logo Designs
    • Video
  • About
    • Who We Are
    • Why Choose Us?
    • Awards & Recognition
    • Thrive Gives Back
    • SEO Code of Ethics
    • Client Testimonials
    • Industries We Serve
    • Media & Press Information
    • Thrive Camp Awards
  • Learn
    • Blog
    • Webinars
    • Thrive Growth Formula
    • Franchise Marketing Guide
    • SEO Buyers’ Guide
    • Google Page Experience Guide
  • Careers
  • Contact
866-908-4748

GET PROPOSAL

Cumulative Layout Shift

APRIL 21, 2021
Share
Tweet
Pin
Share
Page Experience Overview
Cumulative Layout Shift
Largest Contentful Paint
First Input Delay
Mobile Friendly
HTTPS
No Intrusive Interstitials

Visual stability is crucial in retaining and converting page visitors into paying customers. Statistics show that about 50 percent of online users will leave a website with a lagging performance. Evidently, nothing’s more frustrating than unexpected image shifts, floating ads or texts jumping around an article.

Does your website suffer from these sudden layout movements? Google’s new Core Web Vitals metric, Cumulative Layout Shift (CLS), addresses these challenges.

  • What is CLS?
  • What is Google layout algorithm update?
  • Why CLS matters to Google’s Page Experience ranking factors?
  • How to measure CLS?
  • What is a good CLS score?
  • How to optimize for Cumulative Layout Shift?

What is Cumulative Layout Shift and how does it impact your technical search engine optimization (SEO) and responsive web design and development efforts?

Google identifies three Core Web Vitals that are set to be ranking factors: Cumulative Layout Shift, First Input Delay (FID), and Largest Contentful Paint (LCP). CLS is one of the new Core Web Vitals that deal with visual stability

Cumulative Layout Shift quantifies how often unexpected layout, content and image shifts happen on your website. Like the Google Page Layout algorithm update in 2012, CLS will significantly affect how Google and page visitors view your website. By learning what does CLS means and how to improve Cumulative Layout Shift, you can minimize unexpected layout movements and reduce your bounce rate.

Learn what is CLS and begin your technical SEO and responsive website design processes as soon as possible.

What Is Cumulative Layout Shift or CLS?

Cumulative Layout Shift is a Core Web Vitals metric that measures a web page’s visual stability and how much it shifts from its original position to a different visual location. An unexpected layout shift occurs when a visible element, such as responsive images, changes HTML img size or position, affecting the overall page layout.

To fully understand what does CLS mean, click on this video by Google:


Order Confirmation

Several factors may cause unexpected shift images or layout movements like this, including:

Third-party ads, iframes or widgets

Slow-loading fonts

Dynamically injected content, such as promo bars, that create a loading difference

Videos with unknown dimensions

Unspecified CSS image size or HTML img size attributes

Synchronous or asynchronous loading of Document Object Model (DOM) elements

Flash of unstyled content (FOUC)

Inappropriate HTML code image size or CSS background image size

Animations that trigger layout change

Flash of invisible text (FOIT)

Like the Google Page Layout algorithm, CLS mainly looks at how the block-level elements are affected upon loading the website. If there’s a certain lag behind the loading time of responsive images or other website content, an element may get pushed beneath a fold or jumble around the page, which could impact your session length, bounce rate, conversion rate and other user behavior metrics.

What Is Google Layout Algorithm?

Good Google Layout example
Good example: Site layout that highlights content
Bad Google Layout example
Bad example: Site layout that pushes content below the fold

The Google Page Layout algorithm update targeted websites with excessive static ads above the fold. These ads shift images and other site elements, forcing page visitors to scroll down the page to view the content they need.

Many technical SEO services providers and responsive web design professionals saw a 40 percent drop in traffic when the Google Page Layout algorithm update was first implemented. This is because of too many ads that prevented users from receiving a better experience.

Google Analytics score

Source: Search Engine Journal

How Does the Google Page Layout Algorithm Relate to CLS?

Post-Google Page Layout algorithm changes allow responsive website design professionals to focus on the balance between content and ads, setting the stage for the CLS update.

A responsive web design company that understands what is Google layout algorithm has the upper hand in optimizing for the Core Web Vitals and achieving a good CLS score. Knowing how to recover from the Google Page algorithm is key to optimizing your page layout for third-party ads and dynamically injected content above the fold.

Why Does CLS Matter to the
Page Experience Update?

Technical SEO experts and responsive web design professionals recognize the challenge of determining unexpected layout and image shifts when developing a website. To streamline responsive web design testing and ensure the best possible user experience (UX), CLS allows you to look at how far existing elements move from one animation frame to the next and change your website layout without bumping the CLS score.

Without Space Reserved
With Space Reserved

More reasons learning what does CLS mean and mastering how to optimize for Cumulative Layout Shift are essential:

A visually stable website is key to brand success.

CLS approximates the users’ perceptual experience of layout instability.

Complicated and non-responsive website designs are harder to optimize.

Unspecified CSS background image size or HTML code image size may cause unintended content orders.

Not knowing how to optimize for CLS can result in lower Google rankings and bad user experience.

Unexpected image, layout and content shifts render a poor user experience.

Now that you understand what is CLS and why it matters in technical SEO and responsive web design services, let’s move on to the more crucial aspects of CLS. The following discussions focus on how to measure Cumulative Layout Shift, what is a good CLS score and how to optimize for CLS.

How to Measure CLS

Google identifies the impact region or the screen area affected by the shift images or layout movement to calculate the impact fraction. The impact fraction pertains to the ratio of the impact region to the viewport.

Previous Visual Area
New Area

Here’s the formula for the impact fraction:

area (impact region) ÷ area (viewport) = impact fraction

Ads Optimization inside the website

To determine how far site elements moved from the original position to the next frame, Google also measures the distance fraction using this formula:

(maximum move distance) ÷ (height of viewport) = distance fraction

By multiplying the impact fraction by the distance fraction, you get the CLS score.

(impact fraction) x (distance fraction) = layout shift score

If the CLS test results show that a website element moved a lot, it means it can be very distracting for the users. However, if the elements moved by only a few pixels, it is less likely to affect your CLS score and user experience.

How to Measure Cumulative Layout Shift
Using CLS Test Tools

Now that you know how to measure CLS according to Google standards, let’s discuss the different CLS test tools and methods that you can use to determine your CLS score:

Measuring in the Lab:

  • Lighthouse 6.0
  • Webpagetest.com
  • Chrome Dev Tools

Real user monitoring:

  • Chrome user experience report (CrUX)
  • JavaScript AI
  • Google’s PageSpeed Insights Tool
  • Google Search Console (GSC) Report

A technical SEO agency also uses these CLS test tools for responsive web design testing. If you’re having trouble determining what is a good Cumulative Layout Shift score or how to measure CLS, speak to a trusted responsive web design agency to kick off your CLS optimization.

What Is a Good CLS Score?

Ideally, web pages wouldn’t have any image shift or layout movement at all. However, this might not be possible for all websites.

CLS Score

In this case, technical SEO experts and responsive web design services providers should aim for a low CLS score. The more stable your layout is, the lower your CLS score:

< 0.1

Good User Experience

0.1-0.25

Needs Improvement

> 0.25

Poor User Experience

On April 13, Google updated its metrics in the Search Console report -- based on feedback from web developers -- to reflect a more accurate representation of layout shifts on single-page apps and long-running pages.

Google now uses session windows to group together layout shifts on a web page and ensure the CLS score doesn’t grow unbounded. To calculate the CLS score, Google now looks at the maximum session window with a one-second gap, capped at five seconds

Let's look at this example by Google:

Order Confirmation

A session window begins when the first layout shift starts and expands until there is a session gap or no layout shift. A new session window begins when another layout shift occurs after the interval. The scores of each layout shift are totaled to provide each window’s score.

Google considered that there are multiple window sizes on various web pages, and these can result in different layout shifts and unreliable CLS scores. To ensure the session window is large enough, Google figured five seconds is a good limit to the window size.

Based on Google’s analysis, 55 percent of pages will not see a change in CLS score at the 75th percentile. Meanwhile, the rest will see about three percent improvement in their CLS scores at the 75th percentile due to this change.

Besides knowing what is a good Cumulative Layout Shift score, you must also master how to improve CLS to ensure your website complies with the upcoming Core Web Vitals update.

How to Improve Cumulative Layout Shift

The Core Web Vitals optimization process can take 15-40 days, depending on your site issues and the number of web pages you have to update. What’s more, it takes 28 days before the changes you’ve made on your HTML set image size and other site elements are approved by Google.

As such, you must understand what is a good Cumulative Layout Shift score and execute the right strategies on how to improve CLS as soon as possible to avoid Google penalties once the new Core Web Vitals are implemented.

18 Tips on How to Improve Cumulative Layout Shift by
Technical SEO Services Providers:

  • Use transform animations in implementing carousels.
  • Always add appropriate HTML img size or CSS content image size attributes to your image and video elements.
  • Use font style matching tools, such as Google Type or Type Connection, to match the fallback font and the web font as closely as possible.
  • Reserve a space for injected content, such as promo bars and ads. If you can’t, consider making the position fixed.
  • Size the container to the height of the content ahead of time, so things don’t shift around or the HTML set image size doesn’t change as it comes in.
  • Ensure the needed CSS is loaded before the content.
  • Hire a responsive web design company or technical SEO agency to audit your website CLS and design modifications based on the CLS audit.
  • Optimize responsive images by reducing their HTML set image size to less than 100kb.
  • Use WebP format or any next-gen formats like jpeg2000 to compress your CSS image size and create smaller, richer images.
  • Perform regular responsive web design testing and page speed audits to determine issues with your HTML code image size and other site elements.
  • Consult with a technical SEO agency or responsive web design company to determine whether synchronous loading or asynchronous loading works best for your DOM tree.
  • Audit and monitor if all web pages have CSS content image size attributes.
  • Minimize unnecessary HTML, CSS and JavaScript elements.
  • Use a content delivery network (CDN) and caching server like WP Rocket.
  • Place a container on your website that houses ads.
  • Speak to a responsive web design agency to know if there are third-party plugins to assist you in preloading fonts or other dynamically injected content.
  • Add encoded SVG images in CSS as background images.
  • Improve HTTP response and elements synchronization.

How to Optimize for Cumulative Layout Shift

Still struggling on how to optimize for CLS? Here is advice from a responsive web design agency to help you understand what is CLS and how to improve CLS.

MORE ADVICE TO OPTIMIZE
FOR CLS

  • HTML image size: 1MB
  • CSS content image size: ≤ 100kb
  • CSS background image size: ≤ 100kb

Do Animations Cause
Layout Shifts?

  • Yes, but not all animations can affect your CLS score. Technical SEO specialists recommend that you use CSS transform animations to avoid increasing your CLS score.

Need more tips or explanations on how to optimize for CLS? Struggling to compress your CSS image size or HTML image size? Our responsive web design agency spent the last four months optimizing for CLS and our efforts have resulted in 91 percent of page loads with a good CLS score.

Good CLS Score

Let us help you prepare for the new Core Web Vitals with custom technical SEO services and responsive web design solutions. Call our technical SEO agency at 866.908.4748 or fill out our contact form to learn more about our responsive web design services.

Up next

Largest Contentful Paint

10 MIN READ
Page Experience Overview
Cumulative Layout Shift
Largest Contentful Paint
First Input Delay
Mobile Friendly
HTTPS
No Intrusive Interstitials
Share
Tweet
Pin
Share

Thrive Internet Marketing Agency is a full-service digital marketing agency. Attract, Impress, and Convert more leads online and get results with Thrive.

CALL 866.908.4748

Contact UsThrive Gives Back

growing businesses since 2005

Made with in 25 cities around the world

  • ARLINGTON
  • ATLANTA
  • AUSTIN
  • BALTIMORE
  • CHICAGO
  • CLEVELAND
  • DALLAS
  • DENVER
  • HOUSTON
  • JACKSONVILLE
  • KANSAS CITY
  • LAS VEGAS
  • LOS ANGELES
  • LOUISVILLE
  • NEW YORK CITY
  • MIAMI
  • MINNEAPOLIS
  • PHOENIX
  • NEW ORLEANS
  • ORLANDO
  • PHILADELPHIA
  • PORTLAND
  • SAN ANTONIO
  • SAN DIEGO
  • SEATTLE

© 2023 - Thrive Internet Marketing Agency / Locations / Write For Us / Refer Thrive / Terms / Privacy Policy / Do Not Sell My Personal Information / Sitemap