This 600x400px gradient is the largest contentful element on the page. The browser will report its render time as the LCP value. On a real site, this would typically be a hero image, a large heading, or a prominent video poster.
After 1.5 seconds, a "late-loading" banner will appear above the blue box, pushing it down and causing a layout shift. This simulates a common CLS problem: ads, cookie banners, or dynamically injected content that shifts existing page content.
Click these buttons to generate interactions with different processing times. The "fast" button does minimal work. The "medium" button loops 5 million iterations. The "slow" button loops 50 million iterations, blocking the main thread and creating a measurably high INP value.
Real-time log of vital updates from the collector: