CLS (or Cumulative Layout Shift) is a metric used to measure how much the content on a webpage moves around as the page loads.
Essentially, it tells you how much the layout of a webpage changes as the user interacts with it. This can be important for providing a good user experience, as a high CLS score can be frustrating for users trying to read or interact with the page.
What does NitroPack do to help fight the higher CLS?
The following NitroPack settings help improve the CLS score of your website:
Optimize CSS Delivery
The option creates critical CSS and reworks your website’s CSS to help speed up the display of above-the-fold content without having any render-blocking element.
Delay loading of non-critical resources until user interaction is detected
Stops dynamic interaction and dynamic class changes until there is an interaction on the page. This prioritizes the loading of critical information on your website.
Replaces the dynamic thumbnails of YouTube, Vimeo, and other iframe providers with a static thumbnail and play button, reducing the load on the website and stabilizing the layout.
You can read more about our Lazy loading in our article: NitroPack Lazy Loading Feature
Adaptive Image Sizing
We provide preemptive optimization of images, making them match the dimensions of the containers displayed across desktop, mobile, and tablet devices. This also helps to avoid layout shifting.
Override Font Rendering Behavior
With this option, NitroPack adds the font-display: swap; missing on font-display properties. This helps to visualize fonts as soon as possible to reduce the flashing of invisible text (FOIТ).
Additional information can be found in our article: How to fix "text invisible" issues during webfont load.
How can you improve the CLS yourself?
For most websites, you can avoid all unexpected layout shifts by sticking to a few guiding principles:
Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
Never insert content above existing content except in response to user interaction. This ensures any layout shifts that occur are expected.
Prefer “transform” animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.