Core Web Vitals with Next.js: performance that converts in PR
LCP, INP, and CLS on Next.js sites deployed from PR. Optimizations Smashing Magazine recommends and clients notice.
Agencies in San Juan and Miami build Next.js sites for Puerto Rico clients — hotels, clinics, professional services — but deploy without measuring Core Web Vitals. Smashing Magazine has insisted for years: performance is UX and SEO; Google uses LCP, INP, and CLS as ranking signals. A slow site on 4G mobile in Condado loses leads despite pretty design.
LCP in Next.js: use next/image with hero priority, preload critical fonts, avoid heavy above-the-fold sliders. App Router enables streaming — wrap slow components in Suspense with skeleton. For Vercel hosting from PR, edge caching helps; for AWS CloudFront, configure explicit cache policies on static routes.
INP (Interaction to Next Paint) replaced FID — reduce client JavaScript, use Server Components where possible, split long handlers. Bruce Schneier does not write about Web Vitals, but minimum surface principle applies: less JS is less XSS and better INP. Audit bundles with @next/bundle-analyzer quarterly.
CLS: explicit dimensions on images and embeds, do not inject banners without reserved space. Fonts with font-display: swap and size-adjust. OWASP does not cover CLS, but stable layout reduces bounce on contact forms — directly revenue for tourism SMBs.
Measure field data: Vercel Analytics, Google Search Console, or RUM with Sentry. Pragmatic target for PR corporate sites: LCP < 2.5s at p75 Caribbean mobile. Performance is not a launch sprint; it is discipline on every PR touching images or scripts.
Operations and execution — connecting strategy with what the team ships every week.
