{"id":91903,"date":"2022-07-30T07:35:37","date_gmt":"2022-07-30T05:35:37","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/"},"modified":"2020-10-03T05:59:17","modified_gmt":"2020-10-03T08:59:17","slug":"optimize-cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/","title":{"rendered":"Optimize Cumulative Layout Shift"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Images-without-dimensions-%F0%9F%8C%86\" >Images without dimensions \ud83c\udf06<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#History\" >History<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Modern-best-practice\" >Modern best practice<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Ads-embeds-and-iframes-without-dimensions-%F0%9F%93%A2%F0%9F%98%B1\" >Ads, embeds and iframes without dimensions \ud83d\udce2\ud83d\ude31<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Advertisements\" >Advertisements<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Statically-reserve-space-for-the-ad-slot\" >Statically reserve space for the ad slot<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Avoid-placing-ads-near-the-top-of-the-viewport\" >Avoid placing ads near the top of the viewport<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Embeds-and-iframes\" >Embeds and iframes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Dynamic-content-%F0%9F%93%90\" >Dynamic content \ud83d\udcd0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Web-fonts-causing-FOUTFOIT-%F0%9F%93%9D\" >Web fonts causing FOUT\/FOIT \ud83d\udcdd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Animations-%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F\" >Animations \ud83c\udfc3\u200d\u2640\ufe0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/#Developer-Tools-%F0%9F%94%A7\" >Developer Tools \ud83d\udd27<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Learn how to avoid sudden layout shifts to improve user-experience\n        <\/p>\n<p>\n          <time>May 5, 2020<\/time><br \/>\n            Updated <time>Aug 20, 2020<\/time>\n        <\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Optimize for Core Web Vitals\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/AQqFZ5t8uNc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<p>\u00abI was about to click that! Why did it move? \ud83d\ude2d\u00bb<\/p>\n<p>Layout shifts can be distracting to users. Imagine you&#8217;ve started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news, or trying to click those &#8216;Search&#8217; or &#8216;Add to Cart&#8217; buttons. Such experiences are visually jarring and frustrating. They&#8217;re often caused when visible elements are forced to move because another element was suddenly added to the page or resized.<\/p>\n<p>Cumulative Layout Shift (CLS) &#8211; a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don&#8217;t occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.<\/p>\n<p>In this guide, we&#8217;ll cover optimizing common causes of layout shifts.<\/p>\n<picture><source srcset=\"https:\/\/web.dev\/..\/vitals\/cls_8x2.svg\" media=\"(min-width: 640px)\"><img decoding=\"async\" class=\"w-screenshot w-screenshot--filled\" src=\"https:\/\/webdev.imgix.net\/vitals\/cls_4x3.svg\" alt=\"Good CLS values are under 0.1, poor values are greater than 0.25\n            and anything in between needs improvement\"><br \/>\n<\/source><\/picture>\n<p>The most common causes of a poor CLS are:<\/p>\n<ul>\n<li>Images without dimensions<\/li>\n<li>Ads, embeds, and iframes without dimensions<\/li>\n<li>Dynamically injected content<\/li>\n<li>Web Fonts causing FOIT\/FOUT<\/li>\n<li>Actions waiting for a network response before updating DOM<\/li>\n<\/ul>\n<h2 id=\"images-without-dimensions\"><span class=\"ez-toc-section\" id=\"Images-without-dimensions-%F0%9F%8C%86\"><\/span>Images without dimensions \ud83c\udf06 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Summary:<\/strong> Always include <code>width<\/code> and <code>height<\/code> size attributes on your images and video elements. Alternatively, reserve the required space with <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\">CSS aspect ratio boxes<\/a>. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.<\/p>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-image-dimensions.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/image-dimensions.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/image-dimensions.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Images without width and height specified.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-image-dimensions-fixed.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/image-dimensions-fixed.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/image-dimensions-fixed.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Images with width and height specified.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='optimize-cumulative3-8165261' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/Optimize-Cumulative3-8165261.png' alt=\"Lighthouse report showing the before\/after impact to Cumulative Layout Shift after setting dimensions on images\"><figcaption class=\"w-figcaption\">\n    Lighthouse 6.0 impact of setting image dimensions on CLS.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"history\"><span class=\"ez-toc-section\" id=\"History\"><\/span>History <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In the early days of the web, developers would add <code>width<\/code> and <code>height<\/code> attributes to their <code>&lt;img&gt;<\/code> tags to ensure sufficient space was allocated on the page before the browser started fetching images. This would minimize reflow and re-layout.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>640<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>360<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Puppy with balloons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>You may notice <code>width<\/code> and <code>height<\/code> above do not include units. These \u00abpixel\u00bb dimensions would ensure a 640&#215;360 area would be reserved. The image would stretch to fit this space, regardless of whether the true dimensions matched or not.<\/p>\n<p>When <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2011\/01\/guidelines-for-responsive-web-design\/\">Responsive Web Design<\/a> was introduced, developers began to omit <code>width<\/code> and <code>height<\/code> and started using CSS to resize images instead:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">img<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <br><span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>A downside to this approach is space could only be allocated for an image once it began to download and the browser could determine its dimensions. As images loaded in, the page would reflow as each image appeared on screen. It became common for text to suddenly pop down the screen. This wasn&#8217;t a great user experience at all.<\/p>\n<p>This is where aspect ratio comes in. The aspect ratio of an image is the ratio of its width to its height. It&#8217;s common to see this expressed as two numbers separated by a colon (for example 16:9 or 4:3). For an x:y aspect ratio, the image is x units wide and y units high.<\/p>\n<p>This means if we know one of the dimensions, the other can be determined. For a 16:9 aspect ratio:<\/p>\n<ul>\n<li>If puppy.jpg has a 360px height, width is 360 x (16 \/ 9) = 640px<\/li>\n<li>If puppy.jpg has a 640px width, height is 640 x (9 \/ 16) = 360px<\/li>\n<\/ul>\n<p>Knowing the aspect ratio allows the browser to calculate and reserve sufficient space for the height and associated area.<\/p>\n<h3 id=\"modern-best-practice\"><span class=\"ez-toc-section\" id=\"Modern-best-practice\"><\/span>Modern best practice <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Modern browsers now set the default aspect ratio of images based on an image&#8217;s width and height attributes so it&#8217;s valuable to set them to prevent layout shifts. Thanks to the CSS Working Group, developers just need to set <code>width<\/code> and <code>height<\/code> as normal:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>640<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>360<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Puppy with balloons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\u2026and the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Cascade#User-agent_stylesheets\">UA stylesheets<\/a> of all browsers add a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/rendering.html#attributes-for-embedded-content-and-images\">default aspect ratio<\/a> based on the element&#8217;s existing <code>width<\/code> and <code>height<\/code> attributes:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">img<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">aspect-ratio<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">attr<\/span><span class=\"token punctuation\">(<\/span>width<span class=\"token punctuation\">)<\/span> \/ <span class=\"token function\">attr<\/span><span class=\"token punctuation\">(<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>This calculates an aspect ratio based on the <code>width<\/code> and <code>height<\/code> attributes before the image has loaded. It provides this information at the very start of layout calculation. As soon as an image is told to be a certain width (for example <code>width: 100%<\/code>), the aspect ratio is used to calculate the height.<\/p>\n<p>Tip: If you&#8217;re having a hard time understanding aspect ratio, a handy <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/aspectratiocalculator.com\/16-9.html\">calculator<\/a> is available to help.<\/p>\n<p>The above image aspect ratio changes have shipped in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1547231\">Firefox<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=979891\">Chromium<\/a>, and are coming to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/smfr\/status\/1220051332767174656\">WebKit<\/a> (Safari).<\/p>\n<p>For a fantastic deep-dive into aspect ratio with further thinking around responsive images, see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.logrocket.com\/jank-free-page-loading-with-media-aspect-ratios\/\">jank-free page loading with media aspect ratios<\/a>.<\/p>\n<p>If your image is in a container, you can use CSS to resize the image to the width of this container. We set <code>height: auto;<\/code> to avoid the image height being a fixed value (for example <code>360px<\/code>).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">img<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p><strong>What about responsive images?<\/strong><\/p>\n<p>When working with responsive images, <code>srcset<\/code> defines the images you allow the browser to select between and what size each image is. To ensure <code>&lt;img&gt;<\/code> width and height attributes can be set, each image should use the same aspect ratio.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1000<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1000<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy-1000.jpg<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy-1000.jpg 1000w,<br>puppy-2000.jpg 2000w,<br>puppy-3000.jpg 3000w<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Puppy with balloons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>What about <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images#Art_direction\">art direction<\/a>?<\/p>\n<p>Pages may wish to include a cropped shot of an image on narrow viewports with the full image displayed on desktop.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 799px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy-480w-cropped.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 800px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy-800w.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>puppy-800w.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Puppy with balloons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>It&#8217;s very possible these images could have different aspect ratios and browsers are still evaluating what the most efficient solution here should be, including if dimensions should be specified on all sources. Until a solution is decided on, relayout is still possible here.<\/p>\n<h2 id=\"ads-embeds-and-iframes-without-dimensions\"><span class=\"ez-toc-section\" id=\"Ads-embeds-and-iframes-without-dimensions-%F0%9F%93%A2%F0%9F%98%B1\"><\/span>Ads, embeds and iframes without dimensions \ud83d\udce2\ud83d\ude31 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"advertisements\"><span class=\"ez-toc-section\" id=\"Advertisements\"><\/span>Advertisements <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance\/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you&#8217;re viewing down the page.<\/p>\n<p>During the ad lifecycle, many points can introduce layout shift:<\/p>\n<ul>\n<li>When a site inserts the ad container in the DOM<\/li>\n<li>When a site resizes the ad container with first-party code<\/li>\n<li>When the ad tag library loads (and resizes the ad container)<\/li>\n<li>When the ad fills a container (and resizes if the final ad has a different size)<\/li>\n<\/ul>\n<p>The good news is that it&#8217;s possible for sites to follow best practices to reduce ad shift. Sites can mitigate these layout shifts by:<\/p>\n<ul>\n<li>Statically reserve space for the ad slot.\n<ul>\n<li>In other words, style the element before the ad tag library loads.<\/li>\n<li>If placing ads in the content flow, ensure shifts are eliminated by reserving the slot size. These ads <em>shouldn&#8217;t<\/em> cause layout shifts if loaded off-screen.<\/li>\n<\/ul>\n<\/li>\n<li>Take care when placing non-sticky ads near the top of the viewport.\n<ul>\n<li>In the below example, it&#8217;s recommended to move the ad to below the \u00abworld vision\u00bb logo and make sure to reserve enough space for the slot.<\/li>\n<\/ul>\n<\/li>\n<li>Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.<\/li>\n<li>Eliminate shifts by reserving the largest possible size for the ad slot.\n<ul>\n<li>This works, but it risks having a blank space if a smaller ad creative fills the slot.<\/li>\n<\/ul>\n<\/li>\n<li>Choose the most likely size for the ad slot based on historical data.<\/li>\n<\/ul>\n<p>Some sites may find collapsing the slot initially can reduce layout shifts if the ad slot is unlikely to fill. There isn&#8217;t an easy way to choose the exact size each time, unless you control the ad serving yourself.<\/p>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-final-ads-no-dimensions.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/final_ads_no_dimensions.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/final_ads_no_dimensions.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Ads without sufficient space reserved.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-top-ad-after.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/top-ad-after.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/top-ad-after.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Ads with sufficient space reserved.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='optimize-cumulative6-3770398' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/Optimize-Cumulative6-3770398.png' alt=\"Lighthouse report showing the before\/after impact to Cumulative Layout Shift of reserving space for banners like ads\"><figcaption class=\"w-figcaption\">\n    Lighthouse 6.0 impact of reserving space for this banner on CLS<br \/>\n  <\/figcaption><\/figure>\n<h4 id=\"statically-reserve-space-for-the-ad-slot\"><span class=\"ez-toc-section\" id=\"Statically-reserve-space-for-the-ad-slot\"><\/span>Statically reserve space for the ad slot <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Statically style slot DOM elements with the same sizes passed to your tag library. This can help ensure the library doesn&#8217;t introduce layout shifts when it loads. If you don&#8217;t do this, the library may change the size of the slot element after page layout.<\/p>\n<p>Also consider the sizes of smaller ad serves. If a smaller ad is served, a publisher can style the (larger) container to avoid layout shifts. The downside to this approach is that it will increase the amount of blank space, so keep in mind the trade-off here.<\/p>\n<h4 id=\"avoid-placing-ads-near-the-top-of-the-viewport\"><span class=\"ez-toc-section\" id=\"Avoid-placing-ads-near-the-top-of-the-viewport\"><\/span>Avoid placing ads near the top of the viewport <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Ads near the top of the viewport may cause a greater layout shift than those at the middle. This is because ads at the top generally have more content lower down, meaning more elements move when the ad causes a shift. Conversely, ads near the middle of the viewport may not shift as many elements as the content above it is less likely to move.<\/p>\n<h3 id=\"embeds-and-iframes\"><span class=\"ez-toc-section\" id=\"Embeds-and-iframes\"><\/span>Embeds and iframes <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Embeddable widgets allow you to embed portable web content in your page (for example, videos from YouTube, maps from Google Maps, social media posts, and so on). These embeds can take a number of forms:<\/p>\n<ul>\n<li>HTML fallback and a JavaScript tag transforming the fallback into a fancy embed<\/li>\n<li>Inline HTML snippet<\/li>\n<li>iframe embed<\/li>\n<\/ul>\n<p>These embeds often aren&#8217;t aware in advance just how large an embed will be (for example, in the case of a social media post &#8211; does it have an embedded image? video? multiple rows of text?). As a result, platforms offering embeds do not always reserve enough space for their embeds and can cause layout shifts when they finally load.<\/p>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-embed-iframe.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/embed-iframe.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/embed-iframe.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Embed without space reserved.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-embeds-with-dimensions.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/embeds-with-dimensions.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/embeds-with-dimensions.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Embed with space reserved.<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='optimize-cumulative9-7298690' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/Optimize-Cumulative9-7298690.png' alt=\"Lighthouse report showing the before\/after impact to Cumulative Layout Shift of reserving space for this embed on CLS\"><figcaption class=\"w-figcaption\">\n    Lighthouse 6.0 impact of reserving space for this embed on CLS<br \/>\n  <\/figcaption><\/figure>\n<p>To work around this, you can minimize CLS by precomputing sufficient space for embeds with a placeholder or fallback. One workflow you can use for embeds:<\/p>\n<ul>\n<li>Obtain the height of your final embed by inspecting it with your browser developer tools<\/li>\n<li>Once the embed loads, the contained iframe will resize to fit so that its contents will fit.<\/li>\n<\/ul>\n<p>Take note of the dimensions and style a placeholder for the embed accordingly. You may need to account for subtle differences in ad\/placeholder sizes between different form factors using media queries.<\/p>\n<h3 id=\"dynamic-content\"><span class=\"ez-toc-section\" id=\"Dynamic-content-%F0%9F%93%90\"><\/span>Dynamic content \ud83d\udcd0 <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Summary:<\/strong> Avoid inserting new content above existing content, unless in response to a user interaction. This ensures any layout shifts that occur are expected.<\/p>\n<p>You&#8217;ve probably experienced layout shifts due to UI that pops-in at the top or bottom of the viewport when you&#8217;re trying to load a site. Similar to ads, this often this happens with banners and forms that shift the rest of the page&#8217;s content:<\/p>\n<ul>\n<li>\u00abSign-up to our newsletter!\u00bb (whoa, slow down! we just met!)<\/li>\n<li>\u00abRelated content\u00bb<\/li>\n<li>\u00abInstall our [iOS\/Android] app\u00bb<\/li>\n<li>\u00abWe&#8217;re still taking orders\u00bb<\/li>\n<li>\u00abGDPR notice\u00bb<\/li>\n<\/ul>\n<figure class=\"w-figure\">\n    <video controls=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\" poster=\"video-related-articles-dynamic-content.jpg\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/related-articles-dynamic-content.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/optimize-cls\/related-articles-dynamic-content.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n      Dynamic content without space reserved.<br \/>\n    <\/figcaption><\/figure>\n<p>If you need to display these types of UI affordances, reserve sufficient space in the viewport for it in advance (for example, using a placeholder or skeleton UI) so that when it loads, it does not cause content in the page to surprisingly shift around.<\/p>\n<h3 id=\"web-fonts-causing-foutfoit\"><span class=\"ez-toc-section\" id=\"Web-fonts-causing-FOUTFOIT-%F0%9F%93%9D\"><\/span>Web fonts causing FOUT\/FOIT \ud83d\udcdd <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Downloading and rendering web fonts can cause layout shifts in two ways:<\/p>\n<ul>\n<li>The fallback font is swapped with a new font (FOUT &#8211; flash of unstyled text)<\/li>\n<li>\u00abInvisible\u00bb text is displayed until a new font is rendered (FOIT &#8211; flash of invisible text)<\/li>\n<\/ul>\n<p>The following tools can help you minimize this:<\/p>\n<ul>\n<li><code>font-display<\/code> allows you to modify the rendering behavior of custom fonts with values such as <code>auto<\/code>, <code>swap<\/code>, <code>block<\/code>, <code>fallback<\/code> and <code>optional<\/code>. Unfortunately, all of these values (except <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/crrev.com\/749080\">optional<\/a>) can cause a re-layout in one of the above ways.<\/li>\n<li>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/webfont-optimization#the_font_loading_api\">Font Loading API<\/a> can reduce the time it takes to get necessary fonts.<\/li>\n<\/ul>\n<p>As of Chrome 83, I can recommend the following too:<\/p>\n<ul>\n<li>Using <code>&lt;link rel=preload&gt;<\/code> on the key web fonts: a preloaded font will have a higher chance to meet the first paint, in which case there&#8217;s no layout shifting.<\/li>\n<li>Combining <code>&lt;link rel=preload&gt;<\/code> and <code>font-display: optional<\/code><\/li>\n<\/ul>\n<p>Read Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts for more details.<\/p>\n<h3 id=\"animations\"><span class=\"ez-toc-section\" id=\"Animations-%F0%9F%8F%83%E2%80%8D%E2%99%80%EF%B8%8F\"><\/span>Animations \ud83c\udfc3\u200d\u2640\ufe0f <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Summary:<\/strong> Prefer <code>transform<\/code> animations to animations of properties that trigger layout changes.<\/p>\n<p>Changes to CSS property values can require the browser to react to these changes. A number of values trigger re-layout, paint and composite such as <code>box-shadow<\/code> and <code>box-sizing<\/code>. A number of CSS properties can be changed in a less costly manner.<\/p>\n<p>To learn more about what CSS properties trigger layout, see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/csstriggers.com\/\">CSS Triggers<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/\">High-performance animations<\/a>.<\/p>\n<h3 id=\"developer-tools\"><span class=\"ez-toc-section\" id=\"Developer-Tools-%F0%9F%94%A7\"><\/span>Developer Tools \ud83d\udd27 <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I&#8217;m happy to share there are a number of tools available to measure and debug Cumulative Layout Shift (CLS).<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Lighthouse<\/a> <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/releases\">6.0<\/a> and above include support for measuring CLS in a lab setting. This release will also highlight the nodes that cause the most layout shifting.<\/p>\n<p><img alt='optimize-cumulative11-9188717' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/Optimize-Cumulative11-9188717-scaled.jpg' alt=\"Lighthouse 6.0 includes support for measuring CLS in the metrics section\" title=\"image_tooltip\"><\/p>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\">Performance panel<\/a> in DevTools highlights layout shifts in the <strong>Experience<\/strong> section as of Chrome 84. The <strong>Summary<\/strong> view for a <code>Layout Shift<\/code> record includes the cumulative layout shift score as well as a rectangle overlay showing the affected regions.<\/p>\n<figure class=\"w-figure\">\n  <img alt='optimize-cumulative12-5959780' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/Optimize-Cumulative12-5959780-scaled.jpg' alt=\"Layout Shift records being displayed in the Chrome DevTools performance panel when expanding the Experience section\"><figcaption class=\"w-figcaption\">\nAfter recording a new trace in the Performance panel, the <b>Experience<\/b> section of the results is populated with a red-tinted bar displaying a <code>Layout Shift<\/code> record. Clicking the record allows you to drill down into impacted elements (e.g. note the moved from\/to entries).<br \/>\n  <\/figcaption><\/figure>\n<p>Measuring real-world CLS aggregated at an origin-level is also possible using the Chrome User Experience Report. CrUX CLS data is available via BigQuery and a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/CrUX\/blob\/master\/sql\/cls-summary.sql\">sample query<\/a> to look at CLS performance is available to use.<\/p>\n<p>That&#8217;s it for this guide. I hope it helps keep your pages just a little less shifty \ud83d\ude42<\/p>\n<p><em>With thanks to Philip Walton, Kenji Baheux, Warren Maresca, Annie Sullivan, Steve Kobes and Gilberto Cocchi for their helpful reviews.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 \u00abI was about to click that! Why did it move? \ud83d\ude2d\u00bb Layout shifts\u2026<\/p>","protected":false},"author":1,"featured_media":91905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-91903","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimize Cumulative Layout Shift - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 &quot;I was about to click that! Why did it move? \ud83d\ude2d&quot; Layout\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Cumulative Layout Shift\" \/>\n<meta property=\"og:description\" content=\"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 &quot;I was about to click that! Why did it move? \ud83d\ude2d&quot; Layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-30T05:35:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Optimize Cumulative Layout Shift\",\"datePublished\":\"2022-07-30T05:35:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/\"},\"wordCount\":2202,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-4670310.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/\",\"name\":\"Optimize Cumulative Layout Shift - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-4670310.png\",\"datePublished\":\"2022-07-30T05:35:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 \\\"I was about to click that! Why did it move? \ud83d\ude2d\\\" Layout\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimize-cumulative-layout-shift\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-4670310.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-4670310.png\",\"width\":1200,\"height\":650,\"caption\":\"hero-4670310-3563046-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimize Cumulative Layout Shift - R Marketing Digital","description":"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 &quot;I was about to click that! Why did it move? \ud83d\ude2d&quot; Layout","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:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/","og_locale":"en_US","og_type":"article","og_title":"Optimize Cumulative Layout Shift","og_description":"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 \"I was about to click that! Why did it move? \ud83d\ude2d\" Layout","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/optimize-cumulative-layout-shift\/","og_site_name":"R Marketing Digital","article_published_time":"2022-07-30T05:35:37+00:00","og_image":[{"width":1200,"height":650,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Optimize Cumulative Layout Shift","datePublished":"2022-07-30T05:35:37+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/"},"wordCount":2202,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/","url":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/","name":"Optimize Cumulative Layout Shift - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png","datePublished":"2022-07-30T05:35:37+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Learn how to avoid sudden layout shifts to improve user-experience May 5, 2020 Updated Aug 20, 2020 &quot;I was about to click that! Why did it move? \ud83d\ude2d&quot; Layout","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/optimize-cumulative-layout-shift\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-4670310.png","width":1200,"height":650,"caption":"hero-4670310-3563046-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/91903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=91903"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/91903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/91905"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=91903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=91903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=91903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}