Pengenalan Speed Insights

Speed Insights adalah alat dari Vercel yang membantu developer memahami performa website mereka berdasarkan data nyata dari pengguna (Real Experience Score/RES). Ini berbeda dengan simulasi lab seperti Lighthouse, karena menggunakan data langsung dari perangkat pengguna.

Core Web Vitals

Google mendefinisikan tiga metrik utama untuk mengukur performa web, yang juga digunakan oleh Speed Insights:

Largest Contentful Paint (LCP): Mengukur waktu hingga elemen terbesar di halaman tampil sepenuhnya. Target: ≤ 2.5 detik
Cumulative Layout Shift (CLS): Mengukur kestabilan visual halaman. Target: ≤ 0.1
Interaction to Next Paint (INP): Mengukur responsivitas halaman. Target: ≤ 200 ms
First Contentful Paint (FCP): Mengukur waktu hingga konten pertama muncul. Target: ≤ 1.8 detik
First Input Delay (FID): Mengukur keterlambatan respons pertama. Target: ≤ 100 ms
Total Blocking Time (TBT): Mengukur waktu blokir thread utama. Target: ≤ 800 ms
Time to First Byte (TTFB): Mengukur waktu sejak permintaan hingga respons pertama. Target: ≤ 800 ms

Strategi Optimasi untuk Skor 100% di Next.js dan Vercel

Berikut adalah beberapa langkah yang bisa diambil agar website Next.js mendapatkan skor performa maksimal:

1. Optimasi Largest Contentful Paint (LCP)

Pastikan gambar atau elemen terbesar di halaman lazy-loaded dengan benar.
Gunakan komponen next/image untuk mengoptimalkan gambar secara otomatis.
Pastikan server-side rendering (SSR) atau static generation (SSG) untuk halaman utama.

import Image from 'next/image'

<Image
  src="/hero-image.png"
  alt="Hero Image"
  width={1200}
  height={600}
  priority
/>

2. Mengurangi Cumulative Layout Shift (CLS)

Tentukan width dan height secara eksplisit untuk semua gambar dan elemen multimedia.
Gunakan next/image karena otomatis memberikan placeholder.
Pastikan iklan, iframe, dan elemen dinamis lainnya tidak menggeser tata letak secara mendadak.

<Image
  src="/example.png"
  alt="Example"
  width={500}
  height={300}
  layout="responsive"
/>

3. Meningkatkan Interaction to Next Paint (INP)

Hindari penggunaan JavaScript berat yang memblokir thread utama.
Gunakan React.memo dan useCallback untuk mencegah render ulang yang tidak perlu.
Optimalkan event listener dan debounce input user.

import { useCallback } from 'react';

const MyButton = ({ onClick }) => {
  const handleClick = useCallback(() => {
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Click me</button>;
};

4. Mempercepat First Contentful Paint (FCP)

Aktifkan server-side rendering (SSR) atau static generation (SSG).
Gunakan font-display: swap untuk menghindari blank teks saat memuat font.

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

5. Mengurangi Total Blocking Time (TBT)

Hindari third-party scripts yang berat.
Split kode dengan dynamic import di Next.js.

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false,
});

export default function Page() {
  return <HeavyComponent />;
}

6. Mengoptimalkan Time to First Byte (TTFB)

Gunakan Vercel Edge Functions untuk server-side rendering yang lebih cepat.
Aktifkan caching untuk mengurangi waktu respon server.

export const config = {
  runtime: 'edge',
};

Contoh Full Code

import Image from 'next/image';
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Optimized Next.js Page</title>
        <meta name="description" content="A super fast Next.js page with perfect performance." />
        <link rel="preload" href="/hero-image.png" as="image" />
      </Head>

      <header className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-r from-blue-500 to-indigo-600 text-white">
        <h1 className="text-4xl font-bold mb-4">Welcome to Optimized Next.js!</h1>
        <Image src="/hero-image.png" alt="Hero Image" width={1200} height={600} priority className="rounded-lg shadow-lg" />
        <p className="text-lg mt-4">Blazing fast, with perfect scores 🚀</p>
      </header>

      <section className="p-8 max-w-4xl mx-auto">
        <h2 className="text-2xl font-semibold mb-4">Key Features</h2>
        <ul className="list-disc pl-5">
          <li>Lazy-loaded images</li>
          <li>Server-side rendering (SSR)</li>
          <li>Optimized fonts with font-display: swap</li>
          <li>Dynamic imports to reduce blocking time</li>
          <li>Edge caching for faster TTFB</li>
        </ul>
      </section>

      <footer className="text-center p-4 bg-gray-800 text-white">
        <p>&copy; 2025 Optimized Next.js Page</p>
      </footer>
    </div>
  );
}

// Performance-focused config
export const config = {
  runtime: 'edge',
};

Memantau Performa di Vercel

Setelah optimasi, gunakan Speed Insights di Vercel untuk memantau performa real-time.

Deploy website ke Vercel.
Buka proyek di Vercel → Speed Insights.
Perhatikan Real Experience Score dan metrik Core Web Vitals.
Lakukan iterasi berdasarkan data pengguna nyata.

Kesimpulan

Mencapai performa 100% di Next.js dan Vercel membutuhkan kombinasi strategi optimasi di server-side, client-side, dan visual. Dengan memahami dan memperbaiki Core Web Vitals serta menggunakan Speed Insights, kamu bisa memberikan pengalaman terbaik bagi pengguna.

Mulai optimasi websitemu sekarang dan pantau hasilnya dengan Speed Insights! ✨

Optimasi Performa Website dengan Speed Insights dari Vercel