Feb 12, 2021

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

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

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 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

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!

Most Recent Tutorials

Best Books to Learn Vue in 2021 - Mastering JS

Looking to learn Vue in 2021? Or looking to level up your Vue skills? Here’s a list of books that can help!.

masteringjs.io • Share

Global Variables in JavaScript - Mastering JS

Any JavaScript variable defined outside any function is a global variable, but that comes with caveats for Node.js and Webpack. Here’s what you need to know.

masteringjs.io • Share

Axios Response `data` Property - Mastering JS

Axios responses have a data property that contains the HTTP response body. Here’s what you need to know.

masteringjs.io • Share

Vue Single-File Components - Mastering JS

Vue single file components (.vue files) provide several advantages over writing vanilla JavaScript. Here’s how you can get started with Vue single file components, including how to configure Webpack.

masteringjs.io • Share

How to Use Chart.js with Vue - Mastering JS

Here’s how you can use Chart.js and vue-chartjs to render charts in Vue.

masteringjs.io • Share

Other Interesting Reads

Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts

By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Combining with font-display: optional is the most effective way to guarantee jank-free rendering of custom fonts.

web.dev • Share

Chromium Blog: Introducing Web Vitals: essential metrics for a healthy site

Optimizing for quality of user experience is key to the long-term success of any site on the web. Through our ongoing engagement and coll…

blog.chromium.org • Share

Getting Started with Apache Kafka in Node.js | www.thecodebarbarian.com

Kafka is a powerful distributed pub/sub platform that is popular in large organizations. Here’s how you can get started with Kafka in Node.js using the KafkaJS npm module.

thecodebarbarian.com • Share

Did you enjoy this issue?

By Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

Tweet

Share

In order to unsubscribe, click here.

If you were forwarded this newsletter and you like it, you can subscribe here.