{"id":161111,"date":"2023-06-13T20:45:03","date_gmt":"2023-06-14T01:45:03","guid":{"rendered":"https:\/\/ahrefs.com\/blog\/?p=161111"},"modified":"2025-01-22T18:30:09","modified_gmt":"2025-01-22T23:30:09","slug":"cumulative-layout-shift-cls","status":"publish","type":"post","link":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/","title":{"rendered":"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It"},"content":{"rendered":"\n<div class=\"intro-txt\">Cumulative Layout Shift (CLS) measures the visual stability of a page as it loads. It does this by looking at how big elements are and how far they move. It\u2019s one of the three Core Web Vitals metrics Google uses to measure page experience.<\/div>\n\n\n\n<p>CLS is calculated during the five-second window where the most shifting occurs.<\/p>\n\n\n\n<div class=\"sidenote\"><div class=\"sidenote-title\">Sidenote.<\/div> Expected layout shifts, like after a user action, are fine and expected. Shifts within 500 ms of a user interaction are excluded from the calculations.<\/div>\n\n\n\n<p>Here\u2019s how it\u2019s measured:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>layout shift score = impact fraction x distance fraction<\/p>\n<\/blockquote>\n\n\n\n<p>Or said in a more understandable way, it\u2019s:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>layout shift score = % of the viewport that changed * the distance an unstable element moved<\/p>\n<\/blockquote>\n\n\n\n<p>The reason CLS is important is it\u2019s annoying when you try to click something on a page that shifts and then end up clicking on something you don\u2019t intend to.&nbsp;<\/p>\n\n\n\n<p>It happens to me all the time. I click on one thing and, suddenly, I\u2019m clicking on an ad and am now not even on the same website. As a user, I find that frustrating.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1246\" height=\"680\" class=\"wp-image-161119\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif\" alt=\"Click a link that shifts, showing a layout shift and why it's an issue\"><\/figure>\n\n\n\n<p>Common causes of CLS include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Images without dimensions.<\/li>\n\n\n\n<li>Ads, embeds, and iframes without dimensions.<\/li>\n\n\n\n<li>Injecting content with JavaScript.<\/li>\n\n\n\n<li>Applying fonts or styles late in the&nbsp;load.<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s look at what your CLS score should be and how to improve it.<\/p>\n\n\n\n<div class=\"intro-tok\" id=\"intro_tok\" style=\"display:none;\"><div class=\"intro-title\">Contents<\/div><a href=\"#\" class=\"expand-dots\"><span><\/span><span><\/span><span><\/span><\/a><\/div>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"What\u2019s a good CLS score?\" data-section=\"whats-a-good-cls-score\">\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s a good CLS&nbsp;score?<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>A good CLS score is less than or equal to 0.1 and should be based on Chrome User Experience Report (CrUX) data. This is data from actual users of Chrome who are on your site and have opted in to sharing this information. You need 75% of page loads to have a CLS score of 0.1 or&nbsp;lower.<\/p>\n\n\n\n<p>Your page may be classified into one of the following buckets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good: &lt;=0.1<\/li>\n\n\n\n<li>Needs improvement: &gt;0.1 and &lt;=0.25<\/li>\n\n\n\n<li>Poor: &gt;0.25<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1634\" class=\"wp-image-161157\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cumulative-layout-shift-cls.png\" alt=\"CLS thresholds for good, needs improvement, and poor\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cumulative-layout-shift-cls.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cumulative-layout-shift-cls-416x425.png 416w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cumulative-layout-shift-cls-768x784.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cumulative-layout-shift-cls-1504x1536.png 1504w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">CLS data<\/h3>\n\n\n\n<p>72.8% of sites have good CLS scores as of April 2023. This is averaged across the site. As we mentioned, you need 75% of page loads to have a CLS score of 0.1 or lower to be classified as&nbsp;good.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1540\" class=\"wp-image-161123\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-April-2023.png\" alt=\"Percentage of good CLS values from CrUX CWV data (April 2023)\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-April-2023.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-April-2023-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-April-2023-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-April-2023-1536x1478.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>CLS is the most improved Core Web Vital since Google\u2019s push for faster websites.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1523\" class=\"wp-image-161124\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-scores-CWV.png\" alt=\"Percentage of good CLS scores from CrUX CWV data (November 2019 to April 2023)\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-scores-CWV.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-scores-CWV-446x425.png 446w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-scores-CWV-768x731.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-CLS-scores-CWV-1536x1462.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>When we ran a study at the page level using <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a> data, we saw that CLS is similar on desktop and mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"2760\" class=\"wp-image-161126\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device.png\" alt=\"Breakdown of CLS by device\n\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device-246x425.png 246w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device-768x1325.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device-890x1536.png 890w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/cls-by-device-1187x2048.png 1187w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n<div class=\"highlighted-section\"><!-- Title Section -->\n<h4 class=\"section-title\">Check your CWVs including CLS for Free with Site&nbsp;Audit<\/h4>\n<!-- Form Section --><form class=\"form-section\">\n<div class=\"input-button-wrapper\">\n<div class=\"input-container\"><input type=\"text\" placeholder=\"Enter domain\"><\/div>\n<a class=\"start-button\" href=\"\/signup?plan=awt&amp;return=site-audit\">Start for&nbsp;Free<\/a><\/div>\n<div class=\"tooltip-container\">Free for websites with verified ownership<span class=\"info-icon\">i<\/span>\n<div class=\"tooltip-content\">\n<p>Ownership verification can be done&nbsp;by:<\/p>\n<ul>\n<li>Connecting Google Search Console (recommended);<\/li>\n<li>Uploading an HTML&nbsp;file;<\/li>\n<li>Adding a TXT record to your DNS configuration;<\/li>\n<li>Adding an HTML meta tag to your homepage.<\/li>\n<\/ul>\n<a href=\"https:\/\/help.ahrefs.com\/en\/articles\/3275938-verifying-ownership-of-your-project-or-website\" target=\"_blank\" rel=\"noopener noreferrer\">Learn more<\/a><\/div>\n<\/div>\n<p class=\"webmaster-tools-info\">Signing up here gives you access to <a href=\"https:\/\/ahrefs.com\/webmaster-tools\" target=\"_blank\" rel=\"noopener noreferrer\">Ahrefs Webmaster Tools \u2197<\/a> for&nbsp;free<\/p>\n<\/form><\/div>\n<p><style>\n  \/* Highlighted Section with Gray Border *\/\n  .highlighted-section {\n    border: 1px solid #ddd; \/* Light gray border *\/\n    border-radius: 8px;\n    padding: 15px 20px; \/* Adjusted padding to reduce top spacing *\/\n    background-color: #f9f9f9; \/* Light background for contrast *\/\n    max-width: 600px;\n    margin: 20px auto; \/* Center alignment *\/\n  }\n\n  \/* Section Title *\/\n  .section-title {\n    font-size: 24px; \/* Larger font size *\/\n    font-weight: bold;\n    color: #333;\n    margin-bottom: 15px;\n    margin-top: 0; \/* Remove extra spacing above the title *\/\n    text-align: center;\n  }\n\n  .form-section {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .input-button-wrapper {\n    display: flex;\n    gap: 10px; \/* Space between input and button *\/\n    align-items: center;\n  }\n\n  .input-container input {\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    width: 100%;\n  }\n\n  .tooltip-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 14px;\n    color: #555;\n    cursor: help;\n  }\n\n  .tooltip-container .info-icon {\n    color: #0073e6;\n    font-weight: bold;\n    font-size: 12px;\n    position: relative;\n    top: -5px;\n    display: inline-block;\n    text-decoration: none;\n    cursor: help;\n  }\n\n  .tooltip-content {\n    position: fixed; \/* Ensure tooltip can break out of its container *\/\n    top: 50px; \/* Adjust based on trigger position *\/\n    left: 50%; \/* Center horizontally *\/\n    transform: translateX(-50%);\n    background: white;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n    padding: 15px;\n    font-size: 14px;\n    display: none; \/* Initially hidden *\/\n    z-index: 1000;\n    min-width: 300px;\n    max-width: 400px; \/* Optional width for better readability *\/\n    white-space: normal;\n  }\n\n  .tooltip-container:hover .tooltip-content {\n    display: block;\n  }\n\n  .tooltip-content ul {\n    list-style-type: disc;\n    padding-left: 20px;\n  }\n\n  .tooltip-content a {\n    color: #0073e6;\n    text-decoration: none;\n  }\n\n  .webmaster-tools-info {\n    color: #333;\n    font-size: 14px;\n    margin-top: 10px;\n  }\n\n  .start-button {\n    background-color: orange;\n    color: white;\n    padding: 10px 20px;\n    text-decoration: none;\n    font-weight: bold;\n    border-radius: 5px;\n    white-space: nowrap; \/* Ensure text doesn\u2019t break into a second line *\/\n  }\n<\/style><\/p>\n\n<p>We also noted many sites struggle with CLS, especially on slower connections.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1429\" class=\"wp-image-161127\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-4.png\" alt=\"Breakdown of CLS by connection type\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-4.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-4-476x425.png 476w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-4-768x686.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-4-1536x1372.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>CLS is worse in the page-level data than the origin data. It\u2019s likely that people are improving their main pages, which get more traffic, while leaving a lot of other pages with failing scores.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1426\" class=\"wp-image-161262\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/page-level-CLS-metrics-1.png\" alt=\"Core Web Vitals metric breakdown at the page level instead of origin level\n\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/page-level-CLS-metrics-1.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/page-level-CLS-metrics-1-477x425.png 477w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/page-level-CLS-metrics-1-768x684.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/page-level-CLS-metrics-1-1536x1369.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to measure CLS\" data-section=\"how-to-measure-cls\">\n\n\n\n<h2 class=\"wp-block-heading\">How to measure CLS<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>There are different ways of measuring CLS: field data and lab&nbsp;data.<\/p>\n\n\n\n<p>Field data comes from the <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\">Chrome User Experience Report (CrUX)<\/a>, which is data from real users of Chrome who choose to share their data. This gives you the best idea of real-world CLS performance. It\u2019s also what you\u2019ll actually be measured on by Google for <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\">Core Web Vitals<\/a>.&nbsp;<\/p>\n\n\n\n<p>Lab data is based on tests with the same conditions to make tests repeatable. Google doesn\u2019t use this for Core Web Vitals. But it\u2019s useful for testing because CrUX\/field data is a 28-day rolling average, so it takes a while to see the impact of changes.<\/p>\n\n\n\n<p>The best tool to measure CLS depends on the type of data you want (lab\/field) and whether you want it for one URL or&nbsp;many.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring CLS for a single URL<\/h3>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/blog\/pagespeed-insights\/\">Pagespeed Insights<\/a> pulls page-level field data that you can\u2019t otherwise query in the CrUX dataset. It also runs lab tests for you based on Google <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a> and gives you origin data so you can compare page performance to the entire site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring CLS for many URLs or an entire site<\/h3>\n\n\n\n<p>You can get CrUX data in Google Search Console that is bucketed into the categories of good, needs improvement, and&nbsp;poor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1437\" height=\"1490\" class=\"wp-image-161130\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1.png\" alt=\"Core Web Vitals data in Google Search Console\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1.png 1437w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1-410x425.png 410w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1-768x796.png 768w\" sizes=\"auto, (max-width: 1437px) 100vw, 1437px\"><\/figure>\n\n\n\n<p>Clicking into one of the issues gives you a breakdown of page groups that are impacted. The groups are pages with similar values that likely use the same template. You make the changes once in the template, and that will be fixed across the pages in the&nbsp;group.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1421\" height=\"1552\" class=\"wp-image-161131\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-3.png\" alt=\"Page groups for CLS issues\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-3.png 1421w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-3-389x425.png 389w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-3-768x839.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-3-1406x1536.png 1406w\" sizes=\"auto, (max-width: 1421px) 100vw, 1421px\"><\/figure>\n\n\n\n<p>If you want both lab data and field data at scale, the only way to get that is through the PageSpeed Insights API. You can connect to it easily with Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a> and get reports detailing your performance. This is free for verified sites with an <a href=\"https:\/\/ahrefs.com\/webmaster-tools\">Ahrefs Webmaster Tools<\/a> (AWT) account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"644\" class=\"wp-image-161133\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-5.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-5.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-5-680x274.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-5-768x309.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-5-1536x618.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>Note that the Core Web Vitals data shown will be determined by the user-agent you select for your crawl during the setup. If you crawl from mobile, you\u2019ll get mobile CWV values from the&nbsp;API.<\/p>\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Free tool: Check CWVs and Lighthouse metrics for desktop and mobile for up to 10 pages or websites<\/h3>\n\n\n\n<p>Here\u2019s another free tool that you can use to check up to 10 pages or websites at once to see how you compare to your competitors.<\/p>\n\n\n\n<p><strong>Setup:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter your Google PageSpeed Insights API key into the designated input field. (Learn how to generate an API key <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/get-started\">here<\/a>.)<\/li>\n\n\n\n<li>Add the URLs you want to analyze (one per&nbsp;line).<\/li>\n<\/ul>\n\n\n\n<p><strong>Run the Analysis:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201cCheck CWV\u201d<\/strong> button to start fetching metrics. A progress indicator will show the status of the requests.<\/li>\n<\/ul>\n\n\n\n<p><strong>View Results:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The results are displayed in neatly categorized scorecards:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Desktop CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Desktop CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Desktop Lighthouse<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Mobile Lighthouse<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Each metric is color-coded to show performance:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Green:<\/strong> Good<\/li>\n\n\n\n<li><strong>Yellow:<\/strong> Needs Improvement<\/li>\n\n\n\n<li><strong>Red:<\/strong> Poor<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div id=\"cwv-tool\">\n<h4 class=\"title\">Core Web Vitals Bulk Checker<\/h4>\n  <form id=\"cwv-form\">\n    <input id=\"apiKey\" required type=\"text\" placeholder=\"Enter your PageSpeed Insights API key\">\n    <textarea id=\"urls\" required placeholder=\"Enter up to 10 URLs, one per line\"><\/textarea>\n    <button type=\"button\" onclick=\"checkCWV()\">Check CWVs<\/button>\n  <\/form>\n  <div id=\"progress\"><\/div>\n  <div id=\"results\"><\/div>\n<\/div>\n\n<script>\nasync function checkCWV() {\n  const apiKey = document.getElementById(\"apiKey\").value.trim();\n  const urls = document.getElementById(\"urls\").value.split(\"\\n\").map(url => url.trim()).filter(url => url);\n  const progress = document.getElementById(\"progress\");\n  const resultsContainer = document.getElementById(\"results\");\n\n  if (!apiKey || urls.length === 0) {\n    alert(\"Please provide an API key and at least one URL.\");\n    return;\n  }\n\n  progress.textContent = \"Fetching data...\";\n  resultsContainer.innerHTML = \"\";\n\n  const results = {\n    desktopPageCWV: [],\n    desktopOriginCWV: [],\n    desktopLighthouse: [],\n    mobilePageCWV: [],\n    mobileOriginCWV: [],\n    mobileLighthouse: []\n  };\n\n  for (const [index, url] of urls.entries()) {\n    progress.textContent = `Processing ${index + 1} of ${urls.length}...`;\n    try {\n      const desktopData = await fetchData(url, \"desktop\", apiKey);\n      const mobileData = await fetchData(url, \"mobile\", apiKey);\n\n      results.desktopPageCWV.push({ url, metrics: parseCWVMetrics(desktopData?.loadingExperience) });\n      results.desktopOriginCWV.push({ url, metrics: parseCWVMetrics(desktopData?.originLoadingExperience) });\n      results.desktopLighthouse.push({ url, metrics: parseLighthouseMetrics(desktopData?.lighthouseResult) });\n\n      results.mobilePageCWV.push({ url, metrics: parseCWVMetrics(mobileData?.loadingExperience) });\n      results.mobileOriginCWV.push({ url, metrics: parseCWVMetrics(mobileData?.originLoadingExperience) });\n      results.mobileLighthouse.push({ url, metrics: parseLighthouseMetrics(mobileData?.lighthouseResult) });\n    } catch (error) {\n      console.error(`Error fetching data for ${url}: ${error.message}`);\n    }\n  }\n\n  progress.textContent = \"Rendering results...\";\n  renderResults(results);\n  progress.textContent = \"Completed!\";\n}\n\nasync function fetchData(url, strategy, apiKey) {\n  const response = await fetch(`https:\/\/www.googleapis.com\/pagespeedonline\/v5\/runPagespeed?url=${encodeURIComponent(url)}&strategy=${strategy}&key=${apiKey}`);\n  if (!response.ok) throw new Error(`Failed to fetch data for ${url}`);\n  return await response.json();\n}\n\nfunction parseCWVMetrics(data) {\n  const metrics = data?.metrics || {};\n  return {\n    LCP: applyColorBox(formatMetric(metrics[\"LARGEST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"LCP\"),\n    INP: applyColorBox(formatMetric(metrics[\"INTERACTION_TO_NEXT_PAINT\"]?.percentile, \"ms\"), \"INP\"),\n    CLS: applyColorBox((metrics[\"CUMULATIVE_LAYOUT_SHIFT_SCORE\"]?.percentile \/ 100).toFixed(2), \"CLS\"),\n    FCP: applyColorBox(formatMetric(metrics[\"FIRST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"FCP\"),\n    TTFB: applyColorBox(formatMetric(metrics[\"EXPERIMENTAL_TIME_TO_FIRST_BYTE\"]?.percentile, \"ms\"), \"TTFB\")\n  };\n}\n\nfunction parseLighthouseMetrics(data) {\n  if (!data) return {};\n  return {\n    Score: applyColorBox(Math.round(data.categories?.performance?.score * 100) || \"N\/A\", \"Score\"),\n    FCP: applyColorBox(formatMetric(data.audits?.[\"first-contentful-paint\"]?.numericValue, \"ms\"), \"FCP\"),\n    LCP: applyColorBox(formatMetric(data.audits?.[\"largest-contentful-paint\"]?.numericValue, \"ms\"), \"LCP\"),\n    CLS: applyColorBox(data.audits?.[\"cumulative-layout-shift\"]?.numericValue?.toFixed(3) || \"N\/A\", \"CLS\"),\n    TBT: applyColorBox(formatMetric(data.audits?.[\"total-blocking-time\"]?.numericValue, \"ms\"), \"TBT\"),\n    \"Speed Index\": applyColorBox(formatMetric(data.audits?.[\"speed-index\"]?.numericValue, \"ms\"), \"Speed Index\")\n  };\n}\n\nfunction formatMetric(value, unit) {\n  if (value === undefined || value === null || isNaN(value)) return \"N\/A\";\n  const numericValue = unit === \"ms\" ? value \/ 1000 : value;\n  return `${numericValue.toFixed(2)}s`;\n}\n\nconst thresholds = {\n  LCP: [2.5, 4], \/\/ Thresholds in seconds\n  INP: [0.2, 0.5], \/\/ INP in seconds\n  CLS: [0.1, 0.25], \/\/ CLS is unitless\n  FCP: [1.8, 3],\n  TTFB: [0.8, 1.8],\n  TBT: [0.2, 0.6], \/\/ TBT in seconds\n  \"Speed Index\": [3.4, 5.8],\n  Score: [90, 50] \/\/ Updated: 90+ (good), 50-89 (needs improvement), <50 (poor)\n};\n\nfunction applyColorBox(value, metricType) {\n  if (value === \"N\/A\") return `<div class=\"box neutral\">${value}<\/div>`;\n\n  const [good, moderate] = thresholds[metricType] || [Infinity, Infinity];\n  const numericValue = parseFloat(value);\n\n  let colorClass = \"poor\"; \/\/ Default to poor\n  \n  if (metricType === \"Score\") {\n    \/\/ Lighthouse score logic: good is green (90+), needs improvement is orange (50-89), poor is red (<50)\n    if (numericValue >= good) colorClass = \"good\";\n    else if (numericValue >= moderate) colorClass = \"moderate\";\n  } else {\n    \/\/ Other metrics: good is green (lower is better), needs improvement is orange, poor is red\n    if (numericValue <= good) colorClass = \"good\"; \/\/ Green for good (lower is better)\n    else if (numericValue <= moderate) colorClass = \"moderate\"; \/\/ Orange for needs improvement\n  }\n\n  return `<div class=\"box ${colorClass}\">${value}<\/div>`;\n}\n\nfunction renderResults(results) {\n  const resultsContainer = document.getElementById(\"results\");\n  resultsContainer.innerHTML = \"\";\n\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Page)\", results.desktopPageCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Origin)\", results.desktopOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop Lighthouse\", results.desktopLighthouse);\n\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Page)\", results.mobilePageCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Origin)\", results.mobileOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile Lighthouse\", results.mobileLighthouse);\n}\n\nfunction renderTable(title, data) {\n  if (data.length === 0) return \"\";\n\n  let table = `<h2>${title}<\/h2><div class=\"table-container\"><table><thead><tr><th>URL<\/th>`;\n  const sampleMetrics = data[0]?.metrics || {};\n  for (const metric in sampleMetrics) {\n    table += `<th>${metric}<\/th>`;\n  }\n  table += `<\/tr><\/thead><tbody>`;\n\n  for (const item of data) {\n    table += `<tr><td>${item.url}<\/td>`;\n    for (const metric in item.metrics) {\n      table += `<td>${item.metrics[metric]}<\/td>`;\n    }\n    table += `<\/tr>`;\n  }\n\n  table += `<\/tbody><\/table><\/div>`;\n  return table;\n}\n<\/script>\n\n<style>\n#cwv-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: stretch;\n}\n\n#apiKey,\n#urls {\n  font-size: 16px;\n  padding: 12px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n#urls {\n  min-height: 150px;\n  resize: vertical;\n}\n\nbutton {\n  font-size: 18px;\n  padding: 12px;\n  background-color: #007bff;\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #0056b3;\n}\n\n#cwv-tool {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f9f9f9;\n  border-radius: 10px;\n  font-family: Arial, sans-serif;\n}\n\n.title {\n  text-align: center;\n  font-size: 24px;\n}\n\n.box {\n  padding: 5px;\n  border-radius: 4px;\n  display: inline-block;\n  width: 100%;\n}\n\n.box.good { background-color: #d4edda; color: #155724; }\n.box.moderate { background-color: #fff3cd; color: #856404; }\n.box.poor { background-color: #f8d7da; color: #721c24; }\n.box.neutral { background-color: #e2e3e5; color: #6c757d; }\n\n.table-container { overflow-x: auto; margin: 20px 0; }\ntable { border-collapse: collapse; width: 100%; }\nth, td { border: 1px solid #ddd; padding: 8px; text-align: center; }\nth { background-color: #f4f4f4; font-weight: bold; }\n<\/style>\n\n\n<p>This is an example output to show you how the speed scorecards look. You can use it as a standalone tool: <a href=\"https:\/\/ahrefs.com\/blog\/bulk-pagespeed-insights-website-speed-test\/\">website speed test<\/a>.<\/p>\n\n\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg\" alt=\"output of the bulk page speed test tool showing cwv and lighthouse desktop and mobile metrics\" width=\"548\" height=\"2560\" class=\"alignnone size-full wp-image-184636\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg 548w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-91x425.jpg 91w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-329x1536.jpg 329w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\">\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to improve CLS\" data-section=\"how-to-improve-cls\">\n\n\n\n<h2 class=\"wp-block-heading\">How to improve CLS<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>In <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a>, if you select CLS in the \u201cDiagnostics\u201d section, you can see all the related issues like \u201cAvoid large layout shifts.\u201d These are the issues you\u2019ll want to&nbsp;solve.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"944\" class=\"wp-image-161134\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-3.png\" alt=\"Issues related to CLS in Google PageSpeed Insights\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-3.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-3-680x321.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-3-768x363.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-3-1536x725.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>In most cases, to optimize CLS, you\u2019re going to be working on issues related to images, fonts or, possibly, injected content. Let\u2019s look at each&nbsp;case.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Reserve space for images, videos, iframes<\/h3>\n\n\n\n<p>For images, what you need to do is reserve the space so that there\u2019s no shift and the image simply fills that space. This can mean setting the height and width of images by specifying them within the &lt;img&gt; tag like&nbsp;this:<\/p>\n\n\n\n<p><code>&lt;img src=\u201ccat.jpg\" width=\"640\" height=\"360\" alt=\u201ccat with string\" \/&gt;<\/code><\/p>\n\n\n\n<p>For responsive images, you need to use a srcset like&nbsp;this:<\/p>\n\n\n\n<p><code>&lt;img<\/code><\/p>\n\n\n\n<p><code>width=\"1000\"<\/code><\/p>\n\n\n\n<p><code>height=\"1000\"<\/code><\/p>\n\n\n\n<p><code>src=\"puppy-1000.jpg\"<\/code><\/p>\n\n\n\n<p><code>srcset=\"puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w\"<\/code><\/p>\n\n\n\n<p><code>alt=\"Puppy with balloons\" \/&gt;<\/code><\/p>\n\n\n\n<p>You\u2019ll also want to reserve the space needed for things like videos and iframes. For dynamic content like ads, you will want to reserve the max space needed.<\/p>\n\n\n\n<p>There\u2019s also a relatively new CSS property called aspect-ratio that will allow you to set a dynamic width based on the screen size, and the browser will calculate the appropriate height for&nbsp;you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Optimize fonts<\/h3>\n\n\n\n<p>For fonts, the goal is to get the font on the screen as fast as possible and to not swap it with another font. When a font is loaded or changed, you end up with a noticeable shift like a Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).<\/p>\n\n\n\n<p>If you can use a system font, do that. There\u2019s nothing to load, so there are no delays or changes that will cause a&nbsp;shift.<\/p>\n\n\n\n<p>If you have to use a custom font, the current best method for minimizing CLS is to combine&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Link_types\/preload\">&lt;link rel=\u201dpreload\u201d&gt;<\/a> (which is going to try to grab your font as soon as possible) and font-display: optional (which is going to give your font a small window of time to&nbsp;load).&nbsp;<\/p>\n\n\n\n<p>If the font doesn\u2019t make it in time, the initial page load will simply show a default font. Your custom font will then be cached and show up on subsequent page&nbsp;loads.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Use animations that don\u2019t trigger layout changes<\/h3>\n\n\n\n<p>There are some CSS property values that trigger layout shifts, such as \u201cbox-shadow,\u201d \u201cbox-sizing,\u201d \u201ctop,\u201d \u201cleft,\u201d and more that should not be animated. Instead, you\u2019ll want to use \u201ctransform\u201d animations to avoid layout shifts.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Make sure your pages are eligible for bfcache<\/h3>\n\n\n\n<p>The back\/forward cache keeps pages in the browser cache. It allows for instant loading of a page that was already loaded, meaning no layout shifts will happen.&nbsp;<\/p>\n\n\n\n<p>There\u2019s a decent amount to this one optimization. The main strategies are listed below, and you can read more about them <a href=\"https:\/\/web.dev\/bfcache\/#optimize-your-pages-for-bfcache\">here<\/a>.<\/p>\n\n\n\n<p>Main strategies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Never use the unload event<\/li>\n\n\n\n<li>Minimize use of Cache-Control: no-store<\/li>\n\n\n\n<li>Update stale or sensitive data after bfcache restore<\/li>\n\n\n\n<li>Avoid window.opener references<\/li>\n\n\n\n<li>Always close open connections before the user navigates away<\/li>\n\n\n\n<li>Test to ensure your pages are cacheable<\/li>\n<\/ul>\n\n\n\n<div class=\"further-reading\"><div class=\"reading-title\">Further reading<\/div><div class=\"reading-content\">\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/gist.github.com\/paulirish\/5d52fb081b3570c81e3a\">What Forces Layout\/Reflow<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/gist.github.com\/paulirish\/5d52fb081b3570c81e3a\"> Paul&nbsp;Irish<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/optimize-cls\/\">Optimize Cumulative Layout Shift<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/web.dev\/optimize-cls\/\"> web.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/debugging-layout-shifts\/\">Debugging Layout Shifts<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/web.dev\/debugging-layout-shifts\/\"> web.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=zIJuY-JCjqw\">Understanding Cumulative Layout Shift<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/www.youtube.com\/watch?v=zIJuY-JCjqw\"> Annie Sullivan (video)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simonhearne.com\/2021\/layout-shifts-webfonts\">How to Avoid Layout Shifts Caused by Web Fonts<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/simonhearne.com\/2021\/layout-shifts-webfonts\"> Simon Hearne<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/cls-web-tooling\/\">Evolving Cumulative Layout Shift in Web Tooling<\/a><\/li>\n<\/ul>\n\n\n\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>Since CLS was introduced, we\u2019ve already seen innovations like bfcache and CSS aspect-ratio that help with the issue. I expect that we\u2019ll see more innovation and more new ways to prevent layout shifts in the future.&nbsp;<\/p>\n\n\n\n<p>If you have any questions, message me <a href=\"https:\/\/twitter.com\/patrickstox\">on Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CLS is calculated during the five-second window where the most shifting occurs. Here\u2019s how it\u2019s measured: layout shift score = impact fraction x distance fraction Or said in a more understandable way, it\u2019s: layout shift score = % of the<span class=\"ellipsis\">\u2026<\/span><\/p>\n<div class=\"read-more\">Read more \u203a<\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":150,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[329],"tags":[],"coauthors":[377],"class_list":["post-161111","post","type-post","status-publish","format-standard","hentry","category-technical-seo","odd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What Is Cumulative Layout Shift (CLS) &amp; How To Improve It<\/title>\n<meta name=\"description\" content=\"Cumulative Layout Shift measures the visual stability of a page as it loads, and it&#039;s a CWV metric Google uses.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It\" \/>\n<meta property=\"og:description\" content=\"Learn all about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Blog by Ahrefs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ahrefs\/\" \/>\n<meta property=\"article:author\" content=\"patrickstox\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-14T01:45:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-22T23:30:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1246\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Patrick Stox\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn all about it.\" \/>\n<meta name=\"twitter:creator\" content=\"@patrickstox\" \/>\n<meta name=\"twitter:site\" content=\"@ahrefs\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/\"},\"author\":{\"name\":\"Patrick Stox\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\"},\"headline\":\"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It\",\"datePublished\":\"2023-06-14T01:45:03+00:00\",\"dateModified\":\"2025-01-22T23:30:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/\"},\"wordCount\":1674,\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/what-is-cumulative-layout-shift-cls-by-patrick-stox-technical-seo.jpg\",\"articleSection\":[\"Technical SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/\",\"name\":\"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image10.gif\",\"datePublished\":\"2023-06-14T01:45:03+00:00\",\"dateModified\":\"2025-01-22T23:30:09+00:00\",\"description\":\"Cumulative Layout Shift measures the visual stability of a page as it loads, and it's a CWV metric Google uses.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/cumulative-layout-shift-cls\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image10.gif\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/image10.gif\",\"width\":1246,\"height\":680},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"name\":\"SEO Blog by Ahrefs\",\"description\":\"Link Building Strategies &amp; SEO Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\",\"name\":\"Ahrefs\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"width\":2048,\"height\":768,\"caption\":\"Ahrefs\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Ahrefs\\\/\",\"https:\\\/\\\/x.com\\\/ahrefs\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ahrefs\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/ahrefscom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\",\"name\":\"Patrick Stox\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"caption\":\"Patrick Stox\"},\"description\":\"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \\\/r\\\/TechSEO on Reddit.\",\"sameAs\":[\"https:\\\/\\\/patrickstox.com\\\/\",\"patrickstox\",\"https:\\\/\\\/x.com\\\/patrickstox\"],\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/author\\\/patrick-stox\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It","description":"Cumulative Layout Shift measures the visual stability of a page as it loads, and it's a CWV metric Google uses.","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:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/","og_locale":"en_US","og_type":"article","og_title":"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It","og_description":"Learn all about it.","og_url":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/","og_site_name":"SEO Blog by Ahrefs","article_publisher":"https:\/\/www.facebook.com\/Ahrefs\/","article_author":"patrickstox","article_published_time":"2023-06-14T01:45:03+00:00","article_modified_time":"2025-01-22T23:30:09+00:00","og_image":[{"width":1246,"height":680,"url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif","type":"image\/gif"}],"author":"Patrick Stox","twitter_card":"summary_large_image","twitter_description":"Learn all about it.","twitter_creator":"@patrickstox","twitter_site":"@ahrefs","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/#article","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/"},"author":{"name":"Patrick Stox","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067"},"headline":"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It","datePublished":"2023-06-14T01:45:03+00:00","dateModified":"2025-01-22T23:30:09+00:00","mainEntityOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/"},"wordCount":1674,"publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/what-is-cumulative-layout-shift-cls-by-patrick-stox-technical-seo.jpg","articleSection":["Technical SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/","url":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/","name":"What Is Cumulative Layout Shift (CLS) &amp; How To Improve It","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/#primaryimage"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif","datePublished":"2023-06-14T01:45:03+00:00","dateModified":"2025-01-22T23:30:09+00:00","description":"Cumulative Layout Shift measures the visual stability of a page as it loads, and it's a CWV metric Google uses.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/cumulative-layout-shift-cls\/#primaryimage","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10.gif","width":1246,"height":680},{"@type":"WebSite","@id":"https:\/\/ahrefs.com\/blog\/#website","url":"https:\/\/ahrefs.com\/blog\/","name":"SEO Blog by Ahrefs","description":"Link Building Strategies &amp; SEO Tips","publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahrefs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ahrefs.com\/blog\/#organization","name":"Ahrefs","url":"https:\/\/ahrefs.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","width":2048,"height":768,"caption":"Ahrefs"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Ahrefs\/","https:\/\/x.com\/ahrefs","https:\/\/www.linkedin.com\/company\/ahrefs\/","https:\/\/www.youtube.com\/c\/ahrefscom"]},{"@type":"Person","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067","name":"Patrick Stox","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","caption":"Patrick Stox"},"description":"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \/r\/TechSEO on Reddit.","sameAs":["https:\/\/patrickstox.com\/","patrickstox","https:\/\/x.com\/patrickstox"],"url":"https:\/\/ahrefs.com\/blog\/author\/patrick-stox\/"}]}},"as_json":null,"json_reviewers":[114],"_links":{"self":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/users\/150"}],"replies":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/comments?post=161111"}],"version-history":[{"count":0,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161111\/revisions"}],"wp:attachment":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/media?parent=161111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/categories?post=161111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/tags?post=161111"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/coauthors?post=161111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}