{"id":1845,"date":"2021-08-05T11:41:00","date_gmt":"2021-08-05T11:41:00","guid":{"rendered":"https:\/\/www.wpstaq.com\/?post_type=pagespeedinsights&amp;p=1845"},"modified":"2021-08-05T11:41:00","modified_gmt":"2021-08-05T11:41:00","slug":"avoid-large-layout-shifts","status":"publish","type":"pagespeedinsights","link":"https:\/\/www.wpstaq.com\/hk\/pagespeedinsights\/avoid-large-layout-shifts\/","title":{"rendered":"Avoid large layout shifts"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"how-do-layout-shifts-affect-page-performance\">How do Layout Shifts affect page performance?<\/h2>\n\n\n\n<p>When a user visits your webpage, they&#8217;re usually looking to quickly interact with buttons, contact forms, images and videos.<\/p>\n\n\n\n<p>Sometimes, just as they are about to click something, the screen has shifted down and they&#8217;ve accidentally clicked on something else, resulting in poor user experience.<br><\/p>\n\n\n\n<p>This\u00a0<strong>Layout shift<\/strong>\u00a0affects the way users interact with your website; a poor CLS score indicates that your page is visually unstable.<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-fix-audit\">How to avoid large layout shifts?<\/h2>\n\n\n\n<p>Avoid large layout shifts 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>Specify both\u00a0width and height for your website&#8217;s image and video elements.<\/p>\n\n\n\n<p>You can also use CSS aspect ratio boxes to do the same.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-reducing-layout-shifts-caused-by-ads-embeds-and-iframes\">2) 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>Use placeholders when there is no ad available to show.<\/li><li>Reserve ad slot size (preferably the largest) before loading the ad library.<\/li><li>Move ads to the bottom or out of the viewport.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-avoiding-inserting-new-content-above-existing-content\">3) Avoiding inserting new content above existing content<\/h3>\n\n\n\n<p>Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-preventing-the-flash-of-invisible-text-foit\">4) Preventing the Flash of Invisible Text (FOIT)<\/h3>\n\n\n\n<p>Ensure your text remains visible during webfont loads by preloading web-fonts and\/or using the font-display attribute.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"or-you-can-easily-avoid-large-layout-shifts-with-staq\">Or you can easily avoid large layout shifts with Staq!<\/h2>\n\n\n\n<p>With Staq Cache you can easily avoid large layout shifts!<\/p>\n\n\n\n<p>CSS can cause render-blocking issues, however, you may find that Google identifies purely .CSS files only.<\/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","protected":false},"template":"","class_list":["post-1845","pagespeedinsights","type-pagespeedinsights","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Avoid large layout shifts - 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\/avoid-large-layout-shifts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Avoid large layout shifts - How to fix really quickly with Staq\" \/>\n<meta property=\"og:description\" content=\"How do Layout Shifts affect page performance? When a user visits your webpage, they&#8217;re usually looking to quickly interact with buttons, contact forms, images and videos. Sometimes, just as they are about to click something, the screen has shifted down and they&#8217;ve accidentally clicked on something else, resulting in poor user experience. This\u00a0Layout shift\u00a0affects the&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/\" \/>\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-2.36.00-pm-1024x710.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/\",\"name\":\"Avoid large layout shifts - How to fix really quickly with Staq\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\",\"datePublished\":\"2021-08-05T11:41:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/#breadcrumb\"},\"inLanguage\":\"en-hk\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-hk\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/avoid-large-layout-shifts\\\/#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\":\"Avoid large layout shifts\"}]},{\"@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-hk\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-hk\",\"@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":"Avoid large layout shifts - 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\/avoid-large-layout-shifts\/","og_locale":"en_US","og_type":"article","og_title":"Avoid large layout shifts - How to fix really quickly with Staq","og_description":"How do Layout Shifts affect page performance? When a user visits your webpage, they&#8217;re usually looking to quickly interact with buttons, contact forms, images and videos. Sometimes, just as they are about to click something, the screen has shifted down and they&#8217;ve accidentally clicked on something else, resulting in poor user experience. This\u00a0Layout shift\u00a0affects the&hellip;","og_url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/","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-2.36.00-pm-1024x710.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/","url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/","name":"Avoid large layout shifts - How to fix really quickly with Staq","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png","datePublished":"2021-08-05T11:41:00+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/#breadcrumb"},"inLanguage":"en-hk","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/"]}]},{"@type":"ImageObject","inLanguage":"en-hk","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/avoid-large-layout-shifts\/#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":"Avoid large layout shifts"}]},{"@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-hk"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-hk","@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\/hk\/wp-json\/wp\/v2\/pagespeedinsights\/1845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/hk\/wp-json\/wp\/v2\/pagespeedinsights"}],"about":[{"href":"https:\/\/www.wpstaq.com\/hk\/wp-json\/wp\/v2\/types\/pagespeedinsights"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/hk\/wp-json\/wp\/v2\/media?parent=1845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}