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

• 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