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.

Video

Video can impact Web Vitals by being a source of layout shifts. In addition, in some scenarios large video files can delay LCP by monopolizing network resources and delaying the loading of other page resources.

Video

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

video {
    max-width: 100%;
    height: auto;
}

Open demo

This video loads without causing layout shifts and displays a poster image.

Learn more

GIF-style video

<video autoplay loop muted playsinline width="320" height="240">
    <source src="dog.mp4" type="video/mp4">
</video>

Open demo

This <video> tag looks and feels like a GIF but is far more performant.

Learn more