Cumulative Layout Shift Optimization: Causes and How to Measure It
Picture this, imagine reading an article online, and without swiping up or doing anything at all, the text moves, causing you to lose what you were reading. Or worse, imagine wanting to get an item during a limited sale, and while trying to click on the checkout button, the page moves and redirects you elsewhere, causing you to miss out on the sale. These experiences called layout shifts have one thing in common; they are very annoying and, in some cases, may cause real damage.
To fix this, Google, in its Core Web Vitals update, has introduced the Cumulative Layout Shift or CLS as a ranking factor.
Are you still trying to make sense of CLS and what it means for your Shopify store? Keep reading, and you'll definitely find all the answers to your questions.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a measurement of the visual stability of your website. That is, it is a measurement of how many times your site's content moves around as viewers wait for the page to load fully. CLS also tracks any layout adjustments (content movement) on your site that aren't triggered by user interaction.
While browsing a website, you may have seen some layout adjustments as a picture or ad causes the entire page to shift the content on the page as it loads. It's simple to see how this impacts the user experience because you'll frequently lose your position in the text you're reading or accidentally click the wrong link as it shifts without warning.
CLS considers the proportion of the viewport impacted by layout shifts and the movement distance of the moved elements. For premium user experience, Google recommends your CLS to be 0.1 or less.
Why CLS Happens
According to Google, there are five reasons why Cumulative Layout Shift happens, and it is vital that every Shopify merchant knows them. CLS happens for the following reasons:
- Images without dimensions:
An excellent site practice used to be specifying the height and width of images; however, as responsive web designs became popular, this practice slowly started to fade away.
In recent times, modern web browsers use the height width attributes of an image to set the default aspect ratio of images. Hence it is vital that these attributes be set to prevent layout shifts.
Images and videos need to have the height and width dimensions declared in the HTML. Regarding responsive images, make sure that the different image sizes for the different viewports use the same aspect ratio.
To calculate aspect ratios, Google recommends using a good resource like AspectRatioCalculator.com.
- Ads, embeds, and iframes without dimensions:
Ads remain one of the biggest contributors to layout shifts despite improving store revenue. However, ads also increase CLS by pushing visible content down the page, causing a suboptimal user experience.
Dealing with ads can be a little tricky. One way to deal with ads that cause CLS is to style the element where the ad will show. For example, if you style the div to have specific heights and widths, then the ad will be constrained to those.
There are two solutions if there's a lack of inventory and an ad doesn't show up. If an element containing an ad does not show an ad, you can set it so that an alternative banner ad or placeholder image is used to fill the space.
Alternatively, for some layouts where an ad fills an entire row on the top of perhaps a column on the right or left gutter of a web page, if the page does not show up, there won't be a shift, it won't make a difference either on mobile or desktop. But that depends on the theme layout. You'll have to test that out if ad inventory is an issue.
- Dynamically injected content:
By dynamically injected content, we mean content that is injected into the web page. For example, in Shopify, you can link to a YouTube video or a Tweet, and Shopify will display the video or tweet as an embedded object.
To fix how dynamically injected content affects CLS, be sure to avoid injecting content above editing content except when targeted at user interaction.
Never inject content above existing content, except for user interaction; this ensures anticipation of potential layout shifts.
- Web Fonts causing FOIT/FOUT:
Downloaded web fonts can cause what's known as Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT).
To prevent that, use rel=" preload" in the link for downloading that web font.
- Actions waiting for a network response before updating DOM.":
If you're still unsure of what might be causing your site's CLS, Lighthouse is a great tool to help diagnose what is causing CLS.
CLS Can Sneak in During Development
During the development stage, there is a possibility that Cumulative layout shifts may slip in. This occurs when many of the assets needed to render the page are loaded onto a browser's cache. Hence, the next time a developer or publisher visits the page under development, they won't notice a layout shift because the page elements are already downloaded.
That's why it's useful to have a measurement in the lab or in the field.
How Cumulative Layout Shift is Calculated
There are two metrics/events involved in the calculation of CLS; Impact Fraction and Distant Fraction.
- Impact Fraction:
The impact fraction of an unstable element in the viewport measures how much space it takes up. On a mobile device, a viewport is what you see.
When an element downloads and then moves, the total space it took in the viewport from when it was initially drawn to when the page was displayed.
Google gives the example of a 50 percent viewport element that subsequently lowers down another 25%.
The Impact Fraction, which is given as a score of 0.75, is the sum of the 75 percent values.
- Distance Fraction:
The Distance Fraction is the second measurement. The distance fraction represents the amount of space traveled by the page element from its original position to its final position.
The page element moved 25% in the case above.
Now multiply the Impact Fraction by the Distance Fraction to get the Cumulative Layout Score: 0.75 x 0.25 = 0.1875
There's additional math and other factors to consider in the computation. What's crucial to remember is that the score is one approach to assess an essential aspect of the user experience.
How to Measure CLS
There are two ways to measure CLS. Google calls the first way in the lab and the second way in the field.
Measuring in the lab involves measuring in a synthetic environment by replicating an actual user downloading a web page. Using simulated Moto G4, Google generates the CLS score within the lab environment.
If you're looking to understand how your site layout performs before pushing it live to users, Lab tools are what you need. They also give publishers a way to test the layout for any possible issue.
Google's Core Web Vitals update includes Cumulative Layout Shift (CLS) as one of its key parameters in page ranking. Targeted at improved user experience; the new update focuses on ensuring users face as few layout shifts as possible while using a website.
About Andrew Durot
He is the co-founder of Ecom Experts, a Shopify focused development agency.
Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.
Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.
Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Add A Back-to-top Button On Shopify Step-by-Step Tutorial
- How To Hide Add To Cart Button On Shopify - 2021
- Ask How Customers Heard About Your Store On The Cart Page - 2021 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2021 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2021
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store