Core Web Vitals & Conversion
How Core Web Vitals (LCP, CLS, INP) affect conversion, and how to fix them in React, Next.js, and other modern frameworks.
- Does Cumulative Layout Shift Hurt Conversion? — Yes — layout shift causes mis-clicks and erodes trust, both of which cost conversions. web.dev's good CLS is under 0.1. Here's the mechanism and how to measure your own in PostHog.
- How to Fix Cumulative Layout Shift in React — Fix CLS in React: set width and height on images, reserve space for async content with a min-height, and use font-display swap. Get under web.dev's 0.1 good CLS threshold.
- How to Fix a Slow LCP on a Next.js Landing Page — Fix slow LCP in Next.js: load the hero with next/image priority, preload the font with next/font, and keep the hero in a server component. Get under web.dev's 2.5s good threshold.
- Does INP Affect Conversion on a Landing Page? — INP measures how fast your page responds to taps and clicks. A sluggish CTA feels broken and costs conversions. web.dev's good INP is under 200ms. Here's how to measure yours in PostHog.
- Does LCP Affect Conversion Rate? What the Evidence Shows — LCP affects conversion because a slow main paint delays when visitors can read and act. web.dev's 'good' LCP is under 2.5s. Here's the mechanism and how to measure the impact in PostHog.