Your site not passing the Core Web Vitals? Allow us to show you some insights on why this is happening, and some solutions to fix this! Today, we're talking basics + Cumalative Layout Shifts
About 50% of Hyvä sites passes Core Web Vitals (CWV), a metric everyone is very happy with, as passing it while using the default Magento 2 theme or worse yet, PWA used to be almost impossible. But what's the reason 50% do not pass? Or worse yet, why doesn't your webshop pass? Let's find out together! This blog is the first part of a trilogy, so let's first talk about the basics of Web Performance.
Now, let's zoom in on Cumulative Layout Shift (CLS)
We're kicking of with how to optimize your Core Web Vitals with the Cumulative Layout Shift (CLS). This is a metric that on first appearance has very little to do with performance, but more with reducing annoyances. Let me show you how:
A CLS tends to happen when elements within a page are loading in with a delay, because a browser hasn't rendered them yet, because it's busy prioritizing something else. We often find this happens when (video)ads are embedded on a site. But it can be other elements as well. The challenge is, some CLS issues are very obvious, like the GIF above. But, a CLS can happen over the whole page. This is often something that suprises people, but it's not called a cumulative layout shift for nothing. It collects all the moments a visitor saw a shift and reports back on that, on a score between 0 and 1, with 1 being the worst.
5 simple Tips to Improve CLS for Better User Experience
To make CLS better, you should work on reducing layout changes caused by dynamic content, making sure fonts load correctly, and staying away from DOM manipulation that isn't necessary. Here are some pointers to get you started:
Set the width and height of images and iFrames.
Most layout changes occur when content that has already been loaded moves after other content has finished loading. So, the best way to deal with this is to reserve any necessary space as far in advance as possible.
The simplest method for correcting layout shifts caused by images that are not sized is to explicitly set the width and height attributes of images. 72% of pages have at least one unsized image, and possibly more.
CLS based on aspect ratio
When dealing with aspect ratios, different values could be used. The browser can determine the required space by knowing the aspect ratio. Most modern browsers determine the default aspect ratio based on an image's width and height attributes.
Most of the time, layout changes happen when content that has already loaded moves after other content has finished loading. So, the best way to deal with this is to book any needed space as far in advance as possible.
<img src="rocket.jpg" alt=Rocket in the sky" width=420 height=400>Setting the width and height attributes of images explicitly is the simplest method for correcting layout shifts that are caused by images that are not sized. 72% of pages have one unsized image, and maybe even more.
Loading of fonts
The browser may temporarily display invisible text or an incorrect font while waiting for the font to load, which is a common cause of layout shifts. To avoid this, use the CSS @font-face rule to load fonts asynchronously. CSS's font-display property can also be used to specify how the font should be displayed while it is loading. Set font-display: swap, for example, to have the browser display a fallback font while it waits for the custom font to load.
CSS animations should be used instead of JS animations.
If animations are not executed smoothly, they can cause layout shifts. While JavaScript animations are frequently used for dynamic effects, they can produce choppy or uneven animations, causing layout shifts. Instead, consider using hardware-accelerated CSS animations, which can result in smoother animations that are less likely to cause layout shifts.
Avoid DOM manipulation that isn't absolutely necessary.
When the DOM is modified after the initial render, the browser must reposition elements to reflect the changes. It's best to avoid unnecessary DOM manipulation to reduce these shifts. If you must change the DOM, do so in a way that has the least impact on the layout, such as by using absolute positioning to keep elements in place.
Reduce dynamic content (JS)
The injection of dynamic content may result in layout shifts, which are one of the factors that contribute to a low CLS score. The term "dynamic content" refers to any type of content that can be altered based on the data and actions of the users. Consider inserting a banner at the very top of the viewport to promote the most recent sale or to invite users to sign up for a newsletter.
Do you have content of this kind posted on your website, and if so, how vital is it that it be easily accessible? After that, check to see that you have reserved sufficient space for the dynamic content.
By implementing these tips, you can reduce the number of layout shifts on your website and improve your CLS score. A lower CLS score will result in a more stable, user-friendly experience for your visitors.
