Your buyer lands on your Next.js page. Their browser fires a paint event. Above-the-fold content renders — or stalls for 4.2 seconds while your hero image loads, your custom font swaps, and three analytics scripts block the main thread. Google measures that delay as Largest Contentful Paint. It measures layout shift when your CTA button jumps 340 pixels after a web font loads. It measures Interaction to Next Paint when a user taps your nav and waits 890ms for React hydration to finish. These three metrics — LCP, CLS, INP — determine whether your site ranks or gets filtered. We re-architect your Next.js build to pass all three thresholds: server components for above-the-fold content, priority image loading, font preloading with size-adjust, deferred hydration, and bundle analysis that strips 68% of your client-side JavaScript. Your Lighthouse score ships at 100. Your Core Web Vitals pass. Your bounce rate drops because your page actually responds when someone clicks.
專案失敗的原因
我們構建的內容
Server-render above-the-fold content so LCP fires before JavaScript hydration
Preload priority images with fetchpriority and next/image optimization
Configure next/font with size-adjust to prevent font-swap layout shift
Strip unnecessary client components that block INP and delay interactivity
Defer analytics, chat widgets, and ad scripts until after Core Web Vitals measurement
Isolate third-party scripts in separate bundles so they can't break your main thread
常見問題
What Core Web Vitals scores should a Next.js site achieve?
A properly optimised Next.js site should hit LCP under 2.5 seconds, CLS under 0.1, and INP under 200ms. And honestly? With server components and Vercel Edge deployment, those aren't stretch goals -- hitting Lighthouse 95-100 on mobile is genuinely realistic. Our production sites consistently score 98-100 on desktop and 90-100 on mobile. Not cherry-picked results. Consistent ones.
Why is my Next.js site failing Core Web Vitals?
The usual suspects: client-side JavaScript blocking LCP -- swap those out for server components instead. Layout shift from dynamic content or fonts loading late gets fixed with next/font, which is pretty straightforward to drop in. Slow INP from heavy React hydration is trickier but solvable by reducing client components. And unoptimised images are low-hanging fruit -- just use next/image with the priority flag on your LCP element.
How long does a Core Web Vitals optimization project take?
For an existing Next.js site, a focused CWV engagement typically runs 2-4 weeks. We start with a diagnostic audit -- usually 3-5 days -- then move into fixes for 1-2 weeks, and verify everything against real field data from CrUX. Here's the thing about timelines: Lighthouse improvements show up within days. But CrUX field data takes 28 days to update, so don't panic if Search Console lags behind what you're seeing locally.
Do Core Web Vitals actually affect Google rankings?
Yes. Google confirmed CWV as a ranking signal back in 2021 and it's only carried more weight since. Pages that fail CWV thresholds get deprioritised in mobile search results -- that's not speculation, it's documented. But the real kicker? Poor CWV correlates directly with bounce rate. Every 100ms of additional load time costs measurable conversions. So this isn't just an SEO issue. It's a revenue issue.
Can you optimize Core Web Vitals for our existing Next.js app?
Yes -- and this is actually most of what we do. Social Animal specialises in retrofitting CWV optimisation onto existing Next.js applications. We're not going to ask you to rewrite your app. We audit your current scores, find the 3-5 changes that actually move the needle, and in most cases we're talking 30+ point improvements without touching your core architecture. If you're sitting on a Next.js site with a Lighthouse score in the 60s, there's almost certainly a faster path forward than you think.
Let's build
something together.
Whether it's a migration, a new build, or an SEO challenge — the Social Animal team would love to hear from you.