5 WawasanTentang Kinerja Web

Rentang perhatian manusia di era modern sangatlah pendek. Karena kita terbiasa mendapatkan gratifikasi instan, situs web yang lambat akan langsung kehilangan pengguna dan, pada akhirnya, uang.

Jika sebuah situs gagal memberikan apa yang pengguna inginkan dalam hitungan detik, mereka akan pergi. Namun, “kinerja” bukan sekadar tentang kecepatan umum; ada metrik dan alat spesifik yang perlu dipahami setiap developer, dan tulisan ini akan mengungkap beberapa wawasan yang akan mengubah cara kamu melihat performa web.

Wawasan #1: “Cepat” Saja Tidak Cukup—Inilah 3 Metrik yang Sebenarnya Penting

Google tidak hanya mengukur “kecepatan muat”, tetapi memecahnya menjadi tiga metrik utama yang disebut Core Web Vitals. Memahami ketiganya adalah kunci untuk mengoptimalkan pengalaman pengguna secara nyata.

• Largest Contentful Paint (LCP): Ini adalah metrik untuk kinerja pemuatan. LCP mengukur waktu yang dibutuhkan hingga elemen konten terbesar (biasanya gambar atau blok teks utama) terlihat oleh pengguna. Target yang baik adalah di bawah 2.5 detik.

• First Input Delay (FID): Ini adalah metrik untuk interaktivitas. FID mengukur seberapa cepat situs Anda merespons interaksi pertama pengguna, seperti klik tombol. Pengguna harus merasa situs langsung responsif. Target yang baik adalah di bawah 100 milidetik.

• Cumulative Layout Shift (CLS): Ini adalah metrik untuk stabilitas visual. CLS mengukur seberapa banyak elemen halaman “melompat-lompat” atau bergeser secara tidak terduga saat halaman sedang dimuat. Semakin rendah skornya, semakin baik.

Memahami ketiga metrik ini jauh lebih efektif daripada sekadar mengejar skor “kecepatan” yang ambigu. Ini memaksa Anda untuk berhenti menebak-nebak dan mulai memperbaiki masalah nyata yang dirasakan pengguna—baik itu pemuatan, interaktivitas, atau gangguan visual.

Wawasan #2: Penyebab Lambat yang Tersembunyi—Bukan Gambar, Tapi JavaScript

Meskipun gambar berukuran besar adalah penyebab umum LCP yang lambat, ada penyebab lain yang sering terlewatkan: JavaScript yang memblokir rendering (render-blocking JavaScript). Jika browser harus mengunduh dan menjalankan file JavaScript besar sebelum dapat menampilkan konten utama, LCP Anda akan tertunda secara signifikan. Strategi untuk mengoptimalkan LCP meliputi:

• Optimalisasi Aset: Kompres gambar dan gunakan format modern seperti webp.

• Gunakan CDN: Pastikan aset Anda disajikan dari Content Delivery Network (CDN) untuk pengiriman cepat secara global. Layanan seperti Vercel atau Firebase menangani ini secara otomatis.

• Prioritaskan Aset Kritis: Gunakan preload links untuk memastikan aset penting dimuat terlebih dahulu, dan atur fetchpriority pada gambar utama untuk mengontrol urutan pemuatan.

Masalah interaktivitas (FID) bahkan lebih bergantung pada JavaScript. Satu-satunya cara untuk mengoptimalkannya adalah dengan mengurangi waktu eksekusi JavaScript di main thread (utas utama browser yang menangani rendering dan interaksi pengguna). Beberapa teknik canggih untuk ini adalah:

• Memindahkan Tugas: Gunakan Web Workers atau alat seperti Party Town untuk memindahkan skrip yang berat dari main thread.

• Lazy Loading: Terapkan pemuatan komponen secara lazy dengan React Lazy atau teknik serupa agar hanya memuat JavaScript yang dibutuhkan.

• Pilih Framework yang Tepat: Pertimbangkan framework seperti Qwik yang dirancang dari awal untuk interaktivitas instan melalui lazy loading yang sangat agresif.

Ini adalah salah satu alasan mengapa framework server-side seperti Next.js lebih disukai daripada single-page application (SPA) seperti React murni. Saat pemuatan halaman awal, SPA perlu menjalankan banyak JavaScript sebelum dapat merender konten utama, yang secara inheren memperlambat LCP.

Wawasan #3: Ada Alat yang Lebih Baik dari Lighthouse untuk Menemukan Masalah Spesifik

Meskipun Lighthouse di Chrome DevTools adalah titik awal yang bagus, ada alat yang lebih canggih untuk analisis mendalam yang dapat menunjukkan masalah dengan sangat presisi.

• Web Vitals Chrome Extension: Ekstensi baru dari tim Chrome ini adalah sebuah game-changer. Setelah diinstal, ekstensi ini akan menampilkan log di console yang menunjukkan elemen DOM yang tepat yang menyebabkan LCP lambat atau pergeseran layout (CLS).

Menariknya lagi, ekstensi ini memecah LCP menjadi sub-bagian seperti Time to First Byte (TTFB) dan element render delay. Untuk interaktivitas, ekstensi ini tidak hanya mengukur FID, tetapi juga mencatat interaksi berikutnya, memungkinkan Anda menemukan setiap hambatan responsivitas.

• unlighthouse: Untuk situs web besar dengan ratusan atau ribuan halaman, memeriksa setiap halaman secara manual adalah hal yang mustahil. unlighthouse adalah penyelamat untuk skenario ini. Alat open-source ini menjalankan laporan Lighthouse di setiap halaman situs Anda secara paralel, dan dalam hitungan menit bisa mengungkap halaman dengan kinerja buruk yang mungkin tidak akan pernah Anda periksa.

Wawasan #4: Bahkan Situs Raksasa Pun Kesulitan dengan Stabilitas Visual (CLS)

Masalah kinerja bukan hanya milik situs kecil. Bahkan raksasa teknologi pun menghadapinya. Contohnya, Amazon.com. Meskipun performa pemuatannya secara umum cukup baik, analisis menggunakan ekstensi Web Vitals menunjukkan banyak masalah Cumulative Layout Shift (CLS).

Penyebab umum CLS yang terlihat di banyak situs adalah gambar yang tidak memiliki atribut width dan height yang ditentukan, atau iklan yang disisipkan secara dinamis ke dalam halaman. Saat elemen-elemen ini dimuat, mereka mendorong konten lain ke bawah. Untuk gambar responsif yang perlu mengubah ukuran, solusi terbaiknya adalah menggunakan atribut srcset untuk menyediakan gambar dengan ukuran berbeda untuk kondisi viewport yang berbeda. Ini membuktikan bahwa CLS adalah masalah yang licik dan bahkan tim rekayasa terbaik pun bisa melewatkannya, menjadikannya area penting untuk diaudit secara rutin.

Wawasan #5: Performa Terbaik Bukanlah Mitos—Lihat Saja Astro

Setelah menganalisis banyak situs populer seperti Google dan Reddit, yang rata-rata memiliki skor performa sekitar 90, ada satu yang benar-benar menonjol. Situs web untuk framework Astro, astro.build, benar-benar mendominasi dari segi performa.

Situs ini mendapatkan skor hampir sempurna 100 di semua kategori. Ini membuktikan klaim Astro tentang fokusnya pada kinerja yang luar biasa dan menunjukkan bahwa mencapai skor performa elit bukanlah hal yang mustahil jika dibangun dengan arsitektur yang tepat sejak awal.

Kesimpulan: Mulai Ukur Apa yang Penting

Kinerja web modern lebih dari sekadar “cepat”. Ini adalah tentang metrik yang terukur dan pengalaman pengguna yang nyata yang mencakup pemuatan, interaktivitas, dan stabilitas visual. Dengan memahami metrik yang tepat dan menggunakan alat yang tepat, Anda dapat beralih dari sekadar berharap situs Anda cepat menjadi membangunnya dengan performa yang terbukti.

Setelah mengetahui wawasan ini, metrik mana yang akan Anda periksa dan optimalkan pertama kali di proyek Anda selanjutnya?