Display images without causing layout shifts

Creating placeholders for page content can sometimes be as simple as adding a background effect to existing page elements. In this example, all list items share the same underlying HTML structure. However, the placeholders are styled with a gray

• CSS
• HTML
• JavaScript

Reserve space for future page content

It is incredibly important to deliver fonts quickly: faster font delivery not only means that text will be visible to the user sooner - but it also has a large impact on whether a font causes layout shifts. If a font cannot be delivered before it is

• HTML

Avoid layout shifts when using infinite scroll

Banners and notices that don't cause layout shifts

This carousel uses CSS scroll snap to create smooth, performant slide transitions that do not cause layout shifts. This carousel can be navigated in a variety of ways: in addition to navigation controls, it supports keyboard navigation and swiping.

• HTML
• JavaScript
• CSS

Animated GIFs can be 5-20x larger than the equivalent MP4 video. However, MP4 videos can be configured to look and feel like GIFs by including the autoplay loop muted playsinline attributes on the <video> tag. In addition, to prevent layout

• HTML

This animated footer slides-in from the bottom of the page. The effect is created by using the CSS transform property. The result is a performant animation that does not cause layout shifts.

• CSS
• JavaScript
• HTML

Performant carousels

Responsive images are often implemented with the srcset attribute. The srcset attribute is a comma-separated list of image filenames and their width or density descriptors. To prevent layout shifts, set the width and height attributes on <img>

• HTML

This infinite scroll implementation is designed to ensure that there are never any layout shifts - regardless of how long it takes the server to respond with new content. One of the most common issues with many infinite scroll implementations is

• CSS
• HTML
• JavaScript

When optimizing video for Core Web Vitals make sure to set the width and height attributes on the <video> tag. Depending on the situation, you may also want to utilize the poster attribute. width and height attributes: To prevent layout shifts,

• CSS
• HTML

Performant Video

Sticky footers are a popular way of displaying notices. Notices placed in the footer are less likely to obscure page elements like navigation bars, branding, and banner ads. In addition, sticky footers do not cause layout shifts when they are

• CSS
• JavaScript
• HTML

Modals can be used as an alternative to banner notices. Because modals get displayed on top of existing page content, they do not cause layout shifts when they are displayed. This modal grows in size to fit its contents.

• JavaScript
• HTML
• CSS

Load fonts quickly

Self-hosted fonts are font files that are served from your own servers - rather than those of a third-party font provider (for example, Google Fonts). It is incredibly important to deliver fonts quickly: faster font delivery not only means that text

• HTML

Setting the width and height attributes on <img> tags helps prevent layout shifts. This information allows the browser to reserve the correct amount of space for the image. Set the width and height attributes: The values of these attributes

• HTML