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.