Largest Contentful Paint is not a developer vanity metric. It is a direct input to your Cost Per Lead formula. A B2B site rendering at 4.2 seconds LCP loses an estimated 35% of conversions compared to the same traffic at 1.8 seconds — before you spend a single rand on Google Ads.
LCP: The Revenue Clock
Google defines Good LCP as ≤2.5 seconds. Poor LCP (>4.0s) triggers ranking suppression and Quality Score degradation in Google Ads. For a Johannesburg B2B operator running 5,000 monthly sessions at 3% conversion and R15,000 average deal value, a 35% conversion penalty from slow LCP equals R787,500 in monthly revenue at risk.
Revenue Loss Calculator
Estimated monthly revenue at risk: R787,500
Assumes 35% conversion drop from LCP > 2.5s (Google/CWV data).
CLS: The Trust Destroyer
Cumulative Layout Shift measures visual stability. When buttons jump as ads, fonts, or lazy-loaded images load, users misclick, abandon forms, and bounce. CLS above 0.25 is "Poor." WordPress themes with async font loading and injected ad scripts routinely fail this metric. Next.js with explicit width/height on images and font-display: swap in Tailwind eliminates layout shift at the component level.
INP: Interaction Responsiveness
Interaction to Next Paint replaced First Input Delay as a Core Web Vital. Heavy JavaScript hydration from page builders creates 200ms+ input delays on mobile. React Server Components defer client JavaScript to isolated islands — keeping INP under 200ms on mid-range Android devices common in the South African market.
Core Web Vitals Optimization Checklist
- Pre-render above-the-fold content via static generation
- Serve images in WebP/AVIF with explicit dimensions
- Eliminate render-blocking third-party scripts from critical path
- Use edge CDN (Vercel) for sub-100ms TTFB in Gauteng
- Monitor weekly in Google Search Console Experience report
Core Web Vitals optimization is web performance ROI — not a technical side project. See our development standards.