Core Web Vitals

Experiments

• Featured The 1946 experiment that defined the INP threshold →

  Belgian psychologist Albert Michotte showed two shapes on a screen. Below 100ms delay people saw causality; above 200ms they saw unrelated events. Eighty years later those numbers are the Core Web Vitals INP buckets. Drag the slider — watch causality break at the threshold.

  Demo · Source

• The fetch that pays for its own handshake →

  A same-origin fetch() with credentials:"omit" is put in Chromium's privacy-mode socket pool, so it cannot reuse the connection your page arrived on. It opens a second socket and pays a full TCP+TLS handshake — and if it carries your LCP element, that is on the critical path.

  Demo · Source

• LCP Image →

  ~25 variants of an LCP image: lazy, preload, fetchpriority, AVIF/WebP, picture, video poster. Each variant records its average LCP.

  Demo · Source

• View Transitions →

  Measure how the auto view-transition affects LCP across navigations. Collects 100 samples and reports averages.

  Demo · Source

• dataLayer after paint →

  Drop-in script that defers dataLayer.push until after the next paint, so synchronous GTM work doesn't blow up INP during interactions.

  Demo · Source

Code samples