AwesomeCodeSnippets

Leveling Up Core Web Vitals in React Apps Without a Rewrite

javascript

#bundle-optimization#cls#core-web-vitals#frontend#inp#lcp#performance#react

👤admin

📅Last updated 13 days ago

Core Web Vitals are now table stakes for search visibility and user retention, especially in high-traffic finance or e‑commerce apps. Google focuses on three metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS), with recommended thresholds of 2.5s, 200ms, and 0.1 respectively.

On mature React codebases, the fastest wins usually come from targeting these directly instead of generic “optimize everything” efforts. For LCP, serve the hero content via SSR/SSG, preload the main image/font, and avoid lazy-loading above-the-fold assets. For INP, break up long tasks, aggressively code-split routes, and move rarely used logic behind dynamic imports. For CLS, always reserve space for images/ads, use font-display: swap, and avoid DOM insertions above the fold after initial paint.

Treat performance as a feature: define budgets (e.g., max JS per route), add Lighthouse/WebPageTest checks to CI, and monitor Core Web Vitals via Search Console or RUM tooling. In a 4‑year-old frontend, disciplined incremental changes like these usually outperform big-bang rewrites while still delivering tangible user-facing improvements

💻Source Code

// Example: Targeted Core Web Vitals fixes in a React/Next.js page

// app/layout.tsx (Next.js App Router) – prioritize fonts and main CSS
export const metadata = {
  title: "High-Performance Product Page",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Improve LCP: preload main font and hero image */}
        <link
          rel="preload"
          href="/fonts/Inter-regular.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
        <link
          rel="preload"
          as="image"
          href="/images/hero-product.webp"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

// app/product/[id]/page.tsx – SSR the hero, avoid layout shift, split heavy JS
import Image from "next/image";
import dynamic from "next/dynamic";

// Heavy widget (charts, rich reviews) loaded after interaction
const ReviewsWidget = dynamic(() => import("../../components/ReviewsWidget"), {
  ssr: false,
  loading: () => <p>Loading reviews…</p>,
});

// Simulated API call
async function fetchProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    // Cache for 60s, helps LCP by serving static-ish HTML
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error("Failed to fetch product");
  return res.json();
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);

  return (
    <main className="page">
      {/* Hero section – critical for LCP */}
      <section className="hero">
        {/* Reserve space explicitly → better CLS */}
        <div className="hero-media">
          <Image
            src={product.heroImageUrl}
            alt={product.name}
            width={800}
            height={600}
            priority
          />
        </div>
        <div className="hero-content">
          <h1>{product.name}</h1>
          <p>{product.subtitle}</p>
          <p className="price">${product.price}</p>
          <button className="primary">Add to cart</button>
        </div>
      </section>

      {/* Below-the-fold content can be lazy-loaded */}
      <section className="details">
        <h2>Details</h2>
        <p>{product.description}</p>
      </section>

      {/* Heavy interactive widget loaded after initial paint → better INP/TBT */}
      <section className="reviews">
        <h2>Customer reviews</h2>
        <ReviewsWidget productId={product.id} />
      </section>
    </main>
  );
}

// components/ReviewsWidget.tsx – split long tasks, avoid main-thread blocking
"use client";

import { useEffect, useState, useTransition } from "react";

type Review = {
  id: string;
  user: string;
  rating: number;
  comment: string;
};

export default function ReviewsWidget({ productId }: { productId: string }) {
  const [reviews, setReviews] = useState<Review[]>([]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    let cancelled = false;

    async function load() {
      const res = await fetch(`/api/reviews?productId=${productId}`);
      const data = (await res.json()) as Review[];

      // Use startTransition for non-urgent updates to help INP
      startTransition(() => {
        if (!cancelled) setReviews(data);
      });
    }

    load();
    return () => {
      cancelled = true;
    };
  }, [productId]);

  return (
    <div className="reviews-widget">
      {isPending && <p>Loading…</p>}
      {reviews.map((r) => (
        <article key={r.id} className="review">
          <header>
            <strong>{r.user}</strong> – <span>{r.rating} / 5</span>
          </header>
          <p>{r.comment}</p>
        </article>
      ))}
    </div>
  );
}

// styles.css – minimal example of layout-stable styles
/*
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: center;
}

.hero-media {
  /* Explicit height via aspect ratio, improves CLS */
  aspect-ratio: 4 / 3;
  position: relative;
}

.hero-content h1 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.price {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0 1rem;
}

.primary {
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: #111827;
  color: white;
  cursor: pointer;
}

.details,
.reviews {
  margin-top: 2.5rem;
}

.review + .review {
  margin-top: 1rem;
}
*/

🔗Related Snippets

Similar code snippets you might find interesting

💬Comments (0)

🔒Please login to post comments

💬

No comments yet. Be the first to share your thoughts!

⚡Actions

Share this snippet:

👤About the Author

admin

Active contributor

Leveling Up Core Web Vitals in React Apps Without a Rewrite

💻Source Code

🔗Related Snippets

Using Intersection Observer for Lazy Loading and Scroll-Based Animations

Leveraging Astro Islands for Interactive Content-Heavy Sites

Maintaining a Simple Global State Store in React Without Extra Libraries

💬Comments (0)

⚡Actions

👤About the Author