Kecepatan Situs Web

Mengapa kecepatan itu penting

Separuh dari semua orang menutup situs web yang memuat lebih dari 3 detik. Tidak semua pengunjung kamu memiliki ponsel baru dengan Wi-Fi cepat – beberapa pengunjung akan memiliki ponsel lama di kereta. Seorang bos proyek juga memikirkan hal tersebut.

Kabar baik: kamu bisa mendapatkan peningkatan kecepatan terbesar hanya dari satu hal – gambar. Foto langsung dari ponsel bisa berukuran 5 MB; sebuah situs web hanya membutuhkan sepersepuluh dari itu.

Tunjukkan pada saya: ukur dengan Lighthouse

Lighthouse adalah alat pengukur yang terpasang langsung di Chrome:

Buka website kamu (versi live, bukan localhost).
F12 → tab Lighthouse → Analisis pemuatan halaman.
kamu akan mendapatkan skor 0–100 untuk kinerja, aksesibilitas, SEO – dan yang paling penting, daftar tips spesifik tentang hal-hal yang perlu ditingkatkan.

Kiat paling umum dan apa yang harus dilakukan untuk mengatasinya:

Tip mercusuar	Apa yang harus dilakukan
Ukuran gambar dengan benar	mengecilkan gambar kamu (lihat di bawah)
Sajikan gambar dalam format generasi berikutnya	simpan sebagai WebP
Elemen gambar tidak memiliki lebar/tinggi	tambahkan atribut `lebar` dan `tinggi`
Tautan tidak memiliki teks deskriptif	alih-alih “klik di sini”, ucapkan ke mana tautannya pergi

Kecilkan gambar kamu

Dimensi: sebuah situs web hanya membutuhkan lebar sekitar 1200px (foto pahlawan) atau sekitar 600px (foto biasa). kamu dapat mengubah ukuran di editor mana pun, bahkan secara online (mis. squoosh.app).
Format: WebP berukuran sekitar sepertiga lebih kecil dari JPG dengan kualitas yang sama.
Pemuatan lambat: gambar di paro bawah hanya dimuat setelah pengunjung menggulir ke bawah:

<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />

Sekarang giliran kamu 💪

Ukur situs web kamu dengan Lighthouse dan tuliskan skor kinerja kamu – itulah garis awal kamu.
Temukan 3 gambar terbesar di situs web kamu (F12 → tab Jaringan → urutkan berdasarkan Ukuran).
Kecilkan (dimensi + WebP) dan tambahkan loading="lazy" ke semuanya kecuali gambar pertama di atas.
Ukur kembali dan bandingkan skornya. Tulis di LAUNCH.md: sebelum → sesudah.
Bonus: uji situs web kamu di ponsel dengan Wi-Fi dimatikan. Seperti apa rasanya?

💡

Jangan berharap 100 poin. Bahkan situs web besar pun mendapat skor 70–90. Yang penting adalah kemajuan: naik dari 60 ke 85 adalah kemenangan yang benar-benar akan diperhatikan oleh pengunjung.

✅

Periksa: kamu mengetahui skor Lighthouse kamu sebelum dan sesudah. Gambar kamu diubah ukurannya, di WebP, dan menggunakan pemuatan lambat. Situs web kamu terasa lebih cepat dimuat di perangkat seluler.

Apa yang bisa diambil dari pelajaran ini

Kecepatan = pengunjung menginap. 3 detik adalah batasnya.
Lighthouse memberi tahu kamu apa yang harus ditingkatkan.
Pengungkit terbesar: gambar lebih kecil (dimensi, WebP, pemuatan lambat).