Written in front of the words
In today's digital age, the visual stability of a web page is essential to provide a good user experience. One of the key measures of visual stability is the Cumulative Layout Shift (CLS). CLS is one of the Web Vitals metrics that measures the frequency and extent of unexpected layout shifts that occur during the loading of web content, ensuring user comfort and satisfaction while browsing the web. In this introduction, we'll take a deep dive into the concept of CLS, evaluation criteria, data collection and presentation, and how to optimize for CLS to improve the user experience on the web.
introduce
Cumulative Layout Shift (CLS) is a stable Core Web Vitals metric. This is an important user-centric metric to measure visual stability, as it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that your web pages have a pleasant experience.
Layout shifts can interfere with the user experience in many ways, including sudden movement of text that causes users to lose their place while reading, and causing users to click on the wrong link or button. In some cases, this can cause serious damage.
Evaluation Criteria:
In order to provide a good user experience, a website must have a CLS score of no more than 0.1. To ensure that the majority of users reach this goal, we recommend measuring the 75th percentile of page load, broken down by mobile and desktop.
- Good，≤0.1
- poor,>0.25
explore
Data Collection
In the observation cloud you use js's performanceObserver to measure CLS, i.e. the following code:
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
Data display
Sequence diagram display
As a powerful data visualization tool, the time series diagram can visualize the cumulative layout shift (CLS) trend of different applications in the time dimension. With this graphical representation, we can clearly observe how the CLS indicator fluctuates over time, as well as the stability of each application over time. This dynamic perspective allows us to better understand potential issues with the app's user experience and develop targeted optimization strategies. For example, if the timing diagram shows that an app's CLS value has increased significantly after a specific event, we can quickly pinpoint the problem and take action such as adjusting the position of page elements, optimizing the image loading strategy, or improving the dynamic loading mechanism of content to reduce unexpected layout shifts, thereby improving overall visual stability and improving the user experience.
You can view the CLS metrics between different pages according to different page groups, and optimize them:
Leaderboard display
Leaderboards can be used to show CLS for different screen sizes, and optimize CLS according to the app's metrics:
Through the leaderboard, you can display the CLS of different page groups, and optimize the CLS according to the metric performance of the page group:
Affect the display of elements
For the performance of CLS, you can use the sequence diagram to show which element affects the performance of CLS, so as to optimize CLS in a targeted manner:
For CLS performance, you can use the leaderboard to show which element affects the performance of CLS, so as to optimize CLS in a targeted manner:
CLS optimization
The most common causes of poor CLS include:
- There is no size picture.
- Ads, embeds, and iframes without dimensions.
- Dynamically injected content, e.g., ads, embedded content.
According to the collected appids, page groups, and CLS influence elements, together with the above content, you can optimize and improve CLS in these dimensions.
Example:
Taking the high CLS of an application and a certain path as an example, you can make corresponding optimizations by looking at the real situation of the device:
By combining specific impact elements, it is also possible to optimize specific elements under specific screen sizes in a more targeted manner to improve visual stability.
For example, the <img> width and height attributes have been added to the tag to ensure that enough space is allocated on the web page before the browser starts extracting the image. This minimizes automatic reflow and relayout, increasing attributes while also adapting to the screen device ratio.
For situations where the width and height or screen device ratio are not very fine, you can reduce the layout shift by setting min-height and min-width, which can improve the user experience to a certain extent.
epilogue
In summary, CLS optimization is a key part of improving the user experience of web pages, and by optimizing the elements that affect CLS, we can effectively improve the visual stability of web pages and provide users with a more pleasant browsing experience. In the future of web design and development, we should pay attention to the optimization of CLS to ensure that the web page can show good visual stability on various devices and screen sizes. This will help to improve the user satisfaction of the website and increase the loyalty of users, which will bring more opportunities and challenges for the development of the website.