Have you ever tried to click a button on a website, but it suddenly moved just as you were about to tap it? This is what we call a layout shift, and it’s a common problem on many online stores, including those built with Shopify.
When a website has too many of these annoying shifts, it can irritate shoppers. They might leave the site because it feels too buggy or glitchy, get the wrong impression of your brand (if they can’t look after their website, what’s the customer service going to be like?) or give up on buying something. Here are some everyday examples of these pesky shifts:
- Pictures popping up and pushing other stuff down the page
- Buttons playing hide-and-seek just when you want to click them
- Words jumping around as fancy fonts load up
- New bits of content shoving everything else out of the way
These jumpy pages are extra annoying on phones, where there’s not much space to begin with.
The good news is that store owners can fix these problems. In this article, we will walk you through what CLS is, how to improve CLS in Shopify, understand how to optimise the metric and how to measure layout shifts via tools.
What is CLS?
Cumulative Layout Shift (CLS) measures how much a webpage’s content unexpectedly moves during loading. It’s a crucial user experience metric that quantifies how frustrating a page might be to interact with. For example, trying to click a button, but it suddenly shifts down, causing you to click something else entirely. That’s the kind of poor experience CLS aims to prevent.
How does improving CLS help your Shopify site?
A stable, shift-free page keeps customers focused on your products rather than fighting with your interface.
- Improved user experience
- Reduced bounce rates
- Increased conversions
- Better search engine rankings
How to check for CLS issues on Shopify
If you are a Shopify site owner or a marketer with no knowledge of web development, you can still find out what is going on with CLS by using a tool like PageSpeed Insights.
- Go to Google PageSpeed Insights
- Enter your store’s URL and click “Analyze”
- Find the “Cumulative Layout Shift (CLS)” score under “Lab Data”.
- Click the filter button on the right
- Select “CLS” to show only CLS-related issues
- Expand each item to see screenshots of problem areas
Common CLS problems include:
- “Image elements do not have explicit width and height”
- “Ensure text remains visible during webfont load”
- “Avoid large layout shifts”
- “Minimize main-thread work”
- “Reduce the impact of third-party code”
- “Serve static assets with an efficient cache policy”
- “Properly size images”
- “Eliminate render-blocking resources”
- “Defer offscreen images”
- “Minimize CSS blocking time”
Understanding how to optimise CLS
Optimising CLS can be tricky and usually needs an experienced web developer, but knowing the main causes can help site owners or marketers collaborate better with them to boost Shopify site’s performance.
Images without reserved space
One of the most common causes of layout shifts is images loading without predefined dimensions. When browsers don’t know image dimensions, they initially render the page assuming a zero height for images. This causes content to shift when images load, resulting in a poor user experience.
To address this, developers add width and height attributes to image tags. By specifying dimensions, browsers can reserve the correct space for images before they load, preventing layout shifts. This optimisation involves modifying image markup and CSS, ensuring that the browser knows exactly how much space to allocate for each image from the start.
Injected content without reserved space
Content injected by apps or third-party scripts often arrives late, causing existing content to shift. This can be particularly problematic for Shopify stores that rely heavily on apps for functionality.
To mitigate this issue, developers reserve space for dynamic content like app elements. This prevents other elements from moving when the injected content appears, maintaining a stable layout throughout the loading process. Implementing this optimisation typically involves adding placeholder elements or setting minimum heights using CSS for areas where dynamic content will be loaded.
Late-arriving CSS
CSS that loads late can cause unstyled or semi-styled content to appear, leading to poor user experience and layout shifts.
To combat this, developers focus on loading critical CSS early, especially for above-the-fold content. This ensures that content is styled correctly from the start, preventing visual changes that contribute to CLS. Implementing this optimisation often requires restructuring how CSS is loaded and prioritised, which may involve techniques like inlining critical CSS or using preload links.
Suboptimal animations
Animations using position properties like top and bottom can cause layout shifts with each frame, contributing to a high CLS score.
To optimise animations, developers use modern CSS transform properties instead. These properties don’t affect layout, reducing CLS and improving overall performance. Implementing this change involves rewriting animation code to use transforms rather than traditional positioning methods, resulting in smoother, more efficient animations that don’t disrupt the page layout.
Font swapping
Font swapping can cause layout shifts if the fallback and web fonts have significantly different metrics. To address this, developers use fallback fonts that closely match web fonts. This reduces the visual impact of font swapping, minimising text reflow when custom fonts load.
Implementing this optimisation involves carefully selecting and configuring fallback fonts, often using CSS font descriptors to adjust their properties and make them more similar to the desired web font.
How to measure layout shifts
There are several tools you can use to measure and detect layout shifts:
1. Dev Tools
For a quick check of shifting content:
- Open browser Dev Tools
- Go to the Network tab
- Disable cache
- Slow down network speed
- Refresh the page multiple times
- Look for any visible layout shifts
This helps simulate slower devices/connections and catch obvious shifts.
2. WebPageTest
To catch all layout shifts:
- Run a test on WebPageTest.org
- Go to the “Web Vitals” view
- Look at the CLS section
- Examine each frame with a layout shift
- Shifted content highlighted in pink
- Mouse over to see before/after
3. Web Vitals Chrome Extension
- Outputs layout shift details to browser console
Q&A
Q: What’s a good CLS score?
A: Aim for a score of 0.1 or less for optimal performance.
Q: Can third-party apps affect CLS?
A: Yes, apps that inject content can significantly impact CLS if not properly implemented.
Wrapping Up
Making your Shopify store’s pages load without jumps and shifts isn’t just about ticking boxes for tech experts. It’s really about making your online shop a place where customers enjoy browsing and buying.
The reasons are:
- Happy shoppers are more likely to stick around and buy stuff.
- When your site works smoothly, more visitors turn into buyers.
- Google likes stable websites, so you might show up higher in search results.
By using the tips we’ve talked about, you can make your store much nicer to use.
Remember, in the market of online shopping, every little thing that makes your store better than the competition counts. A website that doesn’t frustrate people can be the difference between making a sale and losing a customer to another store.
So, why not start improving your Shopify store today? You might be surprised at how much happier your customers become – and how that happiness turns into more sales for you. If you encounter technical difficulty, contact the developer team at Kahunam – we can fix your problems on a one-off basis or you can work with us via a Shopify retainer service.
