Performance Optimization

The Core Web Vitals Playbook: Scoring 95+ Mobile Lighthouse Scores on Next.js

Javed ChauhanBy Javed Chauhan (Founder & Lead Software Engineer)
July 31, 2026
4 min read

The Core Web Vitals Playbook: Scoring 95+ Mobile Lighthouse Scores on Next.js

Page performance is no longer a technical luxury—it is a core business requirement. Google's page experience signals make site speed an official search engine ranking factor. For e-commerce stores and SaaS applications, speed directly affects conversion rates: a 100ms improvement in site load speed can boost conversions by up to 8%.

Next.js provides an excellent suite of performance features out of the box, including Static Site Generation (SSG), Incremental Static Regeneration (ISR), and image optimization. However, developers can still write code that triggers slow bundle loading, cumulative layout shifts, and blocked execution threads.

Let's dive into the practical playbook to optimize your Next.js application to score a perfect 95+ on Google Lighthouse Mobile tests.

---

1. Optimize Largest Contentful Paint (LCP)

LCP measures the time it takes for the largest visual block (usually a hero image or headline text) to render on the screen.

Optimize Hero Images By default, browser engines delay image downloads until they parse the document stylesheet. In Next.js, use the native `next/image` component and append the `priority` attribute to hero images:

export default function HeroSection() { return ( <div className="relative h-[500px] w-full"> <Image src="/hero-banner.png" alt="Core Web Vitals Banner" fill priority // Instantly preloads this image sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" /> </div> ); } ```

Adding `priority` injects a `<link rel="preload" as="image" ...>` tag into the HTML document header, forcing the browser to fetch the image immediately.

---

2. Eliminate Cumulative Layout Shift (CLS)

CLS measures how much elements shift on the page during the render process. Shifting layouts lead to accidental clicks and frustrating user experiences.

Set Exact Dimensions on Dynamic Elements Always declare precise aspect ratios or height placeholders for images, web advertisements, and dashboard modules. The native `next/image` component forces you to declare either `width` and `height`, or use `fill` within a relative container.

// Good: Reserves 800x400 layout space instantly
<Image
  src="/product-detail.png"
  width={800}
  height={400}
  alt="Product Detail"
/>

Reserve Space for Dynamic Components If you dynamically load clientside modules (like interactive search inputs or charts), use a skeleton loader containing an exact height matching the final rendered element:

const DynamicChart = dynamic(() => import('@/components/dashboard-chart'), { loading: () => <div className="h-[350px] w-full bg-muted animate-pulse rounded-xl" />, }); ```

---

3. Boost Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) as a core metric, measuring how fast a page responds when a user interacts with it (e.g. clicking buttons or expanding menus).

Defer Non-Critical Scripts Third-party tracking scripts (Google Tag Manager, Facebook Pixel, Intercom) run massive javascript bundles that block the browser's main execution thread. Use the Next.js `Script` component with the `lazyOnload` strategy:

export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://example.com/analytics.js" strategy="lazyOnload" // Loads after the page becomes interactive /> </body> </html> ); } ```

Minimize Javascript Bundle Weight Avoid importing large packages on server-rendered layouts if they are only needed during user interactions. Use dynamic imports to split code bundle weight:

import { useState } from 'react'; import dynamic from 'next/dynamic';

const PDFViewer = dynamic(() => import('@/components/pdf-viewer'), { ssr: false });

export default function DocumentPortal() { const [showPdf, setShowPdf] = useState(false);

return ( <div> <button onClick={() => setShowPdf(true)}>View Invoice</button> {showPdf && <PDFViewer />} </div> ); } ```

---

4. Leverage Edge Cache Routing

Static content is faster than server-rendered layouts. Next.js supports Incremental Static Regeneration (ISR), which builds pages statically and updates them in the background on edge servers.

Configure caching rules in your routing configs:

// src/app/blog/page.tsx

export default async function BlogIndex() { // Database data is cached globally at the Edge CDN const posts = await fetchBlogs(); return ( <main> {posts.map(post => <BlogCard key={post.id} data={post} />)} </main> ); } ```

By caching pages at edge locations (like Vercel or Cloudflare CDN), your visitors receive fully rendered HTML in less than 50 milliseconds, bypassing database queries entirely.

Technologies covered in this article:

Next.jsVercel CDNTailwind CSSWebP Images

Frequently Asked Questions

Why are Core Web Vitals important for SEO?

Google uses page loading metrics as official ranking signals. Speed improvements directly correlate with better search visibility and lower bounce rates.

How do you fix Cumulative Layout Shift (CLS) in Next.js?

Use the Next.js <Image> component which requires width and height aspects, reserving layout space and preventing sudden shifting during resource loads.