Google Core Web Vitals is here. Google launched the Page Experience Signal update, which brings many changes to SERP ranking, as the boost it brings for websites with Good Core Web Vitals
CLS also makes up to 25% of the Pagespeed score, due to TTI being phased down on Lighthouse 10.0 version.
Learn how to reduce or fix WordPress CLS with the top 5 tips.
What is Cumulative Layout Shift (CLS)
Cumulative Layout Shifts measure the visual stability experience of the website. It happens when a visible element changes its position from one screen frame to another, causing a layout shift, a sudden change of the layout. It could be caused by not properly reserving space for a dynamic element and also other factors.
It’s ranked as “Good”, “Needs Improvement” or “Poor” scores, respectively represented by green, yellow, and red colors. These are the labels that appear on Search Console, alongside the issue based on field data.
To get a CLS “Good” score, pages should maintain a CLS of 0.1 seconds or less. The threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to check the CLS score lab data and field data
Due to its complexity, many live users may have different CLS, especially with different connections and device configurations. Always check for Core Web Vitals field data, or always strive for results from live users.
To get field data use Web Analytics by Cloudflare, which we have a guide for. Cloudflare Web Analytics shows the number of times the element shifted, its percentile of shifting time, and from where positions it moved to:
Get your CLS measured and optimized!
Send us a request
For checking CLS lab data use WebVitals.dev. Go to Web Vitals, do a page test, and check the results. There are two, mobile and desktop, here’s the mobile:
The mobile largest CLS has 0.0753 seconds and is caused by the div#post-7134 element. The desktop CLS result may be different than the mobile result.
Best ways to fix or optimize CLS in WordPress
Consider the following solutions for solving or improving CLS issues:
- Edit the element layout
- Use Critical CSS or Remove Unused CSS
- Avoid Sliders plugins
- Apply correct image and div sizing
- Move CSS from theme editor to child theme style.css
- Prefer themes and plugins that use transform animations
Edit the element layout
After identifying the element having the layout shift, edit its CSS to ensure it occupies the same space using proper width, margin, or padding.
You can use Chrome Performance Insights to get more detailed insights about CLS issues testing using lab data:
Use Critical CSS or Remove Unused CSS
Critical CSS inlines critical CSS for faster rendering. When using Critical CSS or Remove Unused CSS feature you have the option to exclude files or elements within the interface or use filters to remove CLS issues.
With HTML CLS issues you can only edit the element to fix it, either with CSS or HTML. It’s a hacky way to fix CLS issues.
WP Rocket offers a Critical CSS and a Remove Unused CSS feature alongside many other Core Web Vitals optimizations.
Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for the homepage, posts, and pages.
Some page builders may not be compatible with this approach as the way they output HTML won’t change even after editing CSS or HTML.
Fixing CLS caused by Critical CSS or Remove Unused CSS
Critical CSS or Remove Unused CSS add some classes and then they get styled late again by the main style.css causing a CLS. If you’re using Critical CSS or Remove Unused CSS and have a high CLS, consider reading into your plugin documentation to find a filter to remove the classes or ids causing it.
Wp Rocket offers filters in their CSS optimization features to avoid or fix CLS issues. Wp Rocket also adds by default in the safe exclusion list classes from Elementor and many popular themes to avoid CLS issues.
Avoid Sliders plugins
Apply correct image and div sizing
Use size attributes on images. Wp Rocket offers a feature to add missing size attributes. Test wisely:
Use min-height, min-width, or CSS aspect-ratio to reserve space for an element, especially for ads(Adsense) blocks.
Move CSS from theme editor to child theme style.css
If you use large CSS styling on the theme built-in CSS editor or in the WordPress customizer Additional CSS, you may move the CSS from those to the main theme CSS file (style.css) or the child theme. This will avoid re-styling and triggering layouts shifts.
Prefer themes and plugins that use transform animations
Consider plugins that have transform CSS animations over animations with properties that trigger layout changes. Examples of transform CSS styling:
Ask the theme/plugin developer to update and implement those CSS properties as part of the animations if possible.
Get your CLS Optimized!