Table of content
A Guide to Optimising Cumulative Layout Shift
In the fast-paced realm of web development, creating a visually pleasing and stable user experience is a top priority. One critical aspect of the user experience is the Cumulative Layout Shift (CLS), a metric that measures visual stability on web pages. A poor CLS can lead to frustrating user experiences, especially when elements unexpectedly shift around, causing confusion and frustration. In this blog post, we’ll delve into the world of CLS and explore how we at Saigon Digital approach optimising it.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a metric that evaluates site experience by measuring how much your site’s pages shift unexpectedly. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. Imagine you’re reading an article and, suddenly, new elements like banner ads pop up, pushing down the content you’re trying to read.
Even though several site elements impact the user experience, a poor CLS score also affects your website’s search engine optimisation (SEO).
To provide users with a positive experience, web developers must aim for a low CLS score. A score of 0.1 or less is considered excellent, scores between 0.1 and 0.25 need improvement; and anything above 0.25 is considered poor.
The most common causes of poor CLS are:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content such as ads, embeds, and iframes without dimensions
- Web fonts
How to Improve Your Cumulative Layout Shift Score
CLS score is a ranking factor, so optimising it will help drive more traffic to your site. Here are four ways to improve your CLS score, along with the difficulty level and impact of each method.
1. Defining Dimensions for Images and Videos
All image and video elements on a web page need width and height attributes to avoid unexpected shifts. Defining explicit dimensions (width and height) for images and videos ensures that the browser can allocate the correct amount of space in the document while the image is loading.
At Saigon Digital, we leverage the next/image module to enhance performance and Cumulative Layout Shift (CLS) by pre-rendering images with defined height and width attributes. Image from this website of ours: https://gremlinworks.com.tw/en/ using next/image. That is why it loads images so fast and CLS is optimised.
2. Prioritise Loading Critical CSS and Fonts
Critical CSS refers to the minimal amount of CSS required to render the initial view of a webpage. By delivering critical CSS and fonts early in the loading process, you reduce the chances of layout shifts as the page loads. Websites we made are font and CSS preloaded , you can test out the font loading at Mandala which is one of our website: https://mandalapartners.com/
3. Avoid Adding Elements Above Existing Content
Be cautious when dynamically injecting content above existing elements, as this can cause unexpected shifts. Ensure that new content is added in a way that minimises disruption to the layout.
4. Avoid Dynamically Injected Content Above the Fold
Dynamically injected content above the fold can lead to unexpected layout shifts. Ensure that any content added to the page dynamically does not alter the layout of existing elements, especially those visible to users upon initial page load.
5. Regularly Monitor and Test
Continuously monitor your website’s CLS using tools like Google PageSpeed Insights or Lighthouse. Regular testing, especially after implementing changes, is crucial to ensuring that the CLS remains within acceptable limits.
All websites at Saigon Digital are thoroughly tested with tools like Google lighthouse to ensure quality and key metric satisfied best user experience.
Conclusion
In the quest for an outstanding user experience, optimising Cumulative Layout Shift is non-negotiable. By implementing the strategies outlined above, web developers can significantly reduce unexpected layout shifts, contributing to a more stable and user-friendly online environment. Stay proactive, stay user-focused, and your efforts to optimise CLS will undoubtedly contribute to a more user-friendly online environment.
Optimise your website’s performance and user experience with Saigon Digital. Contact us today to learn more about our services and how we can help enhance your digital presence.
