My Website has CLS – Now What?

Social Distancing. Coronavirus. Lockdown. New normal.

These are a sampling of new terminology bestowed upon us in 2020 (albeit with little warning). Another new term that may not be as familiar poses a significant challenge to the well-being of websites: Cumulative Layout Shift (CLS).

Cumulative Layout Shift is a metric Google leverages within their Web Vitals initiative. It documents how often users experience unexpected layout shifts during the initial page load.

We’ve all been there – we finally find the page we’ve been looking for and start reading. Without warning, the page shifts and now you’ve lost your place. Frustration ensues.

An example of cumulative layout shift.
An example of cumulative layout shift. Source: https://web.dev/cls/

In short, Cumulative Layout shift measures how much visible content shifts within the viewport on page load. It combines this with the distance the content shifts to determine the CLS score

CLS scoring chart. Sites should strive to have a CLS score of 0.1 or less.
Source: https://web.dev/cls/

Measuring CLS

Sites should strive to have a CLS score of 0.1 or less. Here are three evaluation tools to check CLS and other Web Vitals scores:

  1. Google Page Speed Insights
  2. Google Search Console’s Core Web Vitals Report
  3. Lighthouse

Consequences of CLS

Google intends to factor CLS into their ranking algorithms starting in mid-June 2021. This likely means that sites with a high CLS score will start dropping in search rankings. Sites that invest the time and effort to fix CLS could see higher rankings.

Pinpointing CLS

The tools above are great at measuring and reporting CLS. They do a terrible job sharing exactly where CLS is occurring within pages. At LC, we like using the Layout Shift GIF Generator to find exactly where CLS happens. The tool also remeasures the CLS score as we make changes, which is handy in troubleshooting.

If you want to try it yourself, enter a url, select either the “mobile” or “desktop” option and let the tool work! It will gather screenshots and create animation loops that showcase page lifecycle events. It then presents your score and you can get to work.

Don’t forget to thank the creator of this incredible tool by buying Chris a coffee.

Screenshot of the Layout Shift GIF Generator evaluating https://www.laughlin.com/.

Tactics to Resolve CLS

Once you identify CLS, you can fix it with a series of clever experiments. Sometimes, you may need to implement changes that go against best practices, so be careful.

Width Attributes are Back

Include width attributes on images and videos. No need to include “px” or “%” units, use the numeric value. Reserving the required space for elements reduces size rendering hiccups while the page is loading.

In some cases, containers themselves will need CSS updates to include width properties to reduce CLS.

Host Web Fonts

Hosting fonts on your own domain, preferably on a content delivery network (CDN), allows the browser to download font files faster. You can also provide a preload hint:

<link rel="preload" href="/my-font.woff2" crossorigin="anonymous" as="font" type="font/woff2">

When the browser reaches this line of HTML it immediately sends a high priority request for the font files. This means the font is more likely to be available when the browser renders text.

Both of these updates in tandem reduce opportunities for font flash, showcased below:

Example of flash of unstyled text (FOUT), where the default font face displays for a short time ahead of the typeface called for via CSS.

Eliminate Dynamic Content Insertion

Refactor areas of the page where content is automatically inserted above existing content – except in cases where the content is injected in response to a user interaction. Examples of these include ads, embeds and iframes without dimensions. Ads are one of the largest contributors to layout shifts on the web. If you display ads, try eliminating shifts by reserving the largest possible size for the ad slot.

Animations

Use CSS transform animations instead of animations that trigger layout changes, like box-shadow and box-sizing.

CSS Triggers and High-performance animations are great resources for further insights.

Summary and Further Reading

The information above is a glimpse of what we have learned to date, but by no means is it everything about CLS. Please see the resources below for more information on everything in this post. The authors of those pages have all done great work to document how they combat CLS.

Hopefully this helps you keep your pages less shifty.

https://web.dev/cls/

https://web.dev/optimize-cls/

https://simonhearne.com/2021/layout-shifts-webfonts/

Paul Brienza
Paul Brienza
Chief Growth Officer
(414) 270-7175
paul.brienza@laughlin.com

Let’s Talk