Cumulative Layout Shift (CLS) is the measurement of the sum of all unexpected layout shifts during the loading of a page. A layout shift is the visible movement of an element from one frame to the next. For example, if a rendered banner message first loads and is visible but a second later, an image loads and pushes the banner down vertically, this is considered a layout shift.
In this article, we look at techniques that reduce CLS.
Quickly jump to a topic:
Include image size attributes
Carefully insert content
Animate using CSS Transformations instead of manipulating properties.
Include Image Size Attributes
Simply include width and height attributes in image tags. These values allow the browser to reserve visual space before rendering an image into place.
We recommend that your width and height values describe a desired aspect ratio to minimize responsive imagery issues. For example, an image element written as the following would reserve a 16:9 aspect ratio’s worth of image space.
<img src="image.png" width="1920" height="1080" />Targeting aspect ratio will result in more consistent placements that do not squash or stretch images.
A caveat: This approach can be doomed by design. Perhaps an image placement is not a clean 16:9 image ratio across all viewports. In this scenario, even with responsive images, the placement’s image is likely to size in awkward ways. This is an area where the guidelines provided by Google outpace the current ability of browsers. You will just have to take the CLS hit on these image scenarios until responsive imagery can reserve multiple aspect ratios.
The web.dev article for optimizing CLS scores covers the current pitfalls of the height and width attributes and is well worth the attention.
Carefully Insert Content
There are many reasons why a site needs to have content inserted into a page after the initial page load. Alert banners, live chat services, and CCPA or GDPR language are only a few examples. When it comes to your site’s CLS score, inserting content after a page loads hits hard, and it should. Asking users to navigate unpredictable ever-shifting layouts is a terrible user experience.
The size and location of inserted content is an important factor. Minimize insertions at the top of the page and ‘above the fold’ in general. It is also essential to keep the inserted content small. Keep those alert banners to one line, do not insert large advertisements.
The most consistent approach to a better CLS score is not to insert content. However, that is not always possible. Perhaps your business is running a CRO test for a potential new feature. Google Optimize or a similar platform will run inserts or changes after the page has loaded. In this scenario, you will have to take the deduction. But, these injections should not be permanent. The goal is to properly allocate space for all content on page load.
To emphasize what a bad insert looks like, here are 4 CLS wrecking insertion scenarios you have likely encountered as a user and should avoid as a site owner:
- Have you ever started to read an article only to have it slide nearly or entirely out of view because a video player suddenly loaded onto the page above it?
- Have you ever tried to read a recipe on any website and struggle to scroll past the exhausting doctoral thesis about the recipe to reach the actual instructions at the bottom of the page, but get pushed back up because the site continuously loads in new advertisements as you scroll?
- Have you ever just clicked on a button only to find that you actually clicked on a grotesquely oversized ad for a new action movie that popped under your cursor a split second before you could complete the action of clicking? I hope you enjoy the trailer that is about to autoplay at full volume.
- Have you ever simply viewed a website only to get abruptly punched in the screen by a modal (popover) newsletter sign-up form?
It’s ok; we already know the answer to these questions is yes, coupled with a tearful glance towards the horizon. Don’t be “that” website.
Animate Using CSS Transformations Instead of Manipulating Properties
The web.dev article that introduces CLS only touches on the subject of animations. In a short paragraph, the section labeled “Animations and transitions” makes a direct point: Animations that use CSS Transforms will not trigger layout shifts. This concept is not something that was just made up for CLS. Transformations are only concerned with manipulating what is shown and therefore do not trigger reflow.
Reflow is an expensive operation for a browser to perform. When reflow occurs, the browser updates the animating element and every other element in the document that is affected by the animation. Animating attributes like height and width to grow or shrink an element or animating CSS positions (top, right, bottom, left) trigger reflow. A good CLS score depends on reflow not happening. It helps to think about reflow as stop motion animation. Sixty times per second, the entire page has to set up and take another picture. Even if it has some memorable musical numbers, stop motion is slow and expensive.
CSS transforms manipulate what is being shown instead of changing the underlying structure. Also, transformations are hardware accelerated. They are faster and more efficient because the extra work to animate gets handed off to the GPU (graphics processing unit). If reflow is stop-motion, then transformations are real-time graphics.
So, when your site needs a sliding panel, don’t animate the max-height property to animate it. Use transform: scaleY(1) instead; your CLS score will thank you for it.
Cumulative Lifetime Struggle
A point about CLS to finish on is that older sites will be hit hard by this metric. The three points of optimization above are not new concepts; however, sites that have been up and running for five-plus years are likely built on older responsive design principles that didn’t emphasize these optimizations. Take it slow, fix as much as possible and get ready for the new version of your site that can incorporate all of these ideas from the start.
Wrap Up and Priorities
And now, to wrap it all up and send you away with a plan for lowering a CLS score. Image size attributes are the easiest thing to address to start chipping away at a high score. Refactoring transitions and animations to use non-reflow triggering transformations will also provide small steps. Disruptive and expensive insertions will devastate your score. Insertions are difficult to come back from as they can require new approaches to marketing strategies and trigger refactors of older sites, but they are important targets and are worth the effort due to the amount of CLS score they can recover.
Implementing the topics discussed in this article will improve CLS scores and enhance the user experience by reducing frustration. When combined with best practices for quickening server response time, improving First Input Delay (FID) and First Contentful Paint (FCP), and improving Largest Contentful Paint (LCP), the performance results will be enterprise level.
