In today’s fast-paced world, no one wants to wait, and that is especially true of website users. Studies have shown that longer page loading times are negatively correlated to conversion rates, meaning that the longer you make your website visitors wait, the more likely they are to go find their answers from someone else. It also means that, any improvement to your website performance can result in increased conversions. Because site speed is such a critical component of your success on the web, it is important to prioritize key metrics for improvement as part of your website performance and optimization.
There are three Core Web Vitals (characteristics of web pages that Google has identified as part of their page experience evaluation) that can help you quantify a user’s experience on your website. Each of these metrics represents a distinct and measurable facet of the user experience which is measurable and reflects the actual user experience of an important outcome — loading, interactivity, and visual stability.
This metric looks at loading performance across your website. To provide a good user experience, LCP should be less than 2.5 seconds.
FID measures time to interactivity by indicating how much time is spent on header scripts that make the rest of the site’s functionality possible. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
CLS measures visual stability. We’ll talk more about what visual stability means and why it’s important to your users below. To provide a good user experience, pages should maintain a CLS of 0.1 or less.
A good rule of thumb when analyzing and setting improvement goals for your Core Web Vitals is to aim for the 75th percentile of page loads, segmented across mobile and desktop devices. This ensures that your site performs better than three quarters of the web and puts you in a position to rank higher in search engines and convert more users to customers by virtue of website performance alone.
As of June 2021 when Google’s Page Experience Update rolled out, CLS is a ranking factor in the Google algorithm. That means your CLS score (together with LCP and FID metrics) will affect your SEO. While it’s likely to be a relatively minor factor, your CLS score could potentially impact the traffic you get from Google and other search engines.
Moreover, CLS correlates with user behavior metrics. While Google claims it doesn’t use metrics like dwell time or bounce rate for ranking purposes, other search engines, like Bing, admit to using those metrics in their ranking algorithms.
Regardless of how CLS and other page experience factors contribute to your SEO, all are important components to improve your user experience and keep leads and customers on your website.
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it indicates how often users experience unexpected layout shifts. Have you ever visited a web page and had your mouse hovering over a button that shifts placement right as you click? That’s poor CLS.
CLS refers to the unexpected movement of web page elements while the page is still downloading. This can be caused by a number of issues, including certain CSS classes, animations, fonts, videos, and code implementation. A low CLS score means that the user experience is more consistent across devices and therefore more enjoyable to the user. A high CLS score means that your website is shifting even after a user may be trying to interact with your web pages and can lead to frustration, high bounce rates, and poor user data collection.
According to Google, there are two ways to measure CLS: in the lab and in the field.
Lab tools are best for understanding how a layout may perform before pushing it live to users. Field tools analyze real user behavior happening on the live site. To measure CLS in the lab, you must simulate an actual user downloading a web page. Google uses a simulated Moto G4 for generating the CLS score within the lab environment.
Before we can point to an exact cause for CLS issues, we need to identify which elements on the site are causing these shifts. To do this, we will run a performance report in Chrome’s Lighthouse and compare the report’s findings with the list of usual suspects below. Finally, we will look at a few website optimization practices that can resolve these issues.
Lighthouse includes support for measuring CLS in a lab setting. This release will also highlight the nodes that cause the most layout shifting. Here’s how:
According to Google there are five reasons why Cumulative Layout Shifts happen:
One of the simplest solutions to CLS is to give all elements including images, iFrames, and other embeds fixed height and width dimensions. This works by precomputing sufficient space for embeds with a placeholder or fallback.
If your site is using fonts hosted online such as Google fonts, these fonts could be causing the common issues of FOIT (Flashes Of the Invisible Text) and FOUT (Flashes Of the Unstyled Text).
While the fonts are downloaded to the browser from the server, the screen will often display a blank space until the custom font loads, which causes a significant shift in content once it is fully loaded. This is called FOIT (Flashes Of the Invisible Text).
FOUT (Flashes of The Unstyled Text) occurs when the browser displays one of the system fonts until the custom one is downloaded. Since the system font may differ from the custom one, it may take up a different amount of space. Again, this can cause a significant shift in content once the page is fully loaded.
To avoid this, you can use font:display values such as auto, swap, block, fallback, and optional. For an even better result, you can also preload font files using <link rel=preload> for key fonts — this way they will be downloaded as a priority asset.
Layout shifts that occur in response to user interactions such as clicking a button or typing in a search box are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user. A layout shift is only bad if the user doesn’t expect it.
CSS transform property allows you to animate elements without triggering layout shifts:
Search engine optimization and website optimization are on-going processes, and any improvement to your website performance can result in higher rankings and increased conversions which are compounded over time. To optimize your website, you should regularly run performance tests to guide your efforts. CLS issues can be daunting to diagnose and fix, but doing so keeps you in line with Google's ever-changing algorithm and ensures that your website has an exceptional mobile experience. Learn more or chat with one of our Growth Driven Design specialists today!
Want to learn more about optimizing your website? Check out our website optimization page or download the free checklist to get your site running smoothly.