Understanding Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures unexpected page movement while loading. High CLS harms user experience and SEO. By reserving space for content and optimizing resources, you can push your CLS score under 0.1—or even to zero.
1. Identify Shifting Elements
Run Google’s Layout Shift Debugger or check “Avoid large layout shifts” in PageSpeed Insights to pinpoint unstable elements.
2. Change font-display to Swap or Optional
Use font-display: swap or optional so fallback fonts appear immediately. Match fallback and custom font metrics to avoid text reflow.
3. Exclude Above-the-Fold Content from Delays
Disable lazy load, deferred JS, or asynchronous CSS for header images, menus, and critical styles. Exclude leading images or scripts in your cache plugin settings.
4. Host and Preload Fonts Locally
Serve fonts from your domain and preload them with <link rel="preload" as="font" crossorigin>. This eliminates layout shifts caused by late font loading.
5. Specify Dimensions for Media and Ads
Add explicit width and height attributes to images, iframes, videos, and ad containers. Reserving space prevents content from jumping.
6. Use CSS Transforms for Animations
Switch non-composited animations to transform: translate() or scale(). Avoid animating layout properties like width or top.
7. Delay Non-Critical JavaScript
Delay third-party and below-the-fold scripts to prevent late layout changes. Use plugins like FlyingPress, Perfmatters or WP Rocket to defer specific files.
8. Use Separate Mobile Cache When Needed
If your mobile layout differs significantly, create a dedicated mobile cache to avoid desktop-style shifts on handheld devices.
9. Switch to a Lightweight Cookie Notice
Some cookie plugins inject large banners late in the load. Use a minimal script or a 1 KB consent bar to prevent unexpected shifts.
10. Reserve Space for Dynamic Content
Wrap pop-ups, banners, forms and ads in containers with fixed dimensions or use position:fixed so they don’t push other elements on arrival.
11. Adjust Oxygen Builder’s Global Font
In Oxygen Builder, setting the global font to Mulish has resolved CLS bugs. Apply body { font-family: 'Mulish', sans-serif; } in your stylesheet.
(Kéo nội dung từ module OpenAI/Google Sheets đầu tiên vào đây)