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.
- Find Shifting Elements On Your Website
- Specify Image Dimensions
- Specify Video And Iframe Dimensions
- Host Fonts Locally And Preload Them
- Fix FOIT (Flash of Invisible Text) Issues
- Fix Issues With WP Rocket’s Optimize CSS Delivery
- Serve Dynamic Content Properly
- Reserve Space For Advertisements
- Use CSS Transform Property In Animations
- Use A Lightweight GDPR Plugin
- Hard Code Your Menu And Header
What Is A Good CLS Score?
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.
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.
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.
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.
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.
2. Specify Image Dimensions
width="680" height="680" />
If images don’t have specified dimensions, you’ll see this error:
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.
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.
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.
6. Fix Issues With WP Rocket’s Optimize CSS Delivery
- 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.
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:
- 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).
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.
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.
11. Hard Code Your Menu And Header
If your menu and header cause cumulative layout shifts, consider hard coding them.
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.
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 :)