WordPress powers more than 40% of the web, and CLS issues are among the most common performance problems on WordPress sites. This guide covers every WordPress-specific cause of layout shift and the exact steps to resolve each one.
WordPress's flexibility is both its greatest strength and a significant contributor to CLS problems. The combination of third-party themes, page builder plugins, widget areas populated by multiple plugins, and dynamically injected scripts from multiple vendors creates an environment where layout shifts are common — and where the root cause is often difficult to isolate because so many moving parts are involved.
The most frequent CLS sources on WordPress sites are images without declared dimensions, web fonts loaded through Google Fonts or font plugins, advertisement scripts injected by ad management plugins, cookie consent banners added through GDPR plugins, and dynamic content blocks rendered by page builders. Each of these requires a different remediation approach.
Image-related CLS is the single most common cause of layout shift on WordPress sites and also the easiest to fix. WordPress has automatically output width and height attributes on images since version 5.5, which was released in August 2020. If your site is running WordPress 5.5 or later and images are still causing CLS, one of the following situations is likely responsible.
Some themes and image optimization plugins remove width and height attributes from <img> tags during output, either by design or as a side effect of their image handling code. Inspect the source HTML of a page with shifting images and look for <img> tags. If they do not have both width and height attributes, your theme or a plugin is removing them.
To check whether WordPress is outputting dimensions correctly without theme interference, temporarily switch to a default WordPress theme (Twenty Twenty-Four) and retest. If the dimensions appear with the default theme but not your active theme, the issue is in your theme's template files — specifically wherever the theme calls the_post_thumbnail() or renders image HTML.
Images inserted using the Classic Editor's HTML mode, or in custom HTML blocks in the Block Editor, may not have dimension attributes if they were inserted manually. These images need to have width and height added directly to the HTML:
Featured images output through the_post_thumbnail() in theme templates should include dimensions automatically in WordPress 5.5+. If they do not, the theme is calling the function in a way that strips dimensions. Adding explicit size parameters helps WordPress output the correct attributes:
Page builders — Elementor, Divi, Beaver Builder, WPBakery, and others — are a significant source of CLS on WordPress sites, primarily because they inject stylesheets and scripts dynamically and render certain content blocks in ways that cause dimension-unknown elements to appear after the initial render.
Elementor's most common CLS contributions come from image widgets without explicit dimensions, sliders rendered by Elementor's built-in carousel widget, and the Elementor Google Fonts loading method. To address image CLS in Elementor, ensure every Image widget has an explicit width set in the widget's Style settings. For the slider, set a fixed height on the carousel container via Elementor's Advanced CSS option to prevent the height from changing as slides load.
Elementor loads Google Fonts by injecting a stylesheet after the initial page render by default. In Elementor settings under Advanced → Google Fonts, you can switch the loading method to use the system font stack as a fallback and preload the font file, reducing the font-swap shift.
Divi (from Elegant Themes) frequently causes CLS through its module system, particularly slider modules, image modules without fixed heights, and the way Divi loads its CSS. The Divi Slider module does not reserve height before slides load, causing significant CLS on pages where a slider is above the fold. The most effective fix is to set an explicit minimum height on the slider section using Divi's row settings, matching the height of the tallest slide.
Divi also dynamically loads icon fonts (for its button icons and module icons), which can cause small but measurable text-adjacent shifts. Preloading the Divi icon font file in your child theme's functions.php reduces this impact:
WPBakery's row and column structure can cause CLS when columns contain images without declared heights, or when shortcode-rendered elements are replaced by JavaScript-rendered versions after page load. The primary fix is ensuring all images within WPBakery grids have explicit dimensions in their source HTML, and that any animated or transition-based elements use CSS transform rather than position or dimension changes.
GDPR consent plugins — CookieYes, Complianz, Cookie Notice, GDPR Cookie Consent, and others — are a common source of CLS on WordPress sites because they inject a consent banner into the page after the initial render. If the banner appears above the main content, it pushes the entire page down, causing a large layout shift.
Most reputable consent plugins offer a setting to display the banner as a fixed-position overlay rather than an in-flow element. Check your plugin's settings for options labeled "bar position," "fixed bottom," or "overlay mode." Using a fixed-position banner completely eliminates the shift because the banner does not occupy space in the document flow.
Plugins like Advanced Ads, Ad Inserter, and Google Site Kit that inject ad code into content areas frequently cause CLS when the ad slot does not have a reserved minimum height. Configure each ad placement with a fixed minimum height matching the smallest creative the slot will serve. In Advanced Ads, this is set in the ad placement settings. In Ad Inserter, use the CSS options to add min-height to the insertion container.
Slider plugins — Slider Revolution, Smart Slider 3, Meta Slider, and similar — are among the most CLS-damaging elements on WordPress sites because they typically do not reserve layout space before the slider JavaScript initializes. The slider container starts at zero or minimal height, then jumps to its full height when the plugin fires, shifting all content below it.
The most effective fix is to add a CSS rule that sets a minimum height on the slider container before the plugin initializes:
Popup builders, announcement bars, and notification plugins that inject content at the top of the page (above the header or below the navigation) push content down when they appear. Use the plugin's settings to position these elements as fixed overlays, or configure them to appear only after a scroll trigger rather than on page load, so they appear below the fold where they cannot shift viewport-visible content.
WP Rocket is one of the most popular WordPress caching and performance plugins, and it includes several features that have a direct impact on CLS — both positively and negatively.
WP Rocket's Preload Fonts feature (under Media settings) allows you to specify font files to preload in the document <head>, which reduces the time between initial render and font availability, shrinking the window during which a font swap can cause a visible shift. WP Rocket also includes options to defer JavaScript loading, which can prevent certain third-party scripts from injecting layout-shifting content before the page has finished rendering its main content.
WP Rocket's LazyLoad feature for images can, in some configurations, cause CLS if it removes the width and height attributes from images before applying its lazy loading implementation. Verify that after enabling WP Rocket's LazyLoad, your images still have dimension attributes in the rendered HTML. WP Rocket's LazyLoad is generally safe in this regard for recent versions, but it is worth confirming after any plugin update.
WP Rocket's Delay JavaScript Execution feature delays all JavaScript until user interaction. While this improves lab performance scores, it can cause CLS in practice when JavaScript-dependent content (widgets, embeds, dynamic modules) loads only after a user moves the mouse or touches the screen — potentially after they have already started reading and the shift has maximum visible impact.
Web fonts are a common CLS source in WordPress because most themes load Google Fonts or custom fonts in ways that cause a flash of unstyled text (FOUT) followed by a reflow when the web font replaces the fallback font.
The most effective WordPress-specific approaches are:
@font-face declarations in your child theme's stylesheet, or configure your Google Fonts URL to include &display=swap.functions.php.After implementing changes, use the CLS checker on this site to confirm your score has improved. Run the test on at least three to five representative pages — the homepage, a typical blog post, a category archive, and any high-traffic landing page — because CLS can vary significantly between page templates depending on which plugins and widgets are active on each template.
Also run a test in Chrome DevTools' Performance panel while logged out of WordPress, because certain admin bars and logged-in elements can affect the CLS measurement. The logged-out experience is what your actual visitors see and what Google measures.
Get an instant CLS measurement for any WordPress page — see which elements are shifting and why, so you know exactly what to fix.
Check My WordPress CLS