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
To help improve your Core Web Vitals, we choose the best available optimization tasks on fixing and improving CLS on WordPress.
Understanding CLS metrics: What is a good result
Cumulative Layout Shifts measures the visual stability experience of your WordPress website. It happens when a visible element changes its position from the screen frame to another, provocating 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.
The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” labels, together with green, yellow and red colors. These are the labels you’re gonna receive at Search Console, alongside the issue.
To get a CLS “Good” label, pages should maintain a CLS of 0.1 seconds or less. According to Google, a good threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to check your CLS
As a tip of ours, always check for Core Web Vitals field data, or always strive for results that are from live users. Since Search Console Core Web Vitals data may take a while or be delayed for small website owners, we recommend testing simulating most of your userbase or setting up a tool to capture Core Web Vitals field data.
To get field data we recommend Web Analytics by Cloudflare, which we have a guide for: How To Get Core Web Vitals Field Data
For testing Core Web Vitals lab data and field data(when your website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test, and go to “CLS” under the results. There are two results, mobile, and desktop, the first we go to is mobile:
The mobile largest layout shift with 0.004 seconds CLS in the result above is a <h2> tag, a text element.
The desktop’s largest layout shift with 0.001 seconds CLS in the result above is two <h2> tags, text elements
To see issues related to the CLS, click on the tab below the screenshots “Show audits relevant to” and click CLS
6 ways to fix or optimize your CLS in WordPress
After getting field data on Search Console, you’re gonna get Core Web Vitals results. If you’re presented with CLS issues, here are solutions for solving them.
Move your CSS from theme editor to child theme style.css or main theme style.css file
If you are using large CSS styling on the theme built-in CSS editor or in the WordPress Customize “Additional CSS” section, you may move the CSS from those to the main theme CSS file (style.css) or the child theme.
Consider a critical css plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages. You can also use WP Rocket and its Optimize CSS delivery feature.
If you haven’t bought Wp Rocket yet, consider using my reflink.
Apply correct image sizing
Use size attributes on images. WpRocket offers a feature to add missing size attributes. Test wisely:
Don’t push content above existing content
The incorrect styling of your header, placing CSS code after the style was fully loaded, can also cause CLS.
Use min-height and min-width to reserve space for an element, especially ads(Adsense) blocks.
Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes
Consider plugins that have transform CSS animations. Examples of transform CSS styling:
Ask the theme/plugin developer to update and implement those css properties as part of the animations if possible.
Limit acess of a region with failing Core Web Vitals
Limit access to a region where you’re failing Core Web Vitals. Install and set up Cloudflare Web Analytics. With the data available you’re able to define if some country is contributing to lower the Core Web Vitals. Install Cloudflare DNS and block the region via firewall rules.