Reduce ad-related layout shift
Stay organized with collections
Save and categorize content based on your preferences.
Overview
Cumulative Layout Shift measures the total amount of user-visible layout shift
using the Layout Instability API
by summing the layout shift score for
all layout shifts where the ad iframe shifted or caused the layout shift.
Recommendations
This metric is not indicative of a specific issue. It should be used to help
identify areas for improvement and track that improvement over time.
To avoid layout shift, it's important to set sizes for ad elements before the
ad tag loads. This can be difficult or impossible to do perfectly—especially for
ad slots that accept dynamically sized ads—but there are best practices you can
follow to minimize layout shift in most cases. For more information, see the
guide to minimizing layout shift
at the GPT developer site.
Cumulative Layout Shift (CLS)
Optimize Cumulative Layout Shift
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-06-26 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-06-26 UTC."],[[["\u003cp\u003eCumulative Layout Shift (CLS) quantifies the total visual instability caused by ad iframes shifting or inducing layout changes, using the Layout Instability API and layout shift scores.\u003c/p\u003e\n"],["\u003cp\u003eThis metric helps pinpoint areas for improvement and track progress rather than diagnosing specific issues.\u003c/p\u003e\n"],["\u003cp\u003eMinimizing layout shift is crucial and involves pre-setting ad element sizes, though achieving perfection is challenging, especially with dynamic ads.\u003c/p\u003e\n"],["\u003cp\u003eRefer to the GPT developer guide for best practices in minimizing layout shift for most scenarios.\u003c/p\u003e\n"]]],["Cumulative Layout Shift (CLS) measures user-visible layout shifts, specifically those caused by or involving ad iframes. It uses the Layout Instability API and sums the layout shift score. Recommendations include setting sizes for ad elements before loading to minimize shifts. While perfect prevention is difficult, especially for dynamically sized ads, best practices are suggested. This metric helps track improvements, not pinpoint issues. Resources are available for further optimization and guidance.\n"],null,["# Reduce ad-related layout shift\n\nOverview\n--------\n\nCumulative Layout Shift measures the total amount of user-visible layout shift\nusing the [Layout Instability API](https://wicg.github.io/layout-instability/)\nby summing the [layout shift score](https://web.dev/cls/#layout-shift-score) for\nall layout shifts where the ad iframe shifted or caused the layout shift.\n\nRecommendations\n---------------\n\nThis metric is not indicative of a specific issue. It should be used to help\nidentify areas for improvement and track that improvement over time.\n\nTo avoid layout shift, it's important to set sizes for ad elements before the\nad tag loads. This can be difficult or impossible to do perfectly---especially for\nad slots that accept dynamically sized ads---but there are best practices you can\nfollow to minimize layout shift in most cases. For more information, see the\n[guide to minimizing layout shift](https://developers.google.com/publisher-tag/guides/minimize-layout-shift)\nat the GPT developer site.\n\nMore information\n----------------\n\n[Cumulative Layout Shift (CLS)](https://web.dev/cls/)\n\n[Optimize Cumulative Layout Shift](https://web.dev/optimize-cls/) \n[View audit source](https://github.com/googleads/publisher-ads-lighthouse-plugin/tree/HEAD/lighthouse-plugin-publisher-ads/audits/cumulative-ad-shift.js) [Improve this article](https://github.com/googleads/publisher-ads-lighthouse-plugin/tree/HEAD/docs/audits/cumulative-ad-shift.md) [Report an issue](https://github.com/googleads/publisher-ads-lighthouse-plugin/issues/new?labels=documentation&template=documentation-feedback.md&title=Documentation+feedback%3A+cumulative-ad-shift.md)\n\n\u003cbr /\u003e"]]
