Optimizing Cumulative Layout Shift with Fontaine

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is a crucial metric that measures the stability of content on a web page. It’s an essential aspect of user experience, as it can cause frustration and irritation when elements shift around during page loading. CLS is calculated by summing up the individual layout shifts that happen during page loading. The higher the CLS score, the more significant the layout shifts are. A good CLS score is essential for providing a seamless user experience.

The Problem with Custom Fonts

Custom fonts can be a significant contributor to CLS. When a custom font is loaded, it can cause the text to shift around, leading to a higher CLS score. This is particularly noticeable on mobile devices, where network speeds are slower, and font loading takes longer.

Introducing Fontaine

Fontaine is a tool that helps optimize font loading, reducing CLS and improving user experience. It works by creating a fallback font that matches the metrics of the custom font, ensuring that the text remains stable during page loading.

Using Fontaine with Docusaurus

To use Fontaine with Docusaurus, you need to add it as a dependency to your project. Then, you can create a plugin that utilizes Fontaine to optimize font loading. In some cases, you may need to update your CSS variables to accommodate Fontaine’s override font family.

// Add Fontaine as a dependency
npm install fontaine

// Create a plugin that utilizes Fontaine
const fontaine = require('fontaine');

const myPlugin = {
  name: 'y-plugin',
  async configure(config) {
    // Configure Fontaine to optimize font loading
    config.fonts = fontaine({
      // Your custom font configuration
    });
  },
};

Real-World Results

By using Fontaine, you can significantly reduce CLS and improve user experience. In one example, a website’s CLS score was reduced from 0.019 to 0, resulting in a much smoother and more stable user experience.

• Before: CLS score: 0.019
• After: CLS score: 0

Learn more about Fontaine and its benefits