{"id":7133,"date":"2025-07-24T10:49:42","date_gmt":"2025-07-24T07:49:42","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?p=7133"},"modified":"2025-07-29T10:49:46","modified_gmt":"2025-07-29T07:49:46","slug":"improve-cumulative-layout-shift-wordpress","status":"publish","type":"post","link":"https:\/\/creativethemes.com\/blocksy\/blog\/improve-cumulative-layout-shift-wordpress\/","title":{"rendered":"How to Improve Cumulative Layout Shift in WordPress: 8 Best Practices"},"content":{"rendered":"\n<p>Cumulative Layout Shift (CLS) is a user experience metric that assesses the visual stability of a web page by quantifying all the unexpected layout shifts happening over its lifespan. It\u2019s one of Google\u2019s Core Web Vitals, which means that your Cumulative Layout Shift scores impact your search engine rankings.<\/p>\n\n\n\n<p>Moderate to high CLS scores often frustrate users, causing them to leave your site prematurely. In fact, layout instability has even been exploited for deceptive purposes in the past. That\u2019s why Google treats this metric seriously &#8211; and optimizing it can improve your search rankings.<\/p>\n\n\n\n<p>Optimizing Cumulative Layout Shift in WordPress is a fairly straightforward task if you just have a basic blog or content site that doesn\u2019t include (m)any:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2018moving\u2019 elements, such as sliders and animations<\/li>\n\n\n\n<li>third-party JavaScript embeds that are loaded asynchronously, such as <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/place-ads-wordpress-site\/\">ads<\/a><\/li>\n\n\n\n<li>elements that may take longer to render, such as custom fonts<\/li>\n<\/ul>\n\n\n\n<p>However, optimizing Cumulative Layout Shift becomes harder as the complexity of your website grows.<\/p>\n\n\n\n<p>The good news is that the WordPress core comes with some default features that can help you improve Cumulative Layout Shift.<\/p>\n\n\n\n<p>Beyond that, your CLS results in WordPress mainly depend on your theme and content plugins that add extra elements to your site, such as fonts, ads, animations, etc.<\/p>\n\n\n\n<p>In this article, we&#8217;ll look into what is Cumulative Layout Shift and how to improve Cumulative Layout Shift in WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"key-takeaways\">Key Takeaways:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CLS affects SEO<\/strong>: Cumulative Layout Shift is a key Google ranking factor and should be minimized for better UX and visibility.<\/li>\n\n\n\n<li><strong>Define dimensions<\/strong>: Always set width and height for images, videos, and embeds to avoid layout shifts.<\/li>\n\n\n\n<li><strong>Limit custom fonts<\/strong>: Use no more than two, host them locally, and apply\u00a0<code>font-display: swap<\/code>\u00a0to reduce shifting during font load.<\/li>\n\n\n\n<li><strong>Use performance-friendly animations<\/strong>: Stick to composited animations via plugins like Greenshift to avoid layout recalculations.<\/li>\n\n\n\n<li><strong>Test regularly<\/strong>: Monitor CLS using tools like PageSpeed Insights, Lighthouse, and Chrome DevTools to catch and fix layout shift triggers.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#key-takeaways\">Key Takeaways:<\/a><\/li><li><a href=\"#cumulative-layout-shift-vs-other-core-web-vitals\">Cumulative Layout Shift vs Other Core Web Vitals<\/a><\/li><li><a href=\"#expected-vs-unexpected-layout-shifts\">Expected vs Unexpected Layout Shifts<\/a><\/li><li><a href=\"#cls-optimization-features-of-the-word-press-core\">CLS Optimization Features of the WordPress Core<\/a><ul><li><a href=\"#ensure-all-images-have-defined-dimensions\">Ensure All Images Have Defined Dimensions<\/a><\/li><li><a href=\"#o-embed-blocks-are-available-for-many-third-party-platforms\">oEmbed Blocks Are Available for Many Third-Party Platforms<\/a><\/li><\/ul><\/li><li><a href=\"#define-the-dimensions-of-self-hosted-videos\">Define the Dimensions of Self-Hosted Videos<\/a><\/li><li><a href=\"#replace-gi-fs-with-videos-for-better-stability\">Replace GIFs with Videos for Better Stability<\/a><\/li><li><a href=\"#use-composited-animations-only\">Use Composited Animations Only<\/a><\/li><li><a href=\"#dont-use-more-than-two-custom-fonts\">Don\u2019t Use More Than Two Custom Fonts<\/a><\/li><li><a href=\"#load-custom-fonts-locally\">Load Custom Fonts Locally<\/a><\/li><li><a href=\"#detect-the-elements-that-may-cause-unexpected-layout-shifts-on-your-site\">Detect the Elements That May Cause Unexpected Layout Shifts on Your Site<\/a><ul><li><a href=\"#tools-and-cls-monitoring-recommendations\">Cumulative Layout Shift How to Improve: Tools and CLS Monitoring Recommendations<\/a><\/li><\/ul><\/li><li><a href=\"#faq-cumulative-layout-shift-cls-in-word-press\">FAQ: How to Fix Cumulative Layout Shift WordPress<\/a><ul><li><a href=\"#what-is-cumulative-layout-shift-cls\">What Is Cumulative Layout Shift (CLS)?<\/a><\/li><li><a href=\"#why-does-cls-matter-for-seo\">Why Does CLS Matter for SEO?<\/a><\/li><li><a href=\"#how-can-i-fix-cls-issues-caused-by-images\">How Can I Fix CLS Issues Caused by Images?<\/a><\/li><li><a href=\"#do-custom-fonts-increase-cls\">Do Custom Fonts Increase CLS?<\/a><\/li><li><a href=\"#what-tools-can-i-use-to-measure-cls-in-word-press\">What Tools Can I Use to Measure CLS in WordPress?<\/a><\/li><\/ul><\/li><li><a href=\"#summary-optimizing-cumulative-layout-shift-in-word-press\">Summary: Optimizing Cumulative Layout Shift in WordPress<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cumulative-layout-shift-vs-other-core-web-vitals\">Cumulative Layout Shift vs Other Core Web Vitals<\/h2>\n\n\n\n<p>As opposed to the other two Core Web Vitals, <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/largest-contentful-paint-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint (LCP)<\/a> and <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/interaction-to-next-paint-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interaction to Next Paint (INP)<\/a>, which are time values measured in seconds\/milliseconds, CLS is a unitless metric.<\/p>\n\n\n\n<p>Your CLS score qualifies as \u2018good\u2019 if its value is less than or equal to 0.1 (passing threshold) and qualifies as \u2018poor\u2019 if it\u2019s greater than or equal to 0.25 (failing threshold). When optimizing Cumulative Layout Shift, the goal is to make it as close to 0 as possible \u2014&nbsp; the best-case scenario is when there are zero unexpected layout shifts on your site:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-rounded\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"218\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/01-cumulative-layout-shift-definition.png\" alt=\"Cumulative Layout Shift, passing and failing thresholds\" class=\"wp-image-10285\" style=\"width:750px;height:auto\"\/><figcaption class=\"wp-element-caption\"><strong>Image:<\/strong> CLS thresholds; traffic light chart from the <a href=\"https:\/\/web.dev\/articles\/cls\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">web.dev documentation<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"expected-vs-unexpected-layout-shifts\">Expected vs Unexpected Layout Shifts<\/h2>\n\n\n\n<p>As I mentioned above, Cumulative Layout Shift <strong>only includes<\/strong> unexpected layout shifts that make content elements suddenly move around in a way that the user didn\u2019t expect. For the majority of users, unexpected layout shifts feel like a bad surprise.<\/p>\n\n\n\n<p>However, not all layout shifts are bad; some are expected and necessary. <\/p>\n\n\n\n<p>Here are some examples of both expected and unexpected layout shifts:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\"><strong>Expected layout shifts<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Unexpected layout shifts<\/strong><\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Layout changes during the initial page load<\/td><td class=\"has-text-align-center\" data-align=\"center\">Ads or banners added to the top of the page after the main content was loaded<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Layout changes in response to user actions (<a href=\"https:\/\/web.dev\/articles\/optimize-cls#lab-field\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">as per the web.dev docs<\/a>, <em>\u201cas long as they happen within 500 milliseconds of that interaction\u201d<\/em>)<\/td><td class=\"has-text-align-center\" data-align=\"center\">Custom fonts that load in different sizes than the fallback font<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Composited animations (see below)<\/td><td class=\"has-text-align-center\" data-align=\"center\">Images and videos with unspecified dimensions that shift around the surrounding elements while loading<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Image gallery thumbnails rearranging<\/td><td class=\"has-text-align-center\" data-align=\"center\">Some shift happens after a button or action is triggered<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Dropdowns expanding<\/td><td class=\"has-text-align-center\" data-align=\"center\"><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">User-triggered menu actions<\/td><td class=\"has-text-align-center\" data-align=\"center\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>To improve your CLS scores, you need to focus on eliminating all the reasons that may cause unexpected layout shifts on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cls-optimization-features-of-the-word-press-core\">CLS Optimization Features of the WordPress Core<\/h2>\n\n\n\n<p>First, let\u2019s see the built-in features of the WordPress core that can help you optimize Cumulative Layout Shift.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ensure-all-images-have-defined-dimensions\">Ensure All Images Have Defined Dimensions<\/h3>\n\n\n\n<p>Sizing hints are the <code>width<\/code> and <code>height<\/code> attributes of the <code>&lt;img&gt;<\/code> HTML element that specify the dimensions of an image.<\/p>\n\n\n\n<p>Adding an image without sizing hints increases unexpected layout shifts on a page because the browser won\u2019t know in advance how much space the image will take up on the screen, so it may have to recalculate the layout once the image downloads.<\/p>\n\n\n\n<p>WordPress automatically adds the <code>width<\/code> and <code>height<\/code> attributes to every image uploaded via the WordPress Media Library. This includes the images that you upload via the Image block or the featured image field in the block editor:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/gutenberg-editor-image-block-dimensions.png\" alt=\"Image block with the Width and Height settings in the Gutenberg editor\" class=\"wp-image-10290\"\/><\/figure>\n\n\n\n<p>However, note that the dimensions may still be missing if you added the images with a page builder or migrated your site from another website creator platform.<\/p>\n\n\n\n<p>In that case, you\u2019ll need to add them to your images either manually or using an image or speed optimization plugin that lets you automatically add the <code>width<\/code> and <code>height<\/code> attributes to multiple images at once, such as <a href=\"https:\/\/docs.wp-rocket.me\/article\/1366-add-missing-image-dimensions\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP Rocket<\/a> or <a href=\"https:\/\/perfmatters.io\/docs\/missing-width-height-images\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Perfmatters<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"o-embed-blocks-are-available-for-many-third-party-platforms\">oEmbed Blocks Are Available for Many Third-Party Platforms<\/h3>\n\n\n\n<p>In addition to images, you also need to define the explicit width and height values of your content embeds, such as videos and iframes, to get a good CLS score (meaning that the <code>width<\/code> and <code>height<\/code> attributes need to appear in the HTML).<\/p>\n\n\n\n<p>The WordPress block editor has native <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks-list\/#embeds\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">oEmbed blocks<\/a> for many third-party media platforms, most of which add the dimensions automatically. For example, the YouTube and Dailymotion blocks embed videos as iframes with explicit <code>width<\/code> and <code>height<\/code> attributes in the HTML (while the default Video block doesn&#8217;t add the dimensions):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1255\" height=\"719\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/video-block-explicit-width-height.png\" alt=\"Video block with the width and height attributes highlighted\" class=\"wp-image-10370\"\/><figcaption class=\"wp-element-caption\"><strong>Image:<\/strong> The YouTube block, inspected in Firefox Developer Tools<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"define-the-dimensions-of-self-hosted-videos\">Define the Dimensions of Self-Hosted Videos<\/h2>\n\n\n\n<p>As the default Video block doesn&#8217;t include or lets you define the <code>width<\/code> and <code>height<\/code> attributes of self-hosted videos that you add from the WordPress Media Library, you&#8217;ll need to include the dimensions in a different way.<\/p>\n\n\n\n<p>You can do so by using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the Custom HTML block where you can insert the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><code>&lt;video&gt;<\/code><\/a> tag together with the <code>width<\/code>, <code>height<\/code>, and other attributes<\/li>\n\n\n\n<li>the Embed block which doesn&#8217;t require you to write any code and automatically adds the dimensions<\/li>\n\n\n\n<li>the Shortcode block, in case you use a shortcode plugin that allows you to add videos<\/li>\n\n\n\n<li>a third-party block plugin, such as <a href=\"https:\/\/wordpress.org\/plugins\/advanced-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PublishPress Blocks<\/a>, that includes an advanced video block<\/li>\n\n\n\n<li>Blocksy Pro\u2019s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/featured-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">Featured Videos<\/a> option, which automatically adds the <code>width<\/code> and <code>height<\/code> attributes to your featured HTML videos<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/featured-video-modal.png\" alt=\"Video Options for self-hosted videos in the Featured Videos modal of Blocksy Pro \" class=\"wp-image-10390\"\/><figcaption class=\"wp-element-caption\"><strong>Image:<\/strong> Blocksy Pro&#8217;s Featured Videos modal in the WordPress block editor<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"replace-gi-fs-with-videos-for-better-stability\">Replace GIFs with Videos for Better Stability<\/h2>\n\n\n\n<p>While animated GIFs have been in vogue for a while now, they can cause unexpected layout shifts (and even worse, they also <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/website-accessibility-primer\/#digital-accessibility-needs-on-the-web-comparison-table\" target=\"_blank\" rel=\"noreferrer noopener\">harm website accessibility<\/a>).<\/p>\n\n\n\n<p>If you want to show animated content on your website, it\u2019s recommended that you use video rather than GiFs, as it loads faster and smoother (especially if its explicit <code>width<\/code> and <code>height<\/code> attributes are defined in the HTML, as discussed above) and users can start and stop it whenever they want.<\/p>\n\n\n\n<p>If you already have animated GIFs on your WordPress site, you can convert them to video using an image optimization plugin that provides this functionality, such as <a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Optimole<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1695\" height=\"878\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/gif-to-video-conversion-optimole.png\" alt=\"GIF to video conversion with the Optimole plugin\" class=\"wp-image-10343\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use-composited-animations-only\">Use Composited Animations Only<\/h2>\n\n\n\n<p>Non-composited animations start appearing on the page early in the rendering process, so later they may force the browser to recalculate the layout, which can harm your CLS results.<\/p>\n\n\n\n<p>To optimize Cumulative Layout Shift in WordPress, Make sure your theme and plugins use only smooth, composited animations that the browser executes on the <a href=\"https:\/\/web.dev\/articles\/stick-to-compositor-only-properties-and-manage-layer-count\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">compositor thread<\/a> (instead of the main thread, as in the case of non-composited animations).<\/p>\n\n\n\n<p>On a WordPress site, you can use a performance-optimized animation plugin that efficiently eliminates non-composited animations. For example, the <a href=\"https:\/\/wordpress.org\/plugins\/greenshift-animation-and-page-builder-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Greenshift plugin<\/a>, used by some of Blocksy\u2019s starter sites, is built on top of the popular and widely-tested GSAP (GreenSock Animation Platform) library.<\/p>\n\n\n\n<p>In the screenshot below, you can see the homepage of our Smart Home starter site with Greenshift\u2019s animated counter block that lets you configure the start and end time and the duration of the counter animation:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/greenshift-animated-counter-block.png\" alt=\"Counter block of the Greenshift plugin\" class=\"wp-image-10344\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dont-use-more-than-two-custom-fonts\">Don\u2019t Use More Than Two Custom Fonts<\/h2>\n\n\n\n<p>Custom fonts can result in unexpected layout shifts because the browser needs to download them, and during that time, it temporarily shows either invisible text or the default system font. When the custom fonts load, the text blocks usually grow or shrink a bit, so the layout suddenly shifts around.<\/p>\n\n\n\n<p>To reduce Cumulative Layout Shift, it\u2019s recommended that you don\u2019t use more than two custom font families on your site.<\/p>\n\n\n\n<p>The best WordPress themes, such as Blocksy, also give you the option to load the default system font from the user\u2019s computer rather than using a custom font so that you can completely eliminate unexpected layout shifts caused by font swapping.<\/p>\n\n\n\n<p>Using the default system font also means that different users will see different&nbsp;fonts on your website \u2014 however, as system fonts depend on the operating system (e.g. it\u2019s Segoe UI on Windows machines), there will still be just a few font variations. <\/p>\n\n\n\n<p><strong>The font-display: swap;<\/strong> CSS rule ensures that the fallback system font is shown while the custom font is loading. Once the custom font is downloaded, it replaces the fallback font without causing a layout shift.<\/p>\n\n\n\n<p><strong>Preloading fonts<\/strong> tells the browser to fetch the font files as early as possible. Add a tag in your HTML to preload important font files<\/p>\n\n\n\n<p>Loading the default system font can be a good solution to improve Cumulative Layout Shift on a site where it\u2019s not a huge problem if the typography differs a bit across various user groups, such as a dental practice:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/typography-system-default-setting.png\" alt=\"Typography options of Blocksy in the WordPress Customizer \" class=\"wp-image-10345\"\/><figcaption class=\"wp-element-caption\"><strong>Image:<\/strong> Blocksy&#8217;s typography options in the Customizer<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"load-custom-fonts-locally\">Load Custom Fonts Locally<\/h2>\n\n\n\n<p>If you still want to use custom fonts on your WordPress site, you can reduce your Cumulative Layout Shift scores by hosting them locally, rather than downloading them from the web.<\/p>\n\n\n\n<p>Locally hosted fonts download faster as they are hosted on the same domain as the rest of your content, so the browser doesn\u2019t have to connect to one or more third-party servers. If your locally hosted fonts load fast enough, the browser won\u2019t show the fallback font at all, so the layout won&#8217;t shift around.<\/p>\n\n\n\n<p>Blocksy\u2019s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Local Google Fonts<\/a> premium extension lets you download any Google Font to your server and then host it from there. It also gives you the option to <a href=\"https:\/\/www.debugbear.com\/blog\/resource-hints-rel-preload-prefetch-preconnect\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">preload<\/a> some or all of your locally hosted fonts, which will make them load even faster:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/local-google-fonts-extension.png\" alt=\"Local Google Fonts extension of Blocksy Pro\" class=\"wp-image-10346\"\/><\/figure>\n\n\n\n<p>If you have any custom font (including variable fonts) that is not part of Google Fonts, you can also use Blocksy Pro\u2019s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Fonts<\/a> extension to upload it to your server and host it locally:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/custom-fonts-extension.png\" alt=\"Custom Fonts extension of Blocksy Pro\" class=\"wp-image-10347\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"detect-the-elements-that-may-cause-unexpected-layout-shifts-on-your-site\">Detect the Elements That May Cause Unexpected Layout Shifts on Your Site<\/h2>\n\n\n\n<p>While the above recommendations can help you optimize Cumulative Layout Shift in WordPress, you still need to test your pages to locate the elements that may result in unexpected layout shifts.&nbsp;<\/p>\n\n\n\n<p>You can use Google\u2019s free web performance auditing tools, i.e. <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse<\/a> (integrated into Chrome DevTools) and <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed Insights<\/a> (also uses Lighthouse, but you can run it online), that provide you with a list of the elements that increase your CLS score, together with recommendations on how you can improve them.<\/p>\n\n\n\n<p>On a WordPress site, the most frequent culprits will be slider, ad, and animation plugins. If your performance tests show that one or more of these plugins make Cumulative Layout Shift worse, consider replacing them with an alternative (e.g. your slider plugin should define the dimensions of the slider and preload the images) or, if possible, removing them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tools-and-cls-monitoring-recommendations\">Cumulative Layout Shift How to Improve: Tools and CLS Monitoring Recommendations<\/h3>\n\n\n\n<p>Here is the list of the most popular 5 tools to detect and track your CWV and CLS as well.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Google Lighthouse<\/strong> is built-in Google Chrome browser and we recommend it for fast check. To use it:\n<ul class=\"wp-block-list\">\n<li>Open Chrome and navigate to your webpage.<\/li>\n\n\n\n<li>Right-click anywhere on the page and select&nbsp;<strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Go to the&nbsp;<strong>Lighthouse<\/strong>&nbsp;tab and click&nbsp;<strong>Generate Report<\/strong>.<\/li>\n\n\n\n<li>You&#8217;ll see an in-depth analysis of your site&#8217;s performance, including suggestions on how to improve CLS.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>PageSpeed Insights<\/strong> is the most used tool by our team to track CLS all over our site.\n<ul class=\"wp-block-list\">\n<li>Visit&nbsp;PageSpeed&nbsp;Insights, enter your website URL, and get a breakdown of your Core Web Vitals, including CLS.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>WebPageTest<\/strong> offers a decent visualization options for you to track resources and layout shifts they occur.\n<ul class=\"wp-block-list\">\n<li>Go to&nbsp;WebPageTest, run a test, and examine the&nbsp;<strong>Content Layout Shift<\/strong>&nbsp;results under the &#8220;Web Vitals&#8221; tab.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Chrome DevTools Performance Tab<\/strong>. If you want to dive deep into a specific layout shift event, you can use the&nbsp;<strong>Performance<\/strong>&nbsp;tab in Chrome DevTools. It shows a detailed timeline of how the page renders and highlights any layout shifts.\n<ul class=\"wp-block-list\">\n<li>Open Chrome, right-click, and select&nbsp;<strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Go to the&nbsp;<strong>Performance<\/strong>&nbsp;tab, start a recording, and reload the page to capture any layout shifts.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>GTmetrix<\/strong> is another tool that evaluates page performance based on Core Web Vitals, including CLS. It provides a detailed waterfall chart and recommendations for improving performance.\n<ul class=\"wp-block-list\">\n<li>Go to&nbsp;GTmetrix, enter your URL, and get a comprehensive report on page performance and layout shifts.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-cumulative-layout-shift-cls-in-word-press\">FAQ: How to Fix Cumulative Layout Shift WordPress<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-cumulative-layout-shift-cls\"><strong>What Is Cumulative Layout Shift (CLS)?<\/strong><\/h3>\n\n\n\n<p>CLS is a Core Web Vital that measures how much visible content unexpectedly shifts on a page. A good CLS score is \u2264 0.1; higher values harm UX and SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"why-does-cls-matter-for-seo\"><strong>Why Does CLS Matter for SEO?<\/strong><\/h3>\n\n\n\n<p>Google includes CLS in its Core Web Vitals, which affect page rankings. Poor CLS can lead to a frustrating user experience and lower visibility in search results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-can-i-fix-cls-issues-caused-by-images\"><strong>How Can I Fix CLS Issues Caused by Images?<\/strong><\/h3>\n\n\n\n<p>Always set explicit\u00a0<code>width<\/code>\u00a0and\u00a0<code>height<\/code>\u00a0attributes for all images. WordPress handles this automatically via the Media Library, but page builders or migrated content may need manual fixes or optimization plugins like WP Rocket or Perfmatters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"do-custom-fonts-increase-cls\"><strong>Do Custom Fonts Increase CLS?<\/strong><\/h3>\n\n\n\n<p>Yes. Custom fonts can shift layout during load. To reduce CLS, use no more than two custom fonts, host them locally, and apply the\u00a0<code>font-display: swap<\/code>\u00a0property.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-tools-can-i-use-to-measure-cls-in-word-press\"><strong>What Tools Can I Use to Measure CLS in WordPress?<\/strong><\/h3>\n\n\n\n<p>Use tools like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Google PageSpeed Insights<\/strong><\/li>\n\n\n\n<li><strong>Lighthouse in Chrome DevTools<\/strong><\/li>\n\n\n\n<li><strong>WebPageTest<\/strong><\/li>\n\n\n\n<li><strong>GTmetrix<\/strong><\/li>\n\n\n\n<li><strong>Chrome Performance Tab<\/strong><\/li>\n<\/ul>\n\n\n\n<p>These tools help identify layout shift triggers and offer actionable recommendations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summary-optimizing-cumulative-layout-shift-in-word-press\">Summary: Optimizing Cumulative Layout Shift in WordPress<\/h2>\n\n\n\n<p>To optimize Cumulative Layout Shift, you\u2019ll need to reduce (ideally, completely eliminate) unexpected layout shifts on your web pages.<\/p>\n\n\n\n<p>The WordPress block editor comes with some default features that will help you reduce Cumulative Layout Shift even if you don\u2019t implement any other optimization techniques.<\/p>\n\n\n\n<p>Beyond that, you\u2019ll need to focus on your video and embedded content, animations, fonts, and sliders.<\/p>\n\n\n\n<p>The best thing you can do to optimize Cumulative Layout Shift on your WordPress site is to choose a smartly coded, performance-optimized theme, such as Blocksy.&nbsp;<\/p>\n\n\n\n<p>Then, it\u2019s also recommended that you audit your plugins that load extra content to your site and replace or remove them if you find that they increase your CLS results.<\/p>\n\n\n\n<p>Here\u2019s a quick checklist of actionable steps to improve CLS score right away:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ensure <strong>width and height attributes are specified<\/strong> for all images and videos.<\/li>\n\n\n\n<li>Use the WordPress Media Library or an optimization plugin (e.g., <strong>WP Rocket, Perfmatters<\/strong>) to automatically add these attributes.<\/li>\n\n\n\n<li>For embeds, use WordPress\u2019s native <strong>oEmbed blocks to include defined dimensions<\/strong>.<\/li>\n\n\n\n<li>Use <strong>plugins like Blocksy\u2019s Local Google Fonts or WP Rocket<\/strong> to host custom fonts locally.<\/li>\n\n\n\n<li><strong>Implement&nbsp;<code>font-display: swap;<\/code>&nbsp;<\/strong>to ensure text is visible while fonts load, reducing shifts.<\/li>\n\n\n\n<li><strong>Preload fonts using tools like Font Face Observer<\/strong> for faster loading and fewer layout changes.<\/li>\n\n\n\n<li>Use composited animations executed on the compositor thread to avoid layout recalculations. <strong>Plugins like Greenshift (with GSAP)<\/strong> can help.<\/li>\n\n\n\n<li>Restrict your site to <strong>no more than two custom font families<\/strong> to minimize layout shifts caused by font swapping or loading delays.<\/li>\n\n\n\n<li><strong>Preload key fonts, images, and scripts<\/strong> to improve load times and visual stability.<\/li>\n<\/ol>\n\n\n\n<p>To learn more about Core Web Vitals in WordPress, also check out my articles on how to optimize <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/largest-contentful-paint-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint<\/a> and <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/interaction-to-next-paint-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interaction to Next Paint<\/a> on a WordPress site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cumulative Layout Shift (CLS) is a user experience metric that assesses the visual stability of a web page by quantifying all the unexpected layout shifts happening over its lifespan. It\u2019s one of Google\u2019s Core Web Vitals, which means that your Cumulative Layout Shift scores impact your search engine rankings. Moderate to high CLS scores often [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":10510,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[30],"tags":[],"class_list":["post-7133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/7133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=7133"}],"version-history":[{"count":126,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/7133\/revisions"}],"predecessor-version":[{"id":13814,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/7133\/revisions\/13814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/10510"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=7133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/categories?post=7133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/tags?post=7133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}