How To Reduce Cumulative Layout Shift To “0” in WordPress

Want to improve cumulative layout shift on WordPress?

Cumulative layout shift (CLS) means elements are shifting while the page is loading. To see which elements are shifting on your WordPress site, try using Google’s Layout Shift Debugger.

Google recommends a CLS of 0.1 or less and anything over .25 is considered poor. While cumulative layout shift is only weighted at 5% of Lighthouse scores, it can also be easy to fix.

In WordPress, cumulative layout shift can be fixed by adding dimensions to images, iframes, and videos. You can also optimize fonts by hosting them locally, preloading them, and fixing flash of invisible text (FOIT) by using font-display:swap. Finally, reserve space for advertisements and check if there are CLS issues with your popups, GDPR plugin, or your menu, header, and footer.

What Is A Good CLS Score?

12
Under .1Good
.1-.25Average
.25+Slow

 

1. Find Shifting Elements On Your Website

PageSpeed Insights – the “avoid large layout shift” report in your Diagnostics section shows you which individual elements have the highest CLS contribution, as well as a picture of them.

Avoid large layout shifts wordpress

Cumulative Layout Shift Debugger – built by a Chrome engineer which uses the Layout Instability API in Chromium to detect & measure layout shifts. Can be used for desktop/mobile.

Cumulative Layout Shift Debugger

Layout Shift GIF Generator – easy way to see which elements on your website have layout shifts by creating a GIF. Enter your website URL, choose desktop or mobile, and click Generate.

Cumulative Layout Shift - WordPress Site

Layout Shift Regions In Chrome Dev Tools – view layout shifts highlighted in blue while browsing your website in real-time. Here are instructions for enabling layout shift regions:

  • Open Chrome Dev Tools.
  • Open the Command Menu.
  • Start typing “Rendering.”
  • Run the Show Rendering command.
  • Enable the Layout Shift Regions checkbox.
  • As you interact with a page, layout shifts are highlighted blue.

Layout Shifts in Chrome Dev Tools

Layout-Shift-Regions-Chrome-Dev-Tools

Another trick is to open Chrome Dev Tools and throttle your bandwidth so your website loads extremely slow. Use a slow 3G connection or set an even slower custom connection (e.g. 100 kbps). This gives you enough time to see which elements on your site are causing layout shifts.

Chrome Dev Tools CLS

 

2. Specify Image Dimensions

Specifying image dimensions means you need to add a width/height attribute to the image’s HTML. Or you can do it by enabling add missing image dimensions in WP Rocket’s Media tab.

width="680" height="680" />

If images don’t have specified dimensions, you’ll see this error:

Image elements do not have explicit width and height

 

3. Specify Video And Iframe Dimensions

Similar to images, videos and iframes should also have a width and height specified in the embed code. It’s also  important to make sure embedded videos and iframes are responsive.

 

4. Host Fonts Locally And Preload Them

Preloading fonts can improve cumulative layout shift in WordPress.

To do this, make sure fonts are hosted locally on your server instead of being served from third-party font websites like fonts.gstatic.com. Hosting fonts locally can be done by downloading your fonts directly from the Google Fonts website, converting them to WOFF2 format using a tool like Transfonter, and adding them to your CSS. The OMGF plugin can also host fonts locally.

Host fonts locally

Once fonts are hosted locally, preload them. PageSpeed Insights may recommend font files to preload under preload key requests. Otherwise, find your font files in GTmetrix Waterfall in the “fonts” section. Copy their URLs and preload them (this can be done manually, in WP Rocket, Perfmatters, and other speed plugins). If there’s an option to enable crossorigin for fonts, use it.

Preload Fonts

 

5. Fix FOIT (Flash of Invisible Text) Issues

Adding font-display:swap to your font’s CSS ensures text remains visible during webfont load.

Otherwise, fonts can shift while the page is loading which causes a higher cumulative layout shift score due to FOIT (flash of invisible text).

To fix this, edit your font’s CSS file and search for “font-display.” Instead of “swap” you might see auto, block, fallback, etc. Change this to swap and retest your WordPress site in PageSpeed Insights. If you’re using Google Fonts, you can also use the Swap Google Fonts Display plugin.

font-display swap

 

6. Fix Issues With WP Rocket’s Optimize CSS Delivery

If you’re using WP Rocket or another cache plugin to optimize CSS delivery, disabling it can sometimes result in better cumulative layout shift scores. Instead of disabling it, try to fix it first.

  • Enable optimize CSS delivery in WP Rocket.
  • Make sure it’s working by checking for “rocket-critical-css” in your source code.
  • If it’s not working, regenerate critical CSS in WP Rocket and page builders (if applicable).
  • Run your website through PurifyCSS.
  • Download the combined, purified, and minified CSS.
  • Paste the CSS code into the “fallback critical CSS” field.
  • Exclude files from CSS delivery using WP Rocket’s helper plugin.
  • If needed, disable optimize CSS delivery on individual pages/posts.
  • If those don’t work, you can also try Gijo Varghese’s FlyingPress plugin.

Cumulative Layout Shift WP Rocket Optimize CSS Delivery

 

7. Serve Dynamic Content Properly

Dynamic content is clearly listed as a common offender for cumulative layout shift.

If you must use dynamic content, reserve space for it using placeholders (specify a width and height). This ensures other elements on your page won’t shift when dynamic content is loaded.

Dynamic Content Examples:

  • Advertisements
  • Pops
  • Banners
  • Forms
  • GDPR notices

If you’re serving popups, Graham Ritchie on Stack Overflow says:

“You can fix this by adding position:fixed to the popup. This will take it out of the document flow and not cause a layout shift. (assuming it is more like a toast that covers the bottom of the screen rather than a dialog box style popup). You need to ensure that this style is applied inline within the HTML before the popup to stop it moving around once it receives styling.”

“Alternatively you can make the popup a bar at the top of the page (doesn’t have to be position: fixed as it can push the content down), at which point it will render correctly (assuming you inline your CSS).”

 

8. Reserve Space For Advertisements

Ads are a common culprit of cumulative layout shift, and it’s very noticeable if they load above the fold.

If you don’t reserve space for ads, they can shift other content on the page when the ads are eventually loaded. By placing the ad code inside a div that specifies the ad’s dimensions, space will be reserved for your ads so they don’t cause layout shifts for non-ad content on the page.

Google recommends reserving space for the largest size advertisements are configured to serve. They also recommend reserving space for the size most likely to be served (found in historical fill data from Google Ad Manager reports).

Google has quite a few examples of specifying ad dimensions in CSS and JavaScript.

 

9. Use CSS Transform Property In Animations

Many WordPress sites use animations, but they can cause layout shifts.

Google recommends using the CSS transform property which lets you use animations without causing layout shifts. For example, instead of changing the width and height attributes, use transform: scale(). And to move elements around, use transform: translate() instead of changing top, right, bottom, or left properties.

I recommend testing a page with and without animations to see the difference in your cumulative layout shift score. If you really think animations are worth it, keep them. But it’s been reported many times in Facebook Groups that animations can slow down WordPress.

Cumulative Layout Shift - WordPress Animations

It’s also been reported by Google.

 

10. Use A Lightweight GDPR Plugin

Believe it or not, your GDPR plugin can also contribute to cumulative layout shift.

This happens when certain elements stack on top of each other. I personally use Cookie Notice & Compliance for GDPR / CCPA for my GDPR plugin which doesn’t add cumulative layout shift.

Cookie-Notice-Compliance-for-GDPR-CCPA

 

11. Hard Code Your Menu And Header

If your menu and header cause cumulative layout shifts, consider hard coding them.

Regardless of whether they increase CLS, hard coding them is more lightweight than using page builders for these areas (as well as your footer). Elementor and Divi specifically add extra CSS and JavaScript to your site and hard coding these areas can make significant improvements not only to cumulative layout shift, but other PageSpeed Insights items related to CSS + JavaScript. I hired WP Johnny for his page builder removal services and this is exactly what he started with.

 

Retest Your Cumulative Layout Shift Score

Retest your site in PageSpeed Insights, GTmetrix, or ideally Lighthouse. Hopefully your cumulative layout shift is minimal or zero. Remember, you need a CLS of under .1 to be green.

Cumulative Layout Shift WordPress - GTmetrix Report

 

Frequently Asked Questions

How do I fix cumulative layout shift in WordPress?

Hosting fonts locally, preloading them, and fixing FOIT issues can reduce cumulative layout shift in WordPress. Avoid heavy animations and try disabling optimize CSS delivery in WP Rocket. Specify dimensions for images, videos, iframes, and dynamic content.

Which WordPress plugins fix cumulative layout shift?

Swap Google Fonts Display, OMGF, and WP Rocket are a few WordPress plugins that can help improve cumulative layout shift.

How do I fix cumulative layout shift in WP Rocket?

Make sure the optimize CSS delivery option is working properly in WP Rocket. You may need to regenerate critical CSS, set a fallback critical CSS, or exclude files from CSS delivery using WP Rocket's helper plugin.

Drop me a comment if you have any questions! If you need help, please leave a link to your GTmetrix report and not your website or it will be marked as spam. I would appreciate it :)

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments