This guide covers “fix cls” in plain language. Cumulative Layout Shift (CLS) measures how much visible content jumps around while a page loads. Annoying shifts make people tap the wrong button. A good CLS is 0.1 or less. Here is how to track down and fix layout shifts in WordPress.
Common causes
- Images and videos without set dimensions
- Ads, embeds and iframes that load late
- Web fonts swapping and changing text size
- Banners, cookie notices and popups injected at the top
- Sliders that resize as they load
Find layout shifts
- PageSpeed Insights lists the elements that shifted.
- Chrome DevTools has a Layout Shift Regions option in rendering tools.
- Record a Performance trace to see shift events.
Fixes
1. Always set width and height on images
This lets the browser reserve the right space before the image loads. WordPress adds dimensions to images in most cases; check images inserted via custom HTML. Use CSS aspect-ratio for flexible containers.
2. Reserve space for embeds and ads
Give iframes, videos and ad slots a fixed or aspect-ratio container so content below does not jump.
3. Handle fonts carefully
Use font-display: swap or optional, preload key fonts and choose fallback fonts with similar metrics to reduce the swap shift.
4. Avoid inserting content above existing content
Place cookie bars and announcement banners in reserved space or overlay them instead of pushing the page down.
5. Stabilize sliders and carousels
Set a fixed height or ratio so the area does not collapse and expand.
6. Animate with transforms
Animate with transform and opacity, not properties that change layout.
7. Check your theme and builder
Some themes load CSS late, causing reflow. For example, choose a theme that renders predictably with CSS in the head.
Re-test
Verify on mobile as well as desktop, since layouts differ.
Related: Core Web Vitals for WordPress, optimizing images and CSS breakpoints.
Fix CLS FAQ
What is a good CLS score?
0.1 or less at the 75th percentile of real visits.
Why is CLS worse on mobile?
Narrow layouts reflow more and ads or banners take proportionally more space.