Cumulative layout shift

Cumulative layout shift


“Cumulative layout shift” (CLS) is a metric used to measure visual stability of a website. It is intended to quantify the amount of unexpected layout shift that occurs while a page is loading. This metric is important because unexpected layout shifts can create a poor user experience, as the user may lose track of what they were trying to click on, or have to re-read a sentence after content has shifted. The metric is calculated by taking the sum of the area of all layout shift events on a page and dividing it by the total viewport area. A lower CLS score is considered better, as it indicates less unexpected layout shifts.

  • Some key features of cumulative layout shift (CLS) include:

    1. Measuring visual stability: CLS is used to measure how stable the layout of a website is during loading. It quantifies the amount of unexpected layout shift that occurs, which can create a poor user experience.

    on the fly image
    • An example of cumulative layout shift (CLS) would be a website where the main content is initially at the top of the page, but as images and other elements load, they push the main content down. This causes the user to have to scroll down to find the content they were originally looking at, and can be disorienting and frustrating. In this example, the CLS score would be calculated by taking the total area of the layout shift (the amount that the main content moved down) and dividing it by the total viewport area.hidden button
banner advertise
image hight and width set
on scroll

Post a Comment

Previous Post Next Post