optimasi-nextjs-14-lcp

Next.js 14 App Router bawa banyak fitur performance out-of-the-box. Tapi fitur gak otomatis bikin aplikasi cepat — kamu harus tahu kapan dan gimana pakainya.

Starting point: apa yang lambat?

Buka Chrome DevTools Lighthouse. Hasil awal: LCP 4.2s, TBT 680ms, CLS 0.18, Score 42. Audit awal nemuin 3 masalah besar:

• Blocking JS di client — terlalu banyak use client di komponen yang gak perlu interaktivitas
• Gak ada streaming — user liat layar putih 4 detik sebelum konten muncul
• Font layout shift — Cormorant Garamond bikin teks lompat setelah load

Langkah 1: Server Components by default

Aturan baru: semua komponen adalah Server Component, kecuali butuh interaktivitas.

// Sebelum — semuanya use client
"use client"
export function ProductCard({ product }: Props) {
  return <div>{product.name}</div>
}
 
// Sesudah — gak ada use client
export function ProductCard({ product }: Props) {
  return <div>{product.name}</div>
}

Hasil: JS bundle turun ~40%. Komponen statis gak perlu hydration.

Langkah 2: Streaming & Suspense

import { Suspense } from "react"
export default function Page() {
  return (
    <>
      <HeroSection />
      <Suspense fallback={<ProductsSkeleton />}>
        <ProductsSection />
      </Suspense>
    </>
  )
}

User langsung liat hero — gak perlu nunggu semua section render.

Langkah 3: Font optimization

import { Cormorant_Garamond, Syne } from "next/font/google"
const display = Cormorant_Garamond({ variable: "--font-display" })
const ui = Syne({ variable: "--font-ui" })

Font self-hosted, gak ada round-trip ke Google. display: swap eliminasi CLS.

Langkah 4: Image optimization

<Image src="/shots/dashboard.png" width={800} height={480} priority
  sizes="(max-width: 768px) 100vw, 800px" />

LCP image HARUS dapat priority — kalau gak, browser gak tahu itu yang paling penting.

Final numbers

LCP: 4.2s -> 1.1s | TBT: 680ms -> 90ms | CLS: 0.18 -> 0.01 | Score: 42 -> 98 Takeaway: Next.js 14 kasih toolsnya — tapi yang penting adalah KAPAN pakai Server Component, DI MANA taruh Suspense boundary, dan IMAGE MANA yang dapat priority.