Core Web Vitals Optimization in Production
Google's CWV thresholds—LCP under 2.5s, INP under 200ms, CLS under 0.1—correlate with conversion, not just rankings. Field data in CrUX beats lab Lighthouse when prioritizing fixes.
Largest Contentful Paint (LCP)
Usually hero image or H1 block. Fix: preload LCP image, serve WebP/AVIF, CDN edge caching, eliminate render-blocking CSS above fold. Server TTFB over 600ms kills LCP before frontend optimization matters.
Interaction to Next Paint (INP)
Replaced FID—measures responsiveness across whole session. Long JavaScript tasks block input. Break up work with requestIdleCallback, defer third-party scripts (chat widgets, analytics), audit event handlers on scroll.
Cumulative Layout Shift (CLS)
- Width/height attributes on images and embeds
- Reserve space for ad slots and cookie banners
- Load web fonts with
font-display: swapand size-adjust
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">One SaaS landing page improved trial signups 11% after CLS fix on pricing toggle alone—layout jump was killing trust.
Prioritization Framework
Fix URLs with highest traffic AND worst p75 field CWV first. One homepage improvement beats fifty long-tail blog tweaks for business impact. Use CrUX breakdown by device—mobile usually needs separate fixes from desktop lab scores.
Set performance budgets in CI: fail build if JS bundle grows 10% without approval. Lighthouse CI on PRs catches regressions before merge, not after release when marketing adds another tracking pixel.
Collaborate with design on animation—parallax and scroll-jacking destroy INP. Micro-interactions should use CSS transforms, not layout-triggering properties like width and top.
Share CWV dashboards with design and marketing—not only engineering—because hero image choices and carousel autoplay directly move LCP and INP. Cross-functional visibility prevents reintroducing regressions next quarter when campaigns refresh creative assets.
Regression Prevention
Establish performance champions in each squad reviewing CWV impact in sprint planning same as accessibility review. New carousel component without lazy load should fail design review checklist before engineering estimates story points.
Historical CWV tracking in data warehouse correlates with conversion—present quarterly to leadership tying 200ms INP improvement to measurable signup rate lift where A/B test data exists, securing ongoing optimization budget.
Block releases when bundle size or startup regressions exceed thresholds in CI—compare to previous release, not arbitrary blog-post targets. Share CWV trends with design when carousels and hero videos ship; creative choices move LCP and INP directly.
Server-Side Contribution
TTFB above 800ms cannot be fixed client-side alone—investigate database query count per SSR request. Laravel Debugbar in staging reveals N+1 quickly. Edge caching HTML fragments for anonymous users drops TTFB dramatically when full page static generation is not yet feasible.
Register site in Google Search Console and Bing Webmaster Tools—both report CWV field data free. Compare segment by device type; desktop-green mobile-red is common pattern prioritizing mobile fixes first for most consumer and prosumer SaaS products today.
Fix layout shift from cookie consent banners by reserving bottom bar height in CSS before script loads—GDPR compliance and CLS pass not mutually exclusive with thoughtful implementation delayed script injection after LCP common pattern.
Prioritize fixes on templates driving 80% of organic traffic—global header optimization beats perfecting long-tail blog layout nobody visits from search yet anyway resource allocation basic Pareto principle applies performance work too.
Export a one-slide monthly p75 trend for LCP, INP, and CLS to leadership. Visible trends fund optimization work better than engineers complaining abstractly about JavaScript bundle size without shared metrics.
Prioritize by Revenue
Fix CLS on pricing before perfecting a low-traffic blog layout. Export monthly p75 LCP, INP, and CLS to leadership—one slide, three numbers, trend arrow.
Pull field data from Chrome UX Report API into Grafana so regressions show up before Search Console monthly reports lag behind.
Frequently Asked Questions
Lab vs field CWV?
Field (RUM) reflects real users—optimize for p75 field metrics. Lab helps debug locally.
Does INP affect SEO?
Yes as part of CWV ranking signal. Poor INP also increases bounce on mobile.
Third-party scripts?
Load after consent and interaction. Tag managers often account for 40%+ of main thread blocking.