René's URL Explorer Experiment


Title: Cumulative Layout Shift (CLS)  |  Articles  |  web.dev

Open Graph Title: Cumulative Layout Shift (CLS)  |  Articles  |  web.dev

Description: This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.

Open Graph Description: This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.

Opengraph URL: https://web.dev/articles/cls

direct link

Domain: web.dev

Hey, it has json ld scripts: 
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "dateModified": "2023-04-12",
    "headline": "Cumulative Layout Shift (CLS)"
  }

  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Articles",
      "item": "https://web.dev/articles"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "Cumulative Layout Shift (CLS)",
      "item": "https://web.dev/articles/cls"
    }]
  }
google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:localeen

Links:

Skip to main content https://web.dev/articles/cls#main-content
https://web.dev/
Resources https://web.dev/explore/ai
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Articles https://web.dev/articles
AI and the web https://web.dev/explore/ai
Fast load times https://web.dev/explore/fast
Learn Core Web Vitals https://web.dev/explore/learn-core-web-vitals
Identity https://web.dev/identity
Progressive Web Apps https://web.dev/explore/progressive-web-apps
Payments https://web.dev/explore/payments
Notifications https://web.dev/explore/notifications
How to optimize INP https://web.dev/explore/how-to-optimize-inp
Network reliability https://web.dev/explore/reliable
React https://web.dev/explore/react
Animations https://web.dev/explore/animations
Mini apps https://web.dev/explore/mini-apps
Media https://web.dev/explore/media
Safe and secure https://web.dev/explore/secure
WebAssembly https://web.dev/explore/webassembly
Devices https://web.dev/explore/devices
Easily discoverable https://web.dev/explore/discoverable
Test automation https://web.dev/explore/test-automation
Angular https://web.dev/explore/angular
https://web.dev/
Resources https://web.dev/explore/ai
AI and the web https://web.dev/explore/ai
Fast load times https://web.dev/explore/fast
Learn Core Web Vitals https://web.dev/explore/learn-core-web-vitals
Identity https://web.dev/identity
Progressive Web Apps https://web.dev/explore/progressive-web-apps
Payments https://web.dev/explore/payments
Notifications https://web.dev/explore/notifications
How to optimize INP https://web.dev/explore/how-to-optimize-inp
Network reliability https://web.dev/explore/reliable
React https://web.dev/explore/react
Animations https://web.dev/explore/animations
Mini apps https://web.dev/explore/mini-apps
Media https://web.dev/explore/media
Safe and secure https://web.dev/explore/secure
WebAssembly https://web.dev/explore/webassembly
Devices https://web.dev/explore/devices
Easily discoverable https://web.dev/explore/discoverable
Test automation https://web.dev/explore/test-automation
Angular https://web.dev/explore/angular
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Web Vitalshttps://web.dev/articles/vitals
The business impact of Core Web Vitalshttps://web.dev/case-studies/vitals-business-impact
Optimizing Core Web Vitals for business decision makershttps://web.dev/articles/optimize-cwv-business
Largest Contentful Paint (LCP)https://web.dev/articles/lcp
Cumulative Layout Shift (CLS)https://web.dev/articles/cls
Interaction to Next Paint (INP)https://web.dev/articles/inp
Defining the Core Web Vitals metrics thresholdshttps://web.dev/articles/defining-core-web-vitals-thresholds
Getting started with measuring Web Vitalshttps://web.dev/articles/vitals-measurement-getting-started
Core Web Vitals workflows with Google toolshttps://web.dev/articles/vitals-tools
Best practices for measuring Web Vitals in the fieldhttps://web.dev/articles/vitals-field-measurement-best-practices
Why is CrUX data different from my RUM data?https://web.dev/articles/crux-and-rum-differences
Why lab and field data can be different (and what to do about it)https://web.dev/articles/lab-and-field-data-differences
Debug layout shiftshttps://web.dev/articles/debug-layout-shifts
Debug performance in the fieldhttps://web.dev/articles/debug-performance-in-the-field
Optimize Largest Contentful Painthttps://web.dev/articles/optimize-lcp
Optimize Cumulative Layout Shifthttps://web.dev/articles/optimize-cls
Optimize Interaction to Next Painthttps://web.dev/articles/optimize-inp
The most effective ways to improve Core Web Vitalshttps://web.dev/articles/top-cwv
Best practices for carouselshttps://web.dev/articles/carousel-best-practices
Best practices for cookie noticeshttps://web.dev/articles/cookie-notice-best-practices
Best practices for fontshttps://web.dev/articles/font-best-practices
Best practices for tags and tag managershttps://web.dev/articles/tag-best-practices
Best practices for using third-party embedshttps://web.dev/articles/embed-best-practices
Infinite scroll without layout shiftshttps://addyosmani.com/blog/infinite-scroll-without-layout-shifts/
CSS for Web Vitalshttps://web.dev/articles/css-web-vitals
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Home https://web.dev/
Articles https://web.dev/articles
Resources https://web.dev/explore/ai
Learn Core Web Vitals https://web.dev/explore/learn-core-web-vitals
X https://twitter.com/bibydigital
GitHub https://github.com/mihajlija
Homepage https://mihajlija.github.io/
X https://twitter.com/philwalton
GitHub https://github.com/philipwalton
LinkedIn https://www.linkedin.com/in/waltonphilip
Mastodon https://toot.cafe/@philipwalton
Bluesky https://bsky.app/profile/philipwalton.com
Homepage https://philipwalton.com/
visual stabilityhttps://web.dev/articles/user-centric-performance-metrics#types_of_metrics
delightfulhttps://web.dev/articles/user-centric-performance-metrics#defining_metrics
https://web.dev/newsletter?nl_cta=true
unexpectedhttps://web.dev/articles/cls#expected_vs_unexpected_layout_shifts
layout shift scoreshttps://web.dev/articles/cls#layout_shift_score
session windowhttps://web.dev/blog/evolving-cls#why_a_session_window
Evolving Cumulative Layout Shift in web toolinghttps://web.dev/articles/cls-web-tooling
Defining the Core Web Vitals metrics thresholdshttps://web.dev/articles/defining-core-web-vitals-thresholds
Layout Instability APIhttps://github.com/WICG/layout-instability
writing modehttps://developer.mozilla.org/docs/Web/CSS/writing-mode
impact fractionhttps://github.com/WICG/layout-instability#Impact-Fraction
hadRecentInputhttps://wicg.github.io/layout-instability/#dom-layoutshift-hadrecentinput
Layout Instability Spechttps://github.com/WICG/layout-instability#recent-input-exclusion
prefers-reduced-motionhttps://web.dev/articles/prefers-reduced-motion
transformhttps://developer.mozilla.org/docs/Web/CSS/transform
in the labhttps://web.dev/articles/user-centric-performance-metrics#lab
in the fieldhttps://web.dev/articles/user-centric-performance-metrics#in_the_field
Chrome User Experience Reporthttps://developer.chrome.com/docs/crux
PageSpeed Insightshttps://pagespeed.web.dev/
Search Console (Core Web Vitals report)https://support.google.com/webmasters/answer/9205520
web-vitals JavaScript libraryhttps://github.com/GoogleChrome/web-vitals
Chrome DevToolshttps://developer.chrome.com/docs/devtools
Lighthousehttps://developer.chrome.com/docs/lighthouse/overview
PageSpeed Insightshttps://pagespeed.web.dev/
WebPageTesthttps://webpagetest.org/
Layout Instability APIhttps://github.com/WICG/layout-instability
PerformanceObserverhttps://developer.mozilla.org/docs/Web/API/PerformanceObserver
web vitals JavaScript library source codehttps://github.com/GoogleChrome/web-vitals/blob/main/src/onCLS.ts
back/forward cachehttps://web.dev/articles/bfcache#impact_on_core_web_vitals
show as a difference between CrUX and RUMhttps://web.dev/articles/crux-and-rum-differences#iframes
aggregationhttps://github.com/WICG/layout-instability#cumulative-scores
visibilitychange eventhttps://developer.chrome.com/blog/page-lifecycle-api#event-visibilitychange
web-vitals JavaScript libraryhttps://github.com/GoogleChrome/web-vitals
limitationshttps://github.com/GoogleChrome/web-vitals#limitations
optimizing CLShttps://web.dev/articles/optimize-cls
minimizing layout shifthttps://developers.google.com/doubleclick-gpt/guides/minimize-layout-shift
Understanding Cumulative Layout Shifthttps://youtu.be/zIJuY-JCjqw
Annie Sullivanhttps://anniesullie.com/
Steve Kobeshttps://kobes.ca/
#PerfMattershttps://perfmattersconf.com/
Changeloghttps://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/cls.md
web-vitals-feedback Google grouphttps://groups.google.com/g/web-vitals-feedback
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/articles/cls

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.