Peraturan 3-Saat Prestasi Web

Anda mempunyai tiga saat.

Selepas itu, pengguna anda akan pergi.

Penyelidikan Google menunjukkan 53% pengguna mudah alih meninggalkan sesuatu laman web jika ia mengambil masa lebih daripada 3 saat untuk dimuatkan.

Laman web yang perlahan merugikan anda. Menambah baik masa muat mudah alih sebanyak 0.1 saat meningkatkan penukaran runcit sebanyak 8.4%.

Prestasi bukan sekadar metrik teknikal. Ia adalah metrik perniagaan.

Untuk berjaya, anda mesti memahami Core Web Vitals:

• LCP (Largest Contentful Paint): Seberapa cepat pengguna melihat kandungan utama. Sasarkan di bawah 2.5s. • INP (Interaction to Next Paint): Seberapa cepat halaman bertindak balas terhadap klik. Sasarkan di bawah 200ms. • CLS (Cumulative Layout Shift): Seberapa stabil halaman tersebut. Sasarkan di bawah 0.1.

Berhenti meneka dan mula mengoptimumkan. Berikut adalah cara untuk mengatasi masa:

Pengoptimuman JavaScript • Hantar kod yang lebih sedikit. Gunakan dynamic imports untuk memuatkan kod hanya apabila diperlukan. • Gunakan tree-shaking. Tukar daripada CommonJS kepada modul ES untuk membuang beban yang tidak diperlukan. • Pindahkan tugasan berat ke Web Workers. Pastikan main thread bebas untuk input pengguna. • Gunakan defer atau async. Jangan biarkan skrip menyekat proses parsing HTML anda.

CSS dan Rendering • Inline CSS kritikal. Muatkan hanya apa yang kelihatan di bahagian atas (above the fold) terlebih dahulu. • Elakkan layout thrashing. Kumpulkan operasi bacaan dan penulisan anda untuk mengelakkan pengiraan semula yang berterusan. • Gunakan transform dan opacity untuk animasi. Ini menggunakan GPU dan mengelakkan anjakan susun atur (layout shifts). • Gunakan content-visibility: auto. Langkau proses rendering untuk kandungan yang berada di luar skrin.

Strategi Imej • Gunakan format moden. WebP dan AVIF jauh lebih kecil daripada JPEG. • Tetapkan atribut lebar (width) dan tinggi (height). Ini mengelakkan anjakan susun atur (CLS). • Gunakan lazy-load untuk imej di bawah bahagian atas (below the fold). Jangan gunakan lazy-load untuk imej utama (hero image) LCP anda. • Gunakan srcset. Sediakan imej yang lebih kecil untuk pengguna mudah alih.

Rangkaian dan Caching • Gunakan CDN. Letakkan kandungan anda lebih dekat dengan pengguna untuk mengurangkan kependaman (latency). • Aktifkan pemampatan. Gunakan Brotli atau Zstandard untuk mengecilkan saiz fail. • Gunakan cache secara agresif. Gunakan pengepala cache immutable untuk aset yang di-hash. • Pastikan bfcache berfungsi. Elakkan penggunaan acara unload untuk memastikan navigasi ke belakang/hadapan yang serta-merta.

Matlamatnya mudah: elakkan kerja.

Kod terpantas ialah kod yang tidak perlu dimuat turun oleh pengguna anda. Permintaan (request) terpantas ialah permintaan yang tidak perlu dibuat oleh pelayar (browser).

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