Belajar Astro - Performance Optimization

#Pendahuluan

Kita sudah membangun, mengamankan, dan mempercepat konten dengan cache. Episode 15 ini menuntaskan sisi performa dengan pendekatan yang lebih terukur: profiling dan optimasi berbasis data. Kalian tidak lagi menebak-nebak mana yang lambat — kalian mengukur, menemukan, dan memperbaiki.

Kali ini kita fokus pada empat area: profiling dengan browser tools dan Lighthouse, mengurangi payload JavaScript dan meminimalkan hydration, preloading aset kritis, serta optimasi di sisi build.

Filosofi episode ini sederhana: ukur dulu, optimasi setelahnya. Optimasi tanpa pengukuran sering kali hanya membuang waktu.

#Profiling dengan Browser Tools dan Lighthouse

#Lighthouse sebagai Titik Awal

Lighthouse adalah alat audit performa bawaan di Chrome DevTools. Buka tab Lighthouse, pilih mode Navigation, dan jalankan audit pada halaman yang sudah di-build:

npx lighthouse https://situs-kalian.dev --only-categories=performance

Perintah npx lighthouse https://situs-kalian.dev menghasilkan skor performa lengkap dengan rekomendasi perbaikan yang sudah diurutkan berdasarkan dampak.

#Membaca Web Vitals

Perhatikan tiga metrik inti:

• LCP (Largest Contentful Paint): waktu konten terbesar terlihat — target di bawah 2,5 detik.
• CLS (Cumulative Layout Shift): stabilitas layout — target di bawah 0,1.
• INP (Interaction to Next Paint): responsivitas interaksi — target di bawah 200 milidetik.

Jika LCP tinggi, periksa gambar dan aset kritis. Jika CLS tinggi, periksa elemen tanpa dimensi. Jika INP tinggi, periksa hydration JavaScript.

#Reducing JavaScript Payload dan Minimizing Hydration

#Audit dengan Coverage

DevTools punya panel Coverage yang menunjukkan berapa banyak kode JavaScript yang benar-benar terpakai. Jalankan halaman, buka tab Coverage, lalu muat ulang. Bar merah menunjukkan kode yang diunduh tapi tidak dieksekusi — target utama optimasi.

#Menerapkan Prinsip Sedikit Pulau

Gunakan audit ini untuk menemukan komponen yang ternyata tidak butuh hydration. Beberapa langkah praktis:

• Ganti client:load dengan client:visible untuk elemen di bawah layar.
• Ganti komponen framework dengan komponen Astro statis bila tidak ada interaktivitas nyata.
• Gunakan client:idle agar hydration tidak mengganggu proses load utama.

Menghapus hydration yang tidak perlu

---
import Statistik from "../components/Statistik.tsx";
---
 
<Statistik client:visible />

Perubahan satu atribut dari client:load menjadi client:visible bisa memangkas payload secara signifikan untuk elemen yang jarang dilihat.

#Preloading Critical Assets dan Resource Prioritization

#Identifikasi Aset Kritis

Gunakan panel Performance dengan CPU throttling untuk melihat aset mana yang menahan render. Aset kritis biasanya: CSS awal, font, dan gambar hero. Prioritaskan lewat resource hints:

<link rel="preload" href="/hero.avif" as="image" />
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />

<link rel="preload" as="image"> mengambil hero lebih awal, dan preload font menghindari FOUT (flash of unstyled text). Preload hanya untuk aset di atas fold — terlalu banyak preload justru menyumbat.

#Bantuan dari Astro

Astro menangani banyak hal ini secara otomatis: CSS di-inline bila kecil, gambar dari astro:assets diberi dimensi dan lazy loading, dan @astrojs/prefetch menangani navigasi. Tugas kalian adalah memastikan audit menunjukkan tidak ada bottleneck yang tersisa.

#Build-Time Optimization dan Incremental Builds

#Optimasi di Sisi Build

Beberapa pekerjaan berat bisa dipindahkan ke build time:

• Hitung statistik, daftar artikel, dan indexing di getStaticPaths.
• Pre-render halaman yang jarang berubah.
• Gunakan query yang di-cache untuk data dari API.

Semakin banyak yang diselesaikan saat build, semakin ringan runtime.

#Incremental Builds

Platform seperti Vercel mendukung incremental builds — hanya halaman yang berubah yang di-build ulang. Untuk proyek besar dengan ribuan halaman, ini mempercepat deployment dari menit menjadi detik. Kombinasikan dengan cache dari episode 14 agar pengguna tidak melihat perubahan apapun selama proses.

#Ukur Sebelum dan Sesudah

Simpan skor Lighthouse sebelum optimasi, lalu bandingkan setelahnya. Perubahan nyata baru berarti jika terukur: LCP turun, payload berkurang, dan skor naik. Kebiasaan mengukur ini yang membedakan optimasi yang serius dari sekadar feeling.

#Penutup

Episode 15 mengajarkan optimasi performa berbasis data: profiling dengan Lighthouse dan DevTools, mengurangi payload JavaScript dan meminimalkan hydration, preloading aset kritis, serta optimasi build dengan incremental builds.

Inti yang harus dibawa pulang:

• Ukur dengan Lighthouse dan Web Vitals sebelum mengoptimasi.
• Panel Coverage menemukan kode yang diunduh tapi tidak terpakai.
• client:visible dan client:idle mengurangi payload hydration.
• Preload hanya aset di atas fold, jangan berlebihan.
• Pindahkan kerja berat ke build time.
• Selalu bandingkan skor sebelum dan sesudah optimasi.

Di episode 16 selanjutnya kita akan membahas testing dan quality: unit testing komponen dan halaman konten, integration testing dengan Playwright atau Cypress, static analysis dan linting, serta accessibility testing dan SEO audits. Kualitas situs kalian akan terbukti, bukan sekadar dijanjikan.