#longread #goodtoknow #performance

This post is about Cumulative Layout Shift(CLS) in browsers.
1. Whats this?
2. Why affects to performace?
3. How can be improved?


1. Cumulative Layout Shift (CLS) is a performance metric that quantifies how much content on a webpage shifts unexpectedly during the loading process. These shifts can affect not only the user experience but also the site's SEO and performance 😐

2. A high CLS score indicates a poor user experience, as frequent content shifts may lead users to click on unintended elements. This instability can increase bounce rates and negatively impact search engine rankings, making it crucial to optimize.

3. Optimization has varios strats, but coomon are:
- Reserve Space: Specify the width and height, reserve space for images and other interactive elements. If its not specified browser calculates its size after this content loaded and this leads to shifting the entire page 😧

- Avoid Dynamic Content Above Static Content: DO NOT INSERT DYNAMIC CONTENT ABOVE EXISTING!!! 🔫 Common mistake, you can meet it on different pages, where ads pushed into some block and this block shifts all stuff below 🔫

- Font Loading Strategies: Use CSS's `font-display: swap` to ensure text remains visible during font loading, or preload fonts to avoid FOIT (Flash of Invisible Text) 👍

Further Reading:
1. here
2. here
3. and here

@islombe_dev