11 Februari 2025·11 menit baca

Web Performance: Dari Skor 40 ke 100 di Lighthouse

Performa web bukan sekadar angka di Lighthouse. Ini tentang pengalaman pengguna nyata — seberapa cepat halaman terasa responsif dan siap digunakan.

Metrik Core Web Vitals yang Penting

Google menggunakan Core Web Vitals sebagai faktor ranking. Tiga metrik utama: LCP (Largest Contentful Paint) target < 2.5s, FID (First Input Delay) target < 100ms, dan CLS (Cumulative Layout Shift) target < 0.1.

1. Image Optimization

Gambar yang tidak dioptimasi adalah penyebab paling umum skor Lighthouse rendah. Selalu gunakan next/image dengan konfigurasi yang tepat.

tsx·Next.js Image Component

import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={630}
      priority           // LCP image: load segera
      placeholder="blur" // Blur placeholder saat loading
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

2. Code Splitting & Dynamic Import

Jangan kirim JavaScript yang tidak dibutuhkan saat halaman pertama load. Gunakan dynamic import untuk komponen berat seperti chart library, rich text editor, dll.

tsx·Dynamic Import

import dynamic from "next/dynamic";

const ChartComponent = dynamic(
  () => import("./HeavyChart"),
  {
    loading: () => <div className="animate-pulse h-64 bg-gray-100 rounded" />,
    ssr: false,
  }
);

3. Font Loading yang Optimal

tsx·Next.js Font Optimization

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

export default function RootLayout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

📊 Ukur sebelum optimize! Selalu gunakan Chrome DevTools Performance tab dan Lighthouse sebelum dan sesudah perubahan. Optimasi tanpa pengukuran adalah tebak-tebakan.