Mengukur Performa: Lighthouse dan Core Web Vitals

Lighthouse adalah alat standar untuk mengukur performa web. Jalankan alat ini di Chrome DevTools (tab Lighthouse) atau melalui CLI (npx lighthouse https://yoursite.com). Saat mengevaluasi Arsitektur Pulau, jalankan Lighthouse pada halaman yang mewakili sebelum dan sesudah migrasi untuk mengukur peningkatan secara objektif.

LCP mengukur kapan elemen konten terbesar yang terlihat selesai dirender. Arsitektur Pulau meningkatkan LCP karena server segera mengirim HTML yang telah dirender sepenuhnya — peramban tidak perlu menunggu JavaScript untuk merender konten. Gambar utama atau judul utama yang akan menjadi LCP ditampilkan dari respons HTML awal.

Dalam SPA React, LCP sering tertunda karena peramban harus mengunduh dan menjalankan JavaScript sebelum React merender elemen LCP. Dengan Arsitektur Pulau, konten LCP berada dalam HTML awal, sehingga eksekusi JavaScript tidak menghambat LCP. Ini adalah salah satu manfaat terukur yang paling signifikan.

Waktu Pemblokiran Total mengukur berapa lama thread utama diblokir oleh tugas JavaScript yang berlangsung lebih dari 50 milidetik. Hidrasi React SPA berukuran besar dapat menghasilkan TBT selama ratusan milidetik. Arsitektur Islands mengurangi TBT secara drastis karena JavaScript yang dijalankan sebanding dengan jumlah pulau, bukan ukuran halaman.

Pergeseran Tata Letak Kumulatif mengukur kestabilan visual—pergerakan elemen saat halaman dimuat. Konten yang dirender oleh JavaScript dapat menyebabkan pergeseran tata letak ketika React merender dan mengubah dimensi. HTML yang dirender di server dari Arsitektur Islands menghindari pergeseran tata letak terkait hidrasi karena tata letak awal berasal dari HTML statis yang tidak berubah saat hidrasi.

Penundaan Input Pertama (kini digantikan oleh Interaksi hingga Tampilan Berikutnya, INP) mengukur seberapa cepat halaman merespons interaksi pengguna. Arsitektur Islands meningkatkan INP karena setiap pulau memiliki bundel JavaScript yang kecil dan terfokus. Interaksi di dalam pulau berjalan cepat karena tidak ada pohon React besar yang harus dilalui untuk menjadwalkan pekerjaan.

Perbandingan umum untuk halaman blog: React SPA penuh mungkin memperoleh skor 45–65 pada Lighthouse seluler (TBT: 800 milidetik, LCP: 3,2 detik). Konten yang sama sebagai situs Astro dengan satu pulau React mungkin memperoleh skor 90–98 (TBT: 80 milidetik, LCP: 1,1 detik). Peningkatannya paling terasa pada halaman yang sarat konten dengan interaktivitas terbatas.

Arsitektur Islands bukan pilihan yang tepat untuk aplikasi yang sangat interaktif seperti dasbor, penyunting kode, atau alat kolaboratif. Aplikasi ini memiliki komponen yang terus-menerus berbagi status dan dirender ulang bersama—beban komunikasi antarpulau akan menghilangkan peningkatan performa sekaligus menambah kompleksitas arsitektur.

Arsitektur Islands sangat cocok untuk situs yang sarat konten dengan interaktivitas yang tersebar: blog (membaca konten, sesekali menyukai atau mengomentari), dokumentasi (membaca dokumentasi, sesekali melakukan pencarian atau menggunakan tombol menyalin kode), halaman landas (sebagian besar statis, dengan pulau formulir buletin), dan halaman produk e-commerce (gambar dan deskripsi statis, dengan pulau untuk menambahkan ke keranjang).

Google menggunakan Core Web Vitals (LCP, INP, CLS) sebagai sinyal pemeringkatan. Meningkatkan metrik ini dengan Arsitektur Islands secara langsung membantu peringkat pencarian. Situs yang meningkatkan skor Lighthouse selulernya dari 55 menjadi 92 dengan menerapkan Arsitektur Islands memperoleh manfaat pengalaman pengguna dan SEO secara bersamaan.

Tim yang bermigrasi dari Next.js React SPA ke Astro untuk situs pemasaran dan dokumentasi melaporkan pola yang konsisten: muatan JavaScript turun 70–90%, skor performa seluler meningkat 20–40 poin, dan biaya layanan server menurun karena berkas statis disajikan dari CDN tanpa beban tambahan per permintaan untuk rendering sisi server.

Mengapa Arsitektur Islands secara drastis mengurangi Waktu Pemblokiran Total (TBT)?

Arsitektur Islands meningkatkan semua Core Web Vitals: LCP mendapat manfaat dari HTML yang dirender di server, TBT menurun karena JavaScript sebanding dengan interaktivitas, CLS berkurang berkat tata letak yang stabil dan dirender di server, dan INP meningkat dengan bundel pulau yang kecil serta terfokus. Skor Lighthouse untuk halaman yang sarat konten meningkat secara drastis. Pola ini tidak sesuai untuk aplikasi yang sangat interaktif, tetapi sangat cocok untuk blog, dokumentasi, halaman landas, dan e-commerce.