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.
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
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:
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.
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.
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="https://6a5yb3wndl515ftou1t6rtum-wpengine.netdna-ssl.com/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:
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.
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.