Web Vitals patterns

A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. You can use the code in these examples to help ensure your projects stay on the right track.

Fonts

If a web font has not been loaded, browsers typically delay rendering any text that uses the web font. In many situations, this delays First Contentful Paint (FCP). In some situations, this delays Largest Contentful Paint (LCP).

In addition, fonts can cause layout shifts. These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.

For more information, see Best practices for fonts.

Self-hosted fonts

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("GoogleSans-Regular.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>

Open demo

This demo combines two performance techniques to deliver a self-hosted font as quickly as possible: use of inline font declarations and use of the WOFF2 font format.

Learn more

Third-party fonts

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>

Open demo

The demo combines two performance techniques to load a third-party font as quickly as possible: use of inline font declarations and use of preconnect resource hints.

Learn more