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, take a look at the below list with the best available optimization for fixing and improving CLS on WordPress.
What is Cumulative Layout Shift (CLS) and how to check yours
Cumulative Layout Shifts measure the visual stability experience of your WordPress 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.
The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” scores, 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” score, 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 score
As a tip of ours, always check for Core Web Vitals field data, or always strive for results 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 user base 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
Best 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.
- Avoid elements that push content above existing content
- Use Critical CSS correctly
- Apply correct image and div sizing
- Move your CSS from theme editor to child theme style.css or main theme style.css file
- Prefer theme/plugins that use transform animations over animations of properties that trigger layout changes
Avoid elements that 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 Critical CSS correctly
If you’re using Critical CSS and having a high CLS, consider reading into your plugin documentation to find a filter to remove the class(es) or ids from the element causing it.
Critical CSS may skip some classes and then they get styled late by the main style.css creating a high CLS. Run Pagespeed and add missing classes style into the critical CSS stylesheet, if you’re using it.
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 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.
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.