The 3-Second Rule of Web Performance

Anda hanya punya tiga detik.

Setelah itu, pengguna Anda akan pergi.

Riset Google menunjukkan bahwa 53% pengguna seluler meninggalkan situs jika waktu pemuatan lebih dari 3 detik.

Situs yang lambat merugikan Anda secara finansial. Meningkatkan waktu pemuatan seluler sebesar 0,1 detik dapat meningkatkan konversi ritel sebesar 8,4%.

Performa bukan sekadar metrik teknis. Ini adalah metrik bisnis.

Untuk menang, Anda harus memahami Core Web Vitals:

• LCP (Largest Contentful Paint): Seberapa cepat pengguna melihat konten utama. Targetkan di bawah 2,5 detik. • INP (Interaction to Next Paint): Seberapa cepat halaman bereaksi terhadap klik. Targetkan di bawah 200ms. • CLS (Cumulative Layout Shift): Seberapa stabil tampilan halaman. Targetkan di bawah 0,1.

Berhenti menebak-nebak dan mulailah melakukan optimasi. Berikut cara mengalahkan waktu:

JavaScript Optimization • Kirim lebih sedikit kode. Gunakan dynamic imports untuk memuat kode hanya saat dibutuhkan. • Gunakan tree-shaking. Beralihlah dari CommonJS ke ES modules untuk menghapus beban yang tidak perlu. • Pindahkan tugas berat ke Web Workers. Jaga agar main thread tetap bebas untuk input pengguna. • Gunakan defer atau async. Jangan biarkan skrip menghambat proses parsing HTML Anda.

CSS and Rendering • Inline CSS kritikal. Muat hanya apa yang terlihat di bagian atas (above the fold) terlebih dahulu. • Hindari layout thrashing. Kelompokkan operasi baca dan tulis Anda untuk mencegah kalkulasi ulang yang terus-menerus. • Gunakan transform dan opacity untuk animasi. Keduanya menggunakan GPU dan menghindari pergeseran tata letak (layout shifts). • Gunakan content-visibility: auto. Lewati proses rendering untuk konten yang berada di luar layar.

Image Strategy • Gunakan format modern. WebP dan AVIF jauh lebih kecil daripada JPEG. • Atur atribut width dan height. Ini mencegah pergeseran tata letak (CLS). • Gunakan lazy-load untuk gambar di bawah lipatan (below the fold). Jangan gunakan lazy-load pada gambar hero LCP Anda. • Gunakan srcset. Sajikan gambar yang lebih kecil untuk pengguna seluler.

Network and Caching • Gunakan CDN. Dekatkan konten Anda dengan pengguna untuk mengurangi latensi. • Aktifkan kompresi. Gunakan Brotli atau Zstandard untuk memperkecil ukuran file. • Lakukan caching secara agresif. Gunakan immutable cache headers untuk aset yang telah di-hash. • Pastikan bfcache tetap berfungsi. Hindari penggunaan event unload untuk memastikan navigasi kembali/maju yang instan.

Tujuannya sederhana: hindari pekerjaan.

Kode tercepat adalah kode yang tidak pernah diunduh oleh pengguna Anda. Permintaan (request) tercepat adalah permintaan yang tidak perlu dilakukan oleh peramban.

Sumber: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1