Tips Meningkatkan Kecepatan Loading Web

Website lambat tidak selalu disebabkan oleh satu hal. Ukuran gambar, JavaScript yang berat, waktu respons server, font, dan layanan pihak ketiga bisa ikut menambah waktu tunggu. Mulailah dengan mengukur halaman yang benar-benar digunakan pelanggan, lalu perbaiki hambatan terbesar satu per satu.

1. Ukur sebelum mengubah

Uji halaman utama dan halaman penting seperti katalog atau formulir dengan PageSpeed Insights atau Chrome DevTools. Catat perangkat dan jaringan pengujian, lalu periksa elemen yang paling lambat serta berkas yang paling besar. Pengujian laboratorium membantu menemukan masalah saat pengembangan; data lapangan menunjukkan pengalaman pengguna nyata. Keduanya menjawab pertanyaan yang berbeda.

Core Web Vitals mengukur pengalaman pemuatan, respons, dan kestabilan tampilan. Ambang dalam kategori baik di persentil ke-75 adalah LCP sampai 2,5 detik, INP sampai 200 milidetik, dan CLS sampai 0,1. Nilai ini dipakai untuk diagnosis pengalaman, bukan janji bahwa optimasi tertentu otomatis menaikkan peringkat.

2. Kecilkan gambar tanpa mengorbankan keterbacaan

Unggah gambar dengan dimensi mendekati ukuran tampilnya, kompres sesuai jenis gambar, dan sediakan ukuran berbeda untuk layar kecil bila memungkinkan. WebP dan AVIF dapat mengurangi ukuran pada banyak gambar web, tetapi hasilnya bergantung pada isi gambar dan pengaturan kualitas. Bandingkan tampilan setelah kompresi; logo atau ilustrasi garis sering lebih cocok sebagai SVG.

• Isi atribut width dan height agar ruang gambar disediakan sebelum file selesai dimuat.
• Gunakan srcset atau layanan gambar untuk menyajikan ukuran yang sesuai perangkat.
• Gunakan loading="lazy" untuk gambar jauh di bawah layar; jangan menunda gambar utama yang terlihat saat halaman dibuka.

3. Tinjau JavaScript, CSS, font, dan skrip pihak ketiga

Hapus kode dan plugin yang tidak dipakai, tunda skrip yang tidak diperlukan untuk tampilan awal, dan hindari memuat banyak pustaka hanya untuk satu efek kecil. Formulir, chat, video sematan, dan pelacak iklan juga menambah pekerjaan browser. Nonaktifkan satu per satu saat mendiagnosis agar terlihat mana yang memberi dampak.

Gunakan font dan variasi ketebalan secukupnya. Jika halaman membutuhkan font khusus, sediakan fallback yang serupa agar teks tetap tampil saat font belum selesai diunduh.

4. Atur caching dengan benar

Header HTTP Cache-Control menentukan berapa lama browser atau cache bersama dapat menyimpan respons. Berkas statis yang namanya berubah ketika konten berubah dapat disimpan lebih lama; halaman berisi informasi pribadi atau data yang berubah cepat perlu aturan yang lebih hati-hati. Konfigurasikan header di server atau CDN, lalu uji setelah publikasi agar pengunjung tidak terus menerima berkas lama.

CDN dapat membantu menyajikan aset dari lokasi yang lebih dekat dan menyerap sebagian trafik, tetapi tidak memperbaiki kode berat atau basis data lambat dengan sendirinya. Periksa waktu respons server terpisah dari waktu unduh aset.

5. Periksa kestabilan dan ulangi pengukuran

Sesudah tiap perubahan, jalankan pengukuran yang sama dan bandingkan hasilnya. Untuk CLS, sisakan ruang gambar dan iklan sebelum konten datang. Untuk LCP, periksa apakah gambar hero terlalu besar atau baru diminta terlambat. Untuk INP, cari pekerjaan JavaScript panjang yang menghambat respons saat pengguna menekan tombol atau membuka menu.

Urutan kerja yang praktis

Referensi

• web.dev: ambang Core Web Vitals
• web.dev: memilih format gambar
• MDN: header Cache-Control