In this series, we have discussed Google’s Core Web Vitals that include new page experience signals. These new signals measure load time, interactivity, and the topic of this article, stability. Load time and interactivity have been around for a while, but measuring stability is brand new. With more focus on the user experience, it makes sense to measure this metric.
You have no doubt experienced instability while on a news site or looking up your favorite recipe for dinner. The content begins to load and just as you are in the middle of a sentence the page jumps. But sometimes it jumps up and sometimes down. So, there you are trying to find where you were. You begin reading and it jumps again.
Below you will learn that there are things you can do to improve your scores and optimize your user’s experience. We will define the stability metric, and what changes you can make to get a better measurement.
Stability Metric Defined
This brand-new metric used to measure the stability of your web pages is called Cumulative Layout Shift (CLS). It measures how much visible content shifts in the viewport and the distance those elements have shifted. If you want to maintain a good user experience you will want to have a CLS of less than 0.1.
Optimize for CLS
Layout shifts can be very distracting. Common causes of poor CLS include the following:
- Images, advertisements, embeds, and iframes without dimensions
- Dynamic content
- FOIT/FOUT font types
Suggested Solutions
Images/videos – Always include width and height size attributes. This reserves a required space on the page. You may also choose CSS aspect ratio boxes to ensure that the browser can allocate the correct amount of space.
Advertisements – Ads are probably the largest contributor to layout shifts. You can reduce this ad shift by statically reserving space for the ad slot. Also, be careful when placing non-sticky ads near the top of the viewport as it can disturb your header information. Always reserve the largest possible size for the ad slot.
Embeds and iframes – Platforms, such as social media posts, do not always reserve enough space for their embeds because they don’t know in advance if there is an image, video, or multiple rows of text. To minimize CLS is to precompute sufficient space for embeds with a placeholder.
Dynamic content – If you load content, such as a pop-up sign-up form, above existing content, it can cause a shift. Again, you can use a placeholder to reserve sufficient space and avoid the shifts.
Web fonts – Loading and rendering can cause shifts in your pages when the fallback font is switched out with a new font, known as FOUT, Flash of un-styled text. It can also shift when invisible text is shown until a new font is rendered, known as FOIT, flash of invisible text. There are tools to keep your fonts from shifting, such as the Font Loading API.
Core web vitals will guide you in creating web pages that provide a great user experience, which will ultimately give you new leads and new customers.
