CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the visual stability of a page as it loads. Rather than tracking speed or responsiveness, CLS focuses on whether visible content unexpectedly moves during and after the loading process. Every time an element shifts without user interaction, the browser records the distance and size of the shift. These individual shift scores are grouped into session windows, and the largest session window becomes the page's CLS score. A score of 0.1 or less is considered good, 0.1 to 0.25 needs improvement, and anything above 0.25 is poor.

Unexpected layout shifts directly degrade user experience. A reader reaching for a button may accidentally tap the wrong element when content jumps. A viewer scrolling through a document may lose their place entirely. These frustrations increase [bounce rates](/glossary/bounce-rate) and reduce time on page. Google uses CLS as one of three Core Web Vitals in its ranking algorithm, so pages with poor visual stability face both engagement and SEO penalties. For digital publishers who embed interactive content like flipbooks, controlling CLS is especially important because third-party embeds are one of the most common sources of layout shifts.

FlipLink's viewer is engineered to minimize CLS by reserving fixed dimensions for the flipbook container before page content fully loads. Images and interactive elements render within pre-allocated spaces so the layout does not shift as assets arrive. The Three.js flipbook renderer and PDF.js document viewer both initialize with a stable frame, preventing the page-flip animation from causing layout jumps. The [responsive embed](/features/sharing-and-distribution) code that FlipLink generates uses aspect-ratio containers, which claim the correct amount of space on the host page immediately. This design benefits both the embedded viewer on your website and the hosted publication on go.fliplink.me.

CLS is measured using two components for each shift: **impact fraction** (the percentage of the viewport affected) and **distance fraction** (how far the element moved relative to the viewport). The layout shift score for a single frame equals impact fraction multiplied by distance fraction. Shifts that happen within 500 milliseconds of user input (like a click or tap) are excluded because the user expects movement in response to their action. Chrome's DevTools, Lighthouse, PageSpeed Insights, and the Web Vitals JavaScript library all report CLS. Field data from the Chrome User Experience Report (CrUX) provides real-world CLS scores collected from actual visitors.

CLS uses a **session window** approach to calculate the final score. A session window is a group of layout shifts that occur within one second of each other, with a maximum window duration of five seconds. The page's CLS score is the largest single session window, not the sum of all shifts. This method was updated in 2021 to better reflect long-lived pages and single-page applications where content loads progressively. Common causes of high CLS include images without width and height attributes, dynamically injected ads or banners, web fonts that trigger a flash of unstyled text (FOUT), and third-party embeds that load asynchronously without reserved space.

**"CLS only matters during initial page load."** CLS tracks shifts throughout the entire page lifecycle, including those triggered by lazy-loaded images, infinite scroll content, or dynamically inserted elements. Single-page applications that swap content on navigation can accumulate CLS if transitions are not handled carefully. **"A CLS score of 0 is the goal."** While zero is ideal, a score of 0.1 or below is considered good. Chasing absolute zero can lead to over-engineering. The practical target is keeping shifts imperceptible to users. **"CLS measures how fast a page loads."** CLS has nothing to do with speed. A page can load in under one second and still have terrible CLS if elements jump around during rendering. Speed is measured by [LCP](/glossary/lcp) and other timing metrics, not CLS.