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.
Lab tools include Chrome Dev Tools, Lighthouse and WebPageTests
Using in the field tools involves measuring real users interacting with site pages using Chrome User Experience Report, PageSpeed Insights and Search Console (Core Web Vitals report).
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.