View profile

Google Web Vitals and Cumulative Layout Shift (CLS)

Google Web Vitals and Cumulative Layout Shift (CLS)
By Mastering JS Weekly • Issue #57 • View online
Google Web Vitals was a major change to how Google ranks search results based on measurable website quality. It was released in late 2020 and Mastering JS’ traffic immediately took a hit. Here’s why, and what we’ve done about it.

Cumulative Layout Shift
CLS measures how much your page layout changes as your page is loading. Imagine a <div> tag that shifts down when a big image is loaded. That’s an example of a layout shift.
The "Lorem ipsum" div shifts down, which increases CLS and decreases SEO
The "Lorem ipsum" div shifts down, which increases CLS and decreases SEO
One common reason for CLS is inline ads. When the ad loads, it shifts the rest of the layout down. The solution is simple: wrap the banner in a fixed height div so the banner doesn’t shift the rest of the page down.
Google's recommendation in one picture
Google's recommendation in one picture
Font Fallbacks Matter
If you’re loading fonts via <link> tags, that can affect your CLS. For example, Mastering JS loads Montserrat for copy and Inconsolata for code samples from Google Fonts. Montserrat is a fairly large font: 16px Montserrat is bigger than 16px sans-serif.
Layout with Sans-Serif
Layout with Sans-Serif
Layout with Montserrat
Layout with Montserrat
The layout shift caused by Montserrat loading was significantly increasing our measured CLS. Although most users aren’t affected by this layout shift because Google Fonts is pretty fast, we still need to fix this for SEO.
There are ways to preload fonts in more recent versions of Google, but we came up with a neat alternative: change the fallback font. DejaVu Sans is much closer to Montserrat, which means minimal layout shift and a near-zero CLS with no special browser features or extra JavaScript.
Layout with DejaVu Sans
Layout with DejaVu Sans
The key takeaway here is that fallback fonts aren’t just for show anymore. Picking the right fallback font can drastically reduce your CLS and improve your SEO.
Mastering JS is sponsored by Vue School. Check out their Vue 3 Master Class!
Mastering JS is sponsored by Vue School. Check out their Vue 3 Master Class!
Most Recent Tutorials
Best Books to Learn Vue in 2021 - Mastering JS
Global Variables in JavaScript - Mastering JS
Axios Response `data` Property - Mastering JS
Vue Single-File Components - Mastering JS
How to Use Chart.js with Vue - Mastering JS
Other Interesting Reads
Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts
Chromium Blog: Introducing Web Vitals: essential metrics for a healthy site
Getting Started with Apache Kafka in Node.js | www.thecodebarbarian.com
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue