Cumulative layout offset: The Cumulative Layout Shift, or CLS, is a very important index of web performance proposed by Google. It is a user-centered index of visual stability of content, because it helps quantify the frequency of accidental Layout Shift experienced by users. Low CLS helps ensure the visual and interactive experience of page users.

When users browse a page, if they want to click a button or other interaction, the layout of the page suddenly shakes, which can cause the user’s interaction behavior to cause unexpected results.

Unexpected movement of page content usually occurs when resources are loaded asynchronously or WHEN DOM elements are dynamically added to a page on top of existing content. The culprit could be an image or video of unknown size, a third-party AD or widget that displays a font larger or smaller than a fallback, or that dynamically resizes itself.

Compounding this problem is the fact that the functionality of a project during development is often quite different from the user experience. Personalized or third-party content often doesn’t behave the same at development time as it does at production time, test images often already exist in the developer’s browser cache, and API calls that run locally are often very fast, so latency isn’t noticeable.

For example, when the page banner is common, when the image resource loading is slow, it does not affect the browser to parse DOM, CSSOM synthesis Layout Tree and other operations. When the whole page rendering is completed, the image is suddenly loaded and rendered to the page, it will cause serious CLS.

Google has always made user experience a top priority, but it often backfires in reality. Many popular and influential websites do not make user experience a top priority, and few front-end developers do not pay much attention to user experience, and CLS is one of the most important factors affecting user experience.

CLS scores

The lower the CLS score, the more snaps the layout of the page. The official CLS score using Google’s performance tool is below

  • Good

    A CLS score of less than 0.1 indicates that the page is stable

  • Needs

    The CLS score is between 0.1 and 0.25, indicating that the page stability is poor and the page needs to be optimized

  • Poor

    CLS score of more than 0.25 indicates that the stability of the page has been relatively poor, and the optimization of the page is imminent

Scoring tool

Knowing the CLS score, here are some of the official CLS scoring tools

Field tools

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • web-vitals JavaScript library

Lab tools

  • Chrome DevTools

  • Lighthouse

  • WebPageTest

Factors affecting CLS

  • No size is set for the image
  • No sizing for AD space, iframes, etc
  • Dynamically inject rendered content
  • Web page fonts result in FOIT/TOUT
  • Manipulate the DOM before some asynchronous operation (newwork)

How to optimize CLS

The font to optimize

Fonts in the download is not complete, the browser hidden or automatically degraded, resulting in font flickering

  • FOIT: Flash Of Invisible Text
  • FOUT: Flash Of Unstyled text

Use the font-display property to resolve flicker problems

@font-face {
    font-dispaly: block | swap | fallback | optional | auto;
}
Copy the code

Use the CSS font Loading API

@font-face{ unicode-range: .... ; For example, there are so many Chinese characters that it is impossible to load them all at once. Therefore, we can split the usage frequency of Chinese characters and load them according to the priority, and load them only when the fonts are used.Copy the code

Use preload to change the load priority of resources for preloading

<! -- Corssorigin ="anonymous" must be used to solve cross-domain problems -->
<link rel="preload" href="./xxx.woff2" as="font" type="font/woff2" crossorigin="anonymous" >
Copy the code

Image, video, iframes, advertising space and other optimization

Setting size attributes for elements such as image and video ensures a good placeholder effect without CLS before their resources are loaded

<img src="xx.png" width="200" height="200" alt="png" />
Copy the code

At this point, the simple concept and optimization sharing of CLS is over. Partners who want to work together or have opportunities in Shanghai and Hangzhou can add VX: NordonWang for communication

Reference:

  • cls
  • optimize-cls