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:
Generate critical CSS
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 non-critical resources
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.
Lazy load iframes
Delay the loading of off-screen iframes (incl. videos) until they need to be displayed on the user's screen, improving initial page load times and overall site speed.
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.
📌 If you need any assistance or have questions, you can always reach out to our support team at [email protected] or via this link: https://support.nitropack.io