Belajar Gatsby - Performance Optimization

#Pendahuluan

Gatsby sudah cepat secara bawaan, tapi "sudah cepat" bukan alasan untuk berhenti. Optimasi performa adalah proses berkelanjutan: mengukur, menemukan bottleneck, lalu memperbaiki satu per satu.

Episode 15 membahas analisis bundle dan kecepatan halaman, preloading dan code splitting, lazy loading, plugin optimasi build, serta perbaikan Core Web Vitals dan skor Lighthouse.

#Menganalisis Bundle Size dan Kecepatan Halaman

#Audit dengan Lighthouse

Lighthouse adalah alat audit bawaan Chrome yang memberi skor performa, aksesibilitas, dan SEO. Jalankan pada production build lokal:

npm run build
npx lighthouse http://localhost:9000 --only-categories=performance

Perintah npx lighthouse memerlukan server berjalan; gunakan gatsby serve yang mendengarkan di port 9000 setelah build selesai.

#Mengukur Ukuran Bundle

Bundle JavaScript yang besar memperlambat waktu interaksi. Analisis kontribusi tiap paket dengan bundle analyzer. Hasilnya menampilkan peta ukuran per dependency sehingga kalian tahu paket mana yang sebaiknya di-lazy-load.

#Preloading, Code Splitting, dan Lazy Loading

#Preloading Aset Penting

Halaman yang kaya media bisa di-preload: font, gambar hero, dan script kritikal ditandai agar browser memuatnya lebih awal. Gatsby Head API bisa merender link preload untuk aset kunci.

#Lazy Loading Komponen Berat

Komponen berat — chart, editor, widget besar — sebaiknya dimuat hanya saat dibutuhkan. Gunakan @loadable/component:

npm install @loadable/component gatsby-plugin-loadable-components

Lalu lazy-load komponen di file:

Lazy load komponen berat

import loadable from "@loadable/component"
 
const ChartWidget = loadable(() => import("../components/ChartWidget"))
 
const Dashboard = () => (
  <section>
    <ChartWidget />
  </section>
)

loadable(() => import(...)) memecah ChartWidget menjadi bundle terpisah yang hanya dimuat saat komponen dirender. Ini mengurangi JavaScript awal yang harus diunduh.

#Code Splitting Bawaan Gatsby

Gatsby sudah memecah kode per halaman secara otomatis. Tugas kalian adalah memastikan komponen berat tidak ter-import statis di halaman utama, melainkan lewat lazy loading.

#Plugin Optimasi Build

#Budget Performa

gatsby-plugin-perf-budgets memicu kegagalan build jika bundle melebihi batas yang ditentukan:

Konfigurasi budget bundle

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-perf-budgets",
      options: {
        budgets: [
          {
            path: "/",
            size: 250,
            gzip: true,
          },
        ],
      },
    },
  ],
}

Opsi size: 250 berarti JavaScript halaman utama tidak boleh melebihi 250KB (tergantung unit konfigurasi plugin). Budget menjadikan performa sebagai kontrak, bukan sekadar niat baik.

#Optimasi Gambar dan Font

Pastikan semua gambar memakai gatsby-plugin-image (episode 6) sehingga format dan ukuran otomatis optimal. Untuk font, hindari memuat beberapa weight sekaligus; gunakan subset dan font-display: swap agar teks tidak invisible saat font dimuat.

#Core Web Vitals dan Lighthouse

#Tiga Metrik Utama

• LCP (Largest Contentful Paint): kecepatan elemen terbesar terlihat — target di bawah 2,5 detik.
• INP (Interaction to Next Paint): responsivitas interaksi pengguna.
• CLS (Cumulative Layout Shift): stabilitas visual — hindari elemen yang bergeser setelah dimuat.

#Cara Memperbaikinya

LCP membaik dengan gambar yang dioptimasi dan preloading. INP membaik dengan JavaScript yang lebih kecil dan lazy loading. CLS membaik dengan memberikan ukuran eksplisit pada gambar dan media, serta aspect-ratio CSS. Ulangi audit setelah setiap perubahan besar untuk memastikan tidak ada regresi.

#Penutup

Inti yang harus dibawa pulang:

• Ukur dulu dengan Lighthouse dan bundle analyzer sebelum memperbaiki.
• gatsby serve di port 9000 untuk menguji production build lokal.
• Lazy-load komponen berat dengan @loadable/component.
• Gatsby sudah melakukan code splitting per halaman secara otomatis.
• gatsby-plugin-perf-budgets mengikat performa sebagai kontrak build.
• Fokus pada LCP, INP, dan CLS untuk Core Web Vitals.

Di episode 16 selanjutnya kita akan membahas testing dan quality — unit testing dengan Jest dan React Testing Library, integration testing untuk halaman Gatsby, pengujian aksesibilitas dan SEO audit, serta static analysis dengan ESLint.