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

Updated on January 30, 2023 | 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 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)

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.

CLS Cumulative Layout Shift

How to check the CLS score

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.

Since Search Console Core Web Vitals data may take a while or don’t have enough data for small website owners, do a test simulating most of your user base or setting up a tool to capture Core Web Vitals field data.

To get field data use Web Analytics by Cloudflare, which we have a guide for.

For testing, CLS lab data use Web Vitals. Go to Web Vitals, do a page test, and go to the results. There are two results, mobile, and desktop, the first we go to is 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:

  1. Use Critical CSS correctly
  2. Avoid elements that push content above existing content
  3. Apply correct image and div sizing
  4. Move CSS from theme editor to child theme style.css
  5. Prefer themes and plugins that use transform animations

Use Critical CSS correctly

Critical CSS add some classes and then they get styled late by the main style.css causing a CLS. If you’re using Critical CSS and having 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 elements that push content above existing content

Plugins that use a combination of Javascript code to make an element work may cause a large CLS. An example is slider plugins. Consider a simple background image, a CSS-only slider, or a slider with less Javascript code.

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, 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 are using 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 of properties that trigger layout changes. 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.

Get your CLS Optimized!

Leave a Comment