Avoid large layout shifts

How do Layout Shifts affect page performance?

When a user visits your webpage, they’re usually looking to quickly interact with buttons, contact forms, images and videos.

Sometimes, just as they are about to click something, the screen has shifted down and they’ve accidentally clicked on something else, resulting in poor user experience.

This Layout shift affects the way users interact with your website; a poor CLS score indicates that your page is visually unstable.

How to avoid large layout shifts?

Avoid large layout shifts by incorporating good practices into your development workflow, such as:

1) Specifying image dimensions

Specify both width and height for your website’s image and video elements.

You can also use CSS aspect ratio boxes to do the same.

2) Reducing layout shifts caused by ads, embeds, and iframes

To reduce layout shifts caused by ads, embeds, and iframes, do things like:

• Use placeholders when there is no ad available to show.
• Reserve ad slot size (preferably the largest) before loading the ad library.
• Move ads to the bottom or out of the viewport.

3) Avoiding inserting new content above existing content

Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.

4) Preventing the Flash of Invisible Text (FOIT)

Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.

Or you can easily avoid large layout shifts with Staq!

With Staq Cache you can easily avoid large layout shifts!

CSS can cause render-blocking issues, however, you may find that Google identifies purely .CSS files only.

The Staq tool may either eliminate render-blocking resources or improve them.

To optimize, go to Site Optimizer > CSS. Then turn on:

• Load CSS deferred
• Extract Critical CSS.

What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren’t required at the initial load.