{"id":1852,"date":"2021-08-05T11:43:13","date_gmt":"2021-08-05T11:43:13","guid":{"rendered":"https:\/\/www.wpstaq.com\/?post_type=pagespeedinsights&amp;p=1852"},"modified":"2021-08-05T11:43:13","modified_gmt":"2021-08-05T11:43:13","slug":"improve-cumulative-layout-shift","status":"publish","type":"pagespeedinsights","link":"https:\/\/www.wpstaq.com\/nz\/pagespeedinsights\/improve-cumulative-layout-shift\/","title":{"rendered":"Improve Cumulative Layout Shift"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>Cumulative Layout Shift (CLS) is a performance metric used to measure the perceived page load visual stability or the\u00a0<strong>unexpected shifting of web elements<\/strong>\u00a0while loading the page.<\/p>\n\n\n\n<p>CLS is one of the metrics measured in Google&#8217;s Web Vitals.\u00a0<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cls-effect-on-your-performance-score\">CLS&#8217; effect on your Performance Score<\/h2>\n\n\n\n<p>CLS accounts for\u00a0<strong>15% of the total Performance Score<\/strong>.<\/p>\n\n\n\n<p>Unlike most other Performance Score metrics, CLS focuses on measuring your visitor&#8217;s page experience opposed to page speed.<\/p>\n\n\n\n<p>CLS is one of the biggest contributor to User Delight &#8211; i.e., offering a smooth, lag-free experience to your visitors.<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-improve-metric\">How to improve Cumulative Layout Shift?<\/h2>\n\n\n\n<p>Improve your CLS score by incorporating good practices into your development workflow, such as:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-specifying-image-dimensions\">1) Specifying image dimensions<\/h3>\n\n\n\n<p>Always specify\u00a0width and height for your website&#8217;s image and video elements.<\/p>\n\n\n\n<p id=\"how-to-fix-audit\"><strong>Fix elements do not have explicit width and height with Staq<\/strong><\/p>\n\n\n\n<p>Go to Staq Hosting &gt; Media &gt; Site Optimizer &gt; Add explicit image dimensions<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\" alt=\"\" class=\"wp-image-6002\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-specifying-image-dimensions\">2) Eliminate render-blocking resources with Staq<\/h3>\n\n\n\n<p>CSS can cause render-blocking issues which in turn affect CLS.<\/p>\n\n\n\n<p>The Staq tool may either eliminate render-blocking resources or improve them.<\/p>\n\n\n\n<p>To optimize, go to Site Optimizer &gt; CSS. Then turn on:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Load CSS deferred<\/li><li>Extract Critical CSS.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\" alt=\"\" class=\"wp-image-5963\"\/><\/figure><\/div>\n\n\n\n<p>What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren\u2019t required at the initial load.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-reducing-layout-shifts-caused-by-ads-embeds-and-iframes\">3) Reducing layout shifts caused by ads, embeds, and iframes<\/h3>\n\n\n\n<p>To reduce layout shifts caused by ads, embeds, and iframes, do things like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Reserve ad slot size before loading the ad library.<\/li><li>Move ads to the bottom or out of the view.<\/li><li>Use placeholders when there is no ad to show.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-avoiding-inserting-new-content-above-existing-content\">4) Avoiding inserting new content above existing content<\/h3>\n\n\n\n<p>Avoid inserting dynamic content like banners, forms above existing content unless in response to user action like clicking a &#8216;Get Quote&#8217; button. This helps prevent unexpected layout shifts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-preventing-the-flash-of-invisible-text-foit\">5) Preventing the Flash of Invisible Text (FOIT)<\/h3>\n\n\n\n<p><strong>The Flash of Invisible Text<\/strong> issue can also affect your website&#8217;s CLS. Use the font-display attribute or make sure your text remains visible during loads by preloading web-fonts.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-avoiding-non-composited-animations\">6) Avoiding non-composited animations<\/h3>\n\n\n\n<p>If you can, only perform composited animations\u00a0to\u00a0reduce main-thread work\u00a0and prevent repainting of pixels when loading the page.<\/p>\n","protected":false},"template":"","class_list":["post-1852","pagespeedinsights","type-pagespeedinsights","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Improve Cumulative Layout Shift - How to fix really quickly with Staq<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improve Cumulative Layout Shift - How to fix really quickly with Staq\" \/>\n<meta property=\"og:description\" content=\"Overview Cumulative Layout Shift (CLS) is a performance metric used to measure the perceived page load visual stability or the\u00a0unexpected shifting of web elements\u00a0while loading the page. CLS is one of the metrics measured in Google&#8217;s Web Vitals.\u00a0 CLS&#8217; effect on your Performance Score CLS accounts for\u00a015% of the total Performance Score. Unlike most other&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"Managed Hosting Platform for WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/staqhosting\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/\",\"name\":\"Improve Cumulative Layout Shift - How to fix really quickly with Staq\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\",\"datePublished\":\"2021-08-05T11:43:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/#breadcrumb\"},\"inLanguage\":\"en-nz\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/improve-cumulative-layout-shift\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PageSpeedInsights\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Improve Cumulative Layout Shift\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"name\":\"Managed Hosting Platform for WordPress\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wpstaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-nz\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"width\":512,\"height\":512,\"caption\":\"Staq\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/staqhosting\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wpstaq\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Improve Cumulative Layout Shift - How to fix really quickly with Staq","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/","og_locale":"en_US","og_type":"article","og_title":"Improve Cumulative Layout Shift - How to fix really quickly with Staq","og_description":"Overview Cumulative Layout Shift (CLS) is a performance metric used to measure the perceived page load visual stability or the\u00a0unexpected shifting of web elements\u00a0while loading the page. CLS is one of the metrics measured in Google&#8217;s Web Vitals.\u00a0 CLS&#8217; effect on your Performance Score CLS accounts for\u00a015% of the total Performance Score. Unlike most other&hellip;","og_url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/","og_site_name":"Managed Hosting Platform for WordPress","article_publisher":"https:\/\/www.facebook.com\/staqhosting\/","og_image":[{"url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/","url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/","name":"Improve Cumulative Layout Shift - How to fix really quickly with Staq","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","datePublished":"2021-08-05T11:43:13+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/#breadcrumb"},"inLanguage":"en-nz","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/"]}]},{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/improve-cumulative-layout-shift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wpstaq.com\/"},{"@type":"ListItem","position":2,"name":"PageSpeedInsights","item":"https:\/\/www.wpstaq.com\/pagespeedinsights\/"},{"@type":"ListItem","position":3,"name":"Improve Cumulative Layout Shift"}]},{"@type":"WebSite","@id":"https:\/\/www.wpstaq.com\/#website","url":"https:\/\/www.wpstaq.com\/","name":"Managed Hosting Platform for WordPress","description":"","publisher":{"@id":"https:\/\/www.wpstaq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wpstaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-nz"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","width":512,"height":512,"caption":"Staq"},"image":{"@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/staqhosting\/","https:\/\/www.linkedin.com\/company\/wpstaq"]}]}},"_links":{"self":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/pagespeedinsights\/1852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/pagespeedinsights"}],"about":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/types\/pagespeedinsights"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/media?parent=1852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}