How To Fix Cumulative Layout Shift (CLS) Issue in WordPress

Last updated on June 29, 2022 | 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, 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.

CLS Cumulative Layout Shift

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 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

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

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 a CSS-only approach for the slider or a slider with smaller JS code. If you choose on keeping the slider, consider using lazyloading and only into the hidden images of the slider, adding an expectation removing the first image of the slider from lazyloading.

The incorrect styling of your header, placing CSS code after the style was fully loaded, can also cause CLS.

Apply correct image and div sizing

Use size attributes on images. Wp Rocket offers a feature to add missing size attributes. Test wisely:

improve core web vitals

Use min-height and min-width CSS code to reserve space for an element, especially 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.

Properly configure your Critical CSS

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.

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.

Leave a Comment