Virtina

Virtina

STRATEGIZE . OPTIMIZE . SOLVE

Call
  • About Us
  • Solutions
    • By Platform

      • WordPress
      • WooCommerce
      • Magento
      • BigCommerce
      • Shopify
      • Wix
      • Odoo
      • Volusion
      • PrestaShop
      • Vtex
      • OpenCart
      • 3dCart
    • By Industry

      • Manufacturing / B2B
      • Retail
      • Food & Beverages
      • Fashion & Apparel
      • Jewelry
      • Electrical & Electronics
      • Medical & Healthcare
      • Automotive
      • CBD
    • By Service

      • Strategy
      • Roadmap
      • Prototyping
      • Platform Selection
      • Design
      • Development
      • Replatform
      • Integration
      • Core Web Vitals
      • Page Speed Optimization
      • Performance Optimization
      • CRO
      • SEO
      • Data Backup
      • Support
  • Portfolio
  • Resources
      • Blog
      • eCommerce News
      • eCommerce Tips
      • Project News
      • Case Studies
      • Success Stories
      • Events
      • Extensions
      • Partners
      • Affiliate Program
      • Videos
      • Tools
        • Cost Calculator
        • ROI Calculator
        • CRO ROI Calculator
      • FAQ
  • Clients
      • Agencies
      • Direct Clients
      • SaaS
  • Hire Us
    • Development

      • Hire WooCommerce Developer
      • Hire Magento Developer
      • Hire BigCommerce Developer
      • Hire Shopify Developer
    • Migration

      • Migrate to WooCommerce
      • Migrate to Magento
      • Migrate to BigCommerce
      • Migrate to Shopify
  • Contact us

CONTACT US

(888) 478-4799

sales@virtina.com

What is Cumulative Layout Shift and How to Improve It?

April 25, 2021 | 0 comments | Core Web Vitals | Updated: August 26, 2021
  • Core Web Vitals
  • Page Speed Optimization
What is Cumulative Layout Shift (CLS) and How to Improve It

Is Your eCommerce Store Ready for the Google Core Web Vitals Update?

Unoptimized websites will lose 70% traffic. Don't let this update KILL your eCommerce business!

Talk to Experts
  • facebook Share
  • twitter Tweet
  • linkedin Recommend
  • pinterest Pin

Google is planning to roll out a new update called Core Web Vitals from June 2021 onwards. Core Web Vitals includes three metrics, Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). All three metrics will measure a website’s performance and user experience. Core Web Vitals will even affect your ranking on Google. Let’s dive in to get an in-depth understanding of one of the metrics – Cumulative Layout Shift (CLS).    

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a metric to measure visual stability. The Cumulative Layout Shift (CLS) score tells us how often visitors on a page experience abrupt layout shifts. A lower Cumulative Layout Shift (CLS) score gives the best user experience. 

It often describes browsing or scrolling sessions on a site when suddenly something changes on the page. Without warning, a text, image, button, or any other element moves from its original position. The CLS value describes such a layout instability on a site. High CLS can diminish user experience. 

CLS value comprises every individual layout shift value assigned to every unexpected layout shift on a webpage. It is the sum of all layout shifts not caused by the user. The layout shift occurs when a visible element moves from one rendered frame to the next.

Importance of Cumulative Layout Shift (CLS)

Cumulative Layout Shift has a weightage of 5% in Lighthouse. In comparison, Largest Contentful Paint (LCP) has a weightage of 25%. The weightage decides how important or how influential the metric may get towards a site’s SEO ranking. 

In essence, CLS will not be on equal footing with LCP, which measures load performance. But, CLS will still influence a website’s ranking on Google due to being a metric within Core Web Vitals. Thus, developers cannot put aside measures to optimize their website’s CLS score before the update in May 2021.

What is a Good CLS Score?

Websites need to aim for a Cumulative Layout Shift (CLS) score of anything under 0.1. Websites that stick to less than 0.1 provide the best User Experience. A good score falls under 0.1. Anything between 0.1 to 0.25 needs improvement. Whereas, a poor score will go beyond 0.25.

Cumulative Layout Shift (CLS) Score for Virtina

A CLS score can come out 0, for fully static pages. The score increases as more layout shifts occur on the page. For a page to have the lowest CLS score, it would need to have a stable layout. The layout must have the least amount of shifts.  

How to Measure Cumulative Layout Shift (CLS)?

Chrome User Experience Report

PageSpeed Insights

Search Console (Core Web Vitals report)

Field tools Chrome DevTools

Lighthouse

WebPageTest

Web-vitals JavaScript library

Lab tools

Website owners can rely on any of the above tools to determine the Cumulative Layout Shift (CLS) score. CLS can be measured in the lab or in the field. Specific lab tools may not report an accurate CLS score. Since lab tools only measure layout shifts that appear during page loads. 

The score obtained through a lab tool goes far off from what users experience when interacting with a web page. CLS values from lab tools for a given webpage may be less than the actual user experience scores. Measuring real-world CLS at an origin-level is doable using the Chrome User Experience Report.

Another way to determine the CLS score is through JavaScript API. But, developers may need to go through some advanced code to measure real-time user experience CLS scores. Measuring CLS in JavaScript gets complicated. Rather than addressing all the complications, developers can use the JavaScript library to measure CLS.

How is Cumulative Layout Shift (CLS) Calculated?

To figure out the CLS score, the browser sees the viewport size and the movement of unstable elements between two rendered frames. The final CLS score is equal to the product of impact fraction and distance fraction. Earlier, the calculation of the CLS score was based only on impact fraction. 

CLS Score = Impact Fraction x Distance Fraction

Impact Fraction

Impact fraction gets defined as the sum of the visible areas of all unstable elements. The visible areas include the previous frame and the current frame. The output of this divided by the total area in the viewport is the impact fraction. 

Distance Fraction

The distance fraction measures the total distance moved by any unstable element in the viewport. The distance moved could be horizontal or vertical. Distance fraction is the greatest distance any component has moved in the frame divided by the viewport’s largest dimension.

How do Cumulative Layout Shift (CLS) Elements Behave?

Unstable elements that shift or change their start position within the viewport are responsible for a higher CLS score. But, layout shifts that occur as a result of user interactions aren’t considered flawed. If the user sees a slight movement or position change of an element, it’s pretty acceptable. 

Only unexpected layout shifts degrade the user experience. If the layout change was intended and caused by the user, it wouldn’t affect the CLS score. CLS ignores layout shifts that happen due to user input. The CLS measurement stops in the input exclusion window for 500ms after a user interacts with the website.

Also, CLS will only account for shifts that happen in the viewport. If any content piece moves below the fold and the user does not see it, that shift won’t affect the CLS score. Furthermore, changes that happen due to animations may not always count towards the CLS score. E.g., if the animation uses CSS transform, it won’t count towards the CLS score.

How to Improve Cumulative Layout Shift (CLS)?

Specify Image Dimensions

Specify the correct “height” and “width” attributes to your images and video elements on the page. Following this protocol will help the browser to allocate the right amount of space to load images and videos. Setting this will lower the CLS score for that page.

Mentioning the dimensions would ensure a corresponding area gets reserved. The appearing image would then stretch to fit this space. Even if the actual dimensions of the image matched the reserved area or not. A smaller image would stretch to fit the space. The modern practice utilizes the default aspect ratio to load an image on the page. 

The aspect ratio gets calculated based on an image’s width and height. Knowing the aspect ratio helps the browser to reserve adequate space for an image. Developers need to set “width” and “height” and the browser will add the aspect ratio. Browsers find the aspect ratio at the start of the layout calculation. 

Ads and Embeds

Ads are one of the key reasons for ruining user experience. Ads are the biggest contributors to a high CLS score for a web page. Ads push visible content  down the page. Site owners need to start following best practices to improve ad placements. Even though it isn’t easy to choose the exact reserve size for ads every single time. 

Fluid ad slots are another reason for high CLS scores. Since, they don’t specify a fixed set of sizes for the ads. These slots resize to fit the content served to them, allowing them to support ads of any size. Thus, it’s not possible to allocate space for these slots prior to requesting ad content.

Any embedded portable web content on the  page will likely cause a huge layout shift. The failure to reserve enough space, results in the content moving considerably when the embed loads. Always, remember to set dimensions on ads and embeds. 

  • Eliminate shifts by reserving a large space for ads or pick an ideal size by studying historical data.
  • Avoid placing any ads (non-sticky) near the top of the viewport. 
  • Avoid collapsing reserved ad space, if the placeholder shows no ad when the ad slot is available.
  • Only use fluid size for ad slots below the fold.
  • Fetch fluid slots as soon as possible to lower the chance of a user scrolling into them before the slot gets resized.
  • Reserve slot size, when placing ads in the content flow to ensure shifts get eliminated.
  • Preempt adequate space for any embed with a placeholder or fallback. 
  • Note the dimensions and style of the placeholder for the embed.

Dynamic Content

Users often come across banners, newsletter sign-ups or forms that shift the page content. These elements appear as dynamic content and ruin user experience for visitors, while they  scroll through a page. The elements appear at the top or right underneath the viewport. 

Site owners need to avoid inserting such content. Unless it is a content piece that appears due to user interaction. If it emerges as a result of an interaction, then, the layout shifts would be predictable. The best way to handle dynamic content is by reserving enough space in advance. You may do so by using a placeholder or skeleton UI. 

Web Fonts (FOIT and FOUT)

FOIT (Flashes Of the Invisible Text) is a problematic area for CLS. When the fonts are hosted online on a server, the browser waits to download the fonts. Until then, the browser displays blank space. After download, the layout shifts a lot. 

In FOUT (Flashes Of the Unstyled Text), you may rely on system fonts and custom fonts. The browser displays system fonts and waits to download custom fonts. In this scenario, the system fonts take up their own space. But, after the custom fonts get downloaded, the layout  moves by a big margin.  

  • Modify the rendering behavior of custom fonts with values such as auto, swap, block, fallback and optional.
  • Use the “Font Loading API” to reduce the time it takes to get required fonts.
  • Use <link rel=preload> on the key web fonts to avoid layout shifting. 
  • Look to combine <link rel=preload> and “font-display: optional to download fonts on priority. 

What are the Benefits of Improving the Cumulative Layout Shift (CLS) Score?

SEO

CLS is part of Core Web Vitals, and Core Web Vitals are page ranking signals. Thus, the CLS score will affect your rank on search engines. A lower CLS score will rank your website higher and increase traffic. Therefore, the Click-through Rate (CTR) will rise.  

User Experience

Unexpected layout shifts will diminish user experience. Abrupt Layout Shifts create annoyance and lead to the user interacting with the wrong element.  Such layout shifts will lower engagement and retention time. Furthermore, it’ll discourage users from returning to the website.

Conversions

Unexpected layout shifts deplete user experience, which decreases a user’s interest in your site. The abrupt movement of elements creates friction, and they abandon the store. By optimizing the CLS score, you’d increase sales. Thereby, leading to a rise in conversion rates.  

Revenue and Profits

An increase in order placements will increase your revenue and profits. As more users start to place orders, expect to witness tremendous growth in your income. Furthermore, expect to see more repeat visits and an increase in Customer Lifetime Value (CLV).

Conclusion – Cumulative Layout Shift

Content that shifts out of the blue on a page creates a bad user experience. Furthermore, it results in a high CLS score. The result of this is a website that doesn’t give a flawless user experience for visitors. Not only that but, it also lowers your SEO strength, and you end up with fewer sales. 

Optimize the Cumulative Layout Shift (CLS) score of your website to stimulate more conversions. CLS, part of Core Web Vitals, will affect your user experience. More than anything, a high score allows your competitors to outrank you on Google search results. Don’t miss out on the crucial organic traffic to your website.  

If you would like a website that optimizes your CLS, then reach out to the experts in Virtina. We optimize and enhance your webpage experience to lower the CLS score. On top of that, we do so without sacrificing your messaging and page structure. Our experts will adjust your site for the new Core Web Vitals update.

Frequently Asked Questions (FAQ)

What causes Cumulative Layout Shift?

Cumulative Layout Shift is caused by content changing dimensions, or new content being injected into the page. For example: if a website has text that stretches across several lines then changes one word from "of" to "off", it will cause an unintentional line break-in between those two words because of how Web browsers read HTML code. This would create more empty space between them than before which makes for an ugly site design!

How do you optimize CLS?

One way to optimize your CLS score is by using embeds. But you have to predetermine the necessary dimensions of each one before adding it onto a webpage because this can be tedious and time-consuming if not done correctly in advance, which means loading all your final embed code on the page first and then inspecting them with Chrome Developer Tools for their height so that you know how much space they will take up when rendered.

How do I check my cumulative layout shift?

The Cumulative Layout Shift metric in the Page Overview tab will let you know. Just below where all of your pictures sit on a filmstrip, there is an overview with performance metrics for each layout shift that has occurred on this page. Check out what those numbers mean and how to improve them under "Detailed diagnostics".

How can Cumulative Layout Shift be avoided?

To reduce layout shifts caused by ads, embeds, and iframes in your designs create a plan for the placement of these elements. Reserve an ad slot size before loading any other scripts onto that page to ensure continuity across web pages. Place ads at either bottom or out-of-viewport so they don't disrupt content on screen while also keeping them visible enough for viewers to notice their presence. If there is no available ad when you're designing, try using placeholders which allow designers more control over how images are displayed until advertisements become available again.

How to fix CLS cumulative layout shift?

The extent of time (duration) required to complete a project from Strategy to development to implementation will depend on the project's nature. Cosmetic changes take less time, and therefore the overall completion time is less. However, heavy-duty integrations and other complex changes will incur a more extended project cycle. Rest assured; we will deliver the completed quality work before the deadline.

How many times has your design layout shifted?

If you're not sure how to answer this question, don't worry because here is help. You can find the Cumulative Layout Shift metric in the page Overview tab, just below the filmstrip and Performance tab also contains a list of all layout shifts on the page that provides diagnostic information so you know what could be causing an increase in deviation from best practices. This helps ensure better performance with fewer errors while reducing costs for things like production time or equipment upkeep!

Is cumulative layout shift a ranking factor?

Cumulative layout shifts are one of many indicators we use to measure site speed, which can affect ranking in our search results. This metric reflects changes made on-page such as load time or scrolling behavior after consecutive visits over extended periods of time (days). The more cumulative layouts shift occur during this period, the higher likelihood there is an issue with page loading times or design efficiency causing poor user experience. CLS becomes relevant from 2021 onwards when it comes into effect as a ranking factor but until then you need to make sure your pages meet all expectations by reducing average load times below 3 seconds.

How do I lower my CLS score?

Reserve space statically for the ad slot.  When putting ads in the content flow, make sure the size is allocated to avoid shifts and take extra care when placing them near the top of your viewport while following best practices like not blocking out main text with an ad banner or making a layout too cluttered by having many banners at once.

Why is CLS a negative factor?

The shifting of webpage elements before the page has fully loaded is called CLS. It can cause a poor user experience by making it difficult to read content and learn what they are looking for on your website. Users may become frustrated, or even abandon their web browsing if there are too many pages that shift around within one visit due to bad coding practices such as  using unoptimized javascripts or third-party scripts which often use outdated technologies such as Flash Player plugins in websites with no fallback plan should these old plugins fail.

How is the CLS score calculated?

The Google CLS Score is a measure of how well your site's layout conforms to best practices by taking into account the distance between elements on each page and their relative impact. What this means in terms you can easily understand, however, is that it will score higher if there are more navigational links or any other information users would need right at hand as opposed to making them scroll down for what they're looking for. The farther away something appears from where people start scrolling on the screen or when there aren't navigation buttons directly next to content readers want access to.

  • facebook Share
  • twitter Tweet
  • linkedin Recommend
  • pinterest Pin

Recent Blogs

  • Six Mindful Ways to Reduce E-waste This World Environment Day
  • WordPress 6.0 Arturo: Leafing Through the Improved and Advanced Features
  • WooCommerce Security: Tips to Keep Your Online Store Safe in 2022
  • An Absolute Guide to Selling Jewelry Online in 2022
  • Top 20 BigCommerce Apps to Increase Your eCommerce Sales in 2022
Read More

Most Popular Blogs

  • Digital Transformation – Catalyzing Innovation in eCommerce
  • Voice Search: The Future of eCommerce
  • Why Omnichannel E-commerce Marketing?
  • How eCommerce is Reacting to Coronavirus / COVID-19?
  • Ecommerce SEO Checklist – How to Get More Organic Traffic To Your Store in 2019
Read More

Is Your eCommerce Store Ready for the Google Core Web Vitals Update?

Unoptimized websites will lose 70% traffic. Don't let this update KILL your eCommerce business!

Talk to Experts

Any questions?

What is 1+4?

Related Blogs

  • October 16, 2021

    True Importance of Google Page Experience Update

    Google first informed us about the page experience update last year, and in June 2021, it started the gradual rollout of the update. The update was co ...

    Read More
  • September 19, 2021

    Why Should You Hire a Core Web Vitals Developer?

    Google's Core Web Vitals update rolled out in June 2021. Google will factor your site's Core Web Vitals score to determine its page experience and SEO ...

    Read More
  • September 02, 2021

    20 Tips to Speed Up Your WooCommerce Store

    Speed is a vital factor that can fuel the success of your online store. A fast-loading website can motivate shoppers to purchase online and your custo ...

    Read More
  • April 27, 2021

    Page Speed Optimization for Improved Ranking and Conversion Rate

    Customers will be thrilled to visit a site with high page load speed. A slow loading page forces the customer to leave the site, killing the conversio ...

    Read More

Related Platforms

  • WordPress
    WordPress
  • WooCommerce
    WooCommerce
  • Magento
    Magento
  • BigCommerce
    BigCommerce
  • Shopify
    Shopify
  • Wix
    Wix
  • Odoo
    Odoo
  • Volusion
    Volusion
  • PrestaShop
    PrestaShop
  • Vtex
    Vtex
  • OpenCart
    OpenCart
  • Shift4Shop
    Shift4Shop

Our Locations

  • New York
  • Washington D.C.
  • Philadelphia
  • Chicago
  • Houston
  • San Diego
  • Los Angeles
  • Boston
  • Indianapolis
  • Phoenix

Recent Case Studies

  • June 09, 2022

    Custom BigCommerce Middleware Development for an Australian BNPL Company

    Summary – BigCommerce Middleware Customization Virtina recently triumphantly executed a project for a client based in Australia and New Zealand. The ...

    Read More
  • June 04, 2021

    Split-order, Split-shipment, and State-wise Sales Tax Issues Resolved for a WooCommerce Company

    Summary Virtina won a prestigious project from a rental theme kit delivery company in Colorado, United States. The company creates playful experiences ...

    Read More
  • January 08, 2021

    Building a WooCommerce Store for the World’s Largest Government-run Retail Chain

    Summary A governmental organization approached Virtina to build a website that enabled the organization members to buy products like automobiles and h ...

    Read More
  • September 07, 2020

    Custom Volusion Middleware Development for a Banking Software Company in Virginia

    Summary Treasury Software is a company that develops banking software and is a Microsoft Gold Certified Partner. The company develops banking software ...

    Read More
Let's Connect

You are scheduling a meeting with

Give us a call or email anytime, we endeavour to answer all enquiries as quick as possible.

What is 1+4?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

virtina icon
(888) 478-4799 hello@virtina.com
(514) 613-5073 hello@virtina.com
+61282942073 hello@virtina.com

eCommerce tips sign up

We'll never share your email

WHAT WE OFFER

WooCommerce

  • WooCommerce Development
  • Certified WooCommerce Experts
  • WooCommerce Migration
  • WooCommerce Customization
  • WooCommerce Plugin Development
  • Custom WooCommerce Themes

BigCommerce

  • BigCommerce Development Services
  • BigCommerce Website Design
  • BigCommerce Theme Development
  • Migrate to BigCommerce
  • Bigcommerce Customization Services
  • BigCommerce Plugin Development

Magento

  • Magento Web Development
  • Magento Expert Developers
  • Magento 2 Migration
  • Magento eCommerce Store
  • Custom Magento Development
  • Magento Extension Development

Shopify

  • Shopify Development Experts
  • Shopify Integration
  • Shopify Store Migration
  • Shopify Theme Development
  • Shopify Theme Customization
  • Certified Shopify Developer

Top eCommerce Articles

  • Platform Migration in eCommerce
  • Top eCommerce Platforms
  • eCommerce Failure Reasons
  • Multi-vendor WooCommerce Plugins
  • WooCommerce Subscriptions Migration
  • Core Web Vitals in eCommerce

Odoo

  • Odoo Development

Volusion

  • Volusion Experts

3dCart

  • 3dCart Websites
  • Twitter
  • Facebook
  • Instagram
  • Pinterest
  • Linked In
  • Privacy Policy
  • Website Terms
  • Terms & Conditions
  • Sitemap
Copyright © 2009 - 2022 Virtina. All rights reserved.
  • About Us
  • Solutions
    • By Platform

      • WordPress
      • WooCommerce
      • Magento
      • BigCommerce
      • Shopify
      • Wix
      • Odoo
      • Volusion
      • PrestaShop
      • Vtex
      • OpenCart
      • 3dCart
    • By Industry

      • Manufacturing / B2B
      • Retail
      • Food & Beverages
      • Fashion & Apparel
      • Jewelry
      • Electrical & Electronics
      • Medical & Healthcare
      • Automotive
      • CBD
    • By Service

      • Strategy
      • Roadmap
      • Prototyping
      • Platform Selection
      • Design
      • Development
      • Replatform
      • Integration
      • Core Web Vitals
      • Page Speed Optimization
      • Performance Optimization
      • CRO
      • SEO
      • Data Backup
      • Support
  • Portfolio
  • Resources
      • Blog
      • eCommerce News
      • eCommerce Tips
      • Project News
      • Case Studies
      • Success Stories
      • Events
      • Extensions
      • Partners
      • Affiliate Program
      • Videos
      • Tools
        • Cost Calculator
        • ROI Calculator
        • CRO ROI Calculator
      • FAQ
  • Clients
      • Agencies
      • Direct Clients
      • SaaS
  • Hire Us
    • Development

      • Hire WooCommerce Developer
      • Hire Magento Developer
      • Hire BigCommerce Developer
      • Hire Shopify Developer
    • Migration

      • Migrate to WooCommerce
      • Migrate to Magento
      • Migrate to BigCommerce
      • Migrate to Shopify
  • Contact us
Let's Connect

You are scheduling a meeting with

Give us a call or email anytime, we endeavour to answer all enquiries as quick as possible.

What is 6+1?

Let's Connect

Talk to Jim Gregg, our Head of Operations

What is 7+4?

virtina-logo
CUSTOMIZED PLANS

Start improving your organic search engine rankings and revenues with us! Need an eCommerce SEO strategy that's customized for your unique business and its requirements?

What is 7+4?

Let's Connect

Talk to Elliot Levy, our Head of Delivery

What is 9+2?

Let's Connect

What is 7+7?

Platform Migration

What is 7+4?

Download PDF

What is 7+4?

What is 7+7?

What is 1+4?

GET STARTED WITH STENCIL THEME DEVELOPMENT

What is 7+7?

Let's Connect

What is 9+2?