Just as a user is about to click a button, the page suddenly shifts downward. Halfway through an article, the font loads and the entire paragraph reflows. These changes hurt visual quality and may also cause accidental actions.
CLS should be observed throughout the page lifecycle, including initial loading, scrolling, delayed components, and unexpected shifts after interactions.
01 Define Dimensions for Images, Video, and Embeds
Give media explicit width and height values or an aspect-ratio so the browser can reserve space before the resource arrives. Responsive scaling should preserve the same ratio.
Third-party videos, maps, and social embeds also need placeholder space in their containers.
02 Reserve Stable Space for Ads and Dynamic Modules
Unknown ad dimensions, late-arriving recommendations, and suddenly inserted banners can all push existing content. Reserve a reasonable minimum height or load them outside the current viewport.
Design an empty state for cases when no content is available.
03 Avoid Major Metric Changes When Fonts Load
Choose a similar fallback font, preload critical fonts appropriately, and reduce unnecessary weights. Check line height and width for letters and numbers before and after the font swap.
Do not keep text invisible for an extended period merely to hide the font transition.
04 Do Not Insert New Content Above Users Without Warning
When notices, cookie banners, notifications, or error messages appear at the top of the page, reserve space, display them as overlays, or trigger them through a user action.
Load-more content should be appended in the expected location.
05 Animate Without Changing the Layout
Use transform and opacity for movement and fades whenever possible. Avoid repeatedly changing top, height, or margin in ways that cause reflow.
The layout should also remain stable after the animation ends.
06 Locate Issues by Session and Specific Element
Lab tools help identify shifted elements, while real user data reveals problems that occur after scrolling or on specific devices. Record the source and timing of each shift.
After a fix, verify that the shift has not simply moved to another component.
Common Sources of CLS
Source | Symptom | Primary Fix |
|---|---|---|
Images without dimensions | Body content moves down when the image appears | Set width and height or an aspect ratio |
Web fonts | Text wrapping and height change | Improve the fallback font and loading strategy |
Ads or embeds | Content is suddenly inserted in the middle | Reserve a stable container |
Notification banners | The entire page moves down | Use a fixed area or overlay |
Dynamic lists | Existing content is pushed away | Control insertion position and reserve space |
Layout animation | Continuous shifting | transform/opacity |
Frequently Asked Questions
What is considered a good CLS?
A common target is no more than 0.1 at the 75th percentile of real users, with ongoing observation across different templates.
Does lazy-loading images cause CLS?
Lazy loading itself does not, as long as the correct space is reserved before the image loads.
How can a cookie banner avoid layout shifts?
Use a fixed overlay, reserve an area, or define its height in the first frame while ensuring that users can interact with it.
Do fonts always need to be preloaded?
Preload only fonts that are genuinely critical and used early. Too many can compete with other resources.
Does every movement caused by animation count toward CLS?
Some changes within a user-input window may be handled differently, but the design should still prevent accidental clicks and disruption.
Service | View |
|---|---|
Related service | |
Related reading | View service details |
Design work | |
Project inquiry |
Link copied
