🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How To Improve Or Fix Cumulative Layout Shifts (CLS) Issue On WordPress and boost SEO

Last updated on October 18, 2021 | By

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.

CLS Cumulative Layout Shift

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:

image

The mobile largest layout shift with 0.004 seconds CLS in the result above is a <h2> tag, a text element.

image 1

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

image 13

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.

Critical CSS

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:

improve core web vitals

Don’t push content above existing content

It can happen on plugins that use a combination of Javascript code to make an element work. An example is slider plugins. Consider switching the slider to a simple background image or even a CSS-only approach for the slider if you’re using a custom theme. If you choose on keeping the slider, consider: lazyloading only the following images of the slider, preload the initial image, preload the Javascript from the slider.

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:

transform: rotate(0.5turn)

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.

Leave a Comment