Gambar memperlambat website karena tiga hal: byte yang harus diunduh pengunjung, jumlah permintaan yang harus diselesaikan peramban, dan ruang yang tidak dipesan di tata letak sehingga halaman bergeser saat gambar muncul. Ketiganya bekerja bersamaan. Halaman dengan satu foto besar di bagian atas bisa terasa lambat karena beratnya, sementara halaman dengan tiga puluh gambar kecil bisa terasa lambat karena banyaknya permintaan dan gambar di bawah layar yang ikut dimuat sejak awal.
Penjelasan ini penting karena solusinya berbeda untuk tiap penyebab. Memperkecil ukuran berkas tidak menolong halaman yang lambat karena tata letak bergeser. Menambah atribut lebar dan tinggi tidak menolong halaman yang mengunduh terlalu banyak byte. Karena itu, sebelum memperbaiki, kenali dulu penyebab yang paling berpengaruh di halaman Anda.
Byte yang harus diunduh
Setiap gambar adalah berkas terpisah dari HTML dan CSS, dan setiap byte-nya menempuh jaringan yang sama. Pada koneksi seluler yang tidak stabil, byte tambahan berarti waktu tunggu yang bisa dirasakan langsung. Gambar berukuran besar di bagian atas halaman paling terasa karena ia menempati bagian yang pertama dilihat pengunjung.
Ukuran berkas gambar ditentukan tiga hal: dimensi piksel, tingkat pemadatan, dan tingkat detail gambar. Dari ketiganya, dimensi paling berpengaruh dan paling mudah dikendalikan. Foto yang dimensinya jauh lebih besar daripada ukuran tampilnya membawa piksel yang tidak akan pernah terlihat. Piksel itu tetap diunduh, tetap memakan kuota, dan tidak memberi apa pun.
Karena itu, langkah pertama yang paling berguna biasanya memperkecil dimensi. Caranya ada di cara mengoptimalkan gambar untuk website, dan toolnya di Kompres Foto.
Jumlah permintaan yang harus diselesaikan
Peramban mengunduh gambar secara terpisah, dan setiap gambar menambah satu permintaan. Halaman dengan banyak gambar kecil bisa menghabiskan waktu lebih banyak untuk mengurus permintaan daripada mengunduh isinya. Ini alasan menggabungkan ikon kecil menjadi satu gambar sprite atau memakai ikon vektor masih dipakai sampai sekarang.
Jumlah permintaan juga menjelaskan kenapa halaman galeri bisa terasa berat meskipun setiap fotonya sudah dikompres. Solusinya bukan hanya mengecilkan berkas, melainkan juga mengurangi jumlah gambar yang diunduh pada satu waktu. Gambar yang belum terlihat pengunjung belum perlu diunduh.
Tata letak yang bergeser saat gambar muncul
Ini penyebab yang paling sering diabaikan. Peramban tidak tahu berapa ruang yang harus disediakan untuk sebuah gambar sampai gambarnya selesai diunduh, kecuali HTML memberi tahu. Tanpa atribut lebar dan tinggi, peramban menyediakan ruang nol, lalu menggeser seluruh isi halaman saat gambar muncul.
Akibatnya, teks yang sedang dibaca berpindah posisi, dan pengunjung bisa salah menekan tautan. Pengalaman ini terasa lebih mengganggu daripada sekadar menunggu, karena halaman yang sudah tampak selesai tiba-tiba berubah. Perbaikannya ada di kode, bukan di berkas, dan langkahnya dijelaskan di cara menentukan dimensi gambar di HTML.
Perbaikan itu juga membantu hal lain: peramban yang tahu ukuran gambar bisa menata halaman lebih cepat, sehingga isi yang sudah siap tidak ikut menunggu gambar.
Gambar di bawah layar yang dimuat sejak awal
Saat halaman dibuka, peramban secara bawaan mengunduh gambar yang ada di HTML, termasuk yang berada jauh di bawah layar. Pengunjung yang belum menggulir tetap membayar byte untuk gambar yang belum tentu dilihatnya. Pada halaman panjang dengan banyak gambar, ini pemborosan yang besar.
Lazy load menunda pemuatan gambar sampai gambar itu mendekati layar. Peramban modern menyediakannya lewat atribut loading pada tag gambar, dan ada juga cara berbasis JavaScript untuk kebutuhan yang lebih khusus. Gambar utama di bagian atas sebaiknya tidak ikut ditunda, karena justru memperlambat hal pertama yang dilihat pengunjung. Langkahnya ada di cara membuat lazy load gambar.
Satu hal yang perlu dijaga saat memakai lazy load: atribut lebar dan tinggi tetap wajib. Tanpa keduanya, ruang gambar belum dipesan saat gambarnya belum dimuat, dan tata letak tetap bergeser ketika gambarnya akhirnya muncul.
Format dan mutu yang tidak sesuai
Format menentukan seberapa efisien gambar disimpan. PNG untuk foto menghasilkan berkas jauh lebih besar daripada JPG atau WebP tanpa keuntungan yang sepadan. JPG untuk tangkapan layar berisi teks membuat huruf kehilangan ketajaman, sehingga pembaca memperbesar gambar dan halaman terasa lebih berat dipakai.
Pada mutu yang sama, WebP menghasilkan berkas paling kecil di antara ketiga format yang didukung. Tetapi WebP belum semua aplikasi bisa membukanya, jadi untuk berkas yang juga dipakai di luar web, JPG lebih aman. Cara memilihnya ada di format gambar untuk website.
Mutu juga berpengaruh, tetapi bukan satu-satunya. Menurunkan mutu JPG sampai rendah memang mengecilkan berkas, tetapi hasilnya bisa terlihat bercak, dan pengunjung yang memperbesar gambar akan melihat kerusakannya. Untuk PNG, tidak ada pengaturan mutu manual: PNG dipadatkan dengan merapikan struktur datanya dan menyederhanakan paletnya, dengan mutu yang dijaga agar perbedaannya tidak terlihat.
Yang bukan penyebab, meskipun sering disalahkan
Gambar bukan satu-satunya hal yang membuat halaman lambat. Skrip iklan, pelacak pihak ketiga, font web, dan CSS yang besar juga berpengaruh. Kalau halaman Anda punya banyak skrip dari domain lain, memperkecil gambar mungkin tidak memberi perubahan yang terasa.
Jaringan pengunjung juga menentukan. Halaman yang terasa cepat di kantor dengan koneksi kabel bisa terasa lambat di ponsel dengan sinyal lemah. Yang paling dirugikan oleh gambar besar adalah pengunjung seluler, dan mereka biasanya mayoritas.
Perangkat pengunjung juga berpengaruh. Ponsel kelas bawah membutuhkan waktu lebih lama untuk mengurai dan menampilkan gambar beresolusi tinggi. Jadi gambar yang sama bisa terasa berbeda di dua perangkat, meskipun koneksinya setara.
Cara memeriksa penyebab di halaman Anda
Buka halaman di peramban, lalu buka panel pengembang dan pilih tab jaringan. Muat ulang halaman dan urutkan permintaan berdasarkan ukuran. Gambar terbesar di daftar itu adalah kandidat pertama untuk diperkecil.
Periksa juga berapa banyak permintaan yang berasal dari gambar. Kalau jumlahnya puluhan, pertimbangkan mengurangi gambar yang dimuat sekaligus. Setelah itu periksa tata letaknya: gulir halaman dari atas ke bawah dan perhatikan apakah ada bagian yang bergeser setelah halaman tampak selesai dimuat. Untuk pengukuran yang bisa dibandingkan antarwaktu, catat tanggal dan kondisi pengujiannya, karena hasilnya bergantung pada jaringan dan perangkat yang dipakai.
Urutan perbaikan yang disarankan
- Perkecil dimensi gambar yang jauh lebih besar daripada ukuran tampilnya.
- Pilih format yang sesuai dengan isi gambar.
- Tambahkan atribut lebar dan tinggi pada setiap tag gambar.
- Pasang lazy load untuk gambar di bawah layar, dan biarkan gambar utama dimuat segera.
- Kurangi jumlah gambar yang dimuat sekaligus kalau halamannya berupa galeri.
- Periksa skrip pihak ketiga, karena penyebabnya mungkin bukan gambar.
Urutan itu dimulai dari yang paling berpengaruh dan paling mudah dikerjakan. Memperkecil dimensi biasanya memberi perubahan terbesar untuk usaha paling kecil. Memperbaiki tata letak tidak mengecilkan berkas, tetapi menghilangkan gangguan yang paling terasa saat halaman dibuka.
Kapan halaman lambat bukan karena gambar
Kalau setelah semua gambar diperkecil halaman masih terasa lambat, penyebabnya kemungkinan di tempat lain. Periksa jumlah skrip, ukuran font web, dan waktu tanggap server. Halaman yang memuat banyak skrip pihak ketiga bisa lambat meskipun gambarnya sudah ringan.
Kalau situs Anda memakai layanan pihak ketiga untuk mengurus gambar, misalnya jaringan pengiriman konten, gambar mungkin sudah dioptimalkan di sana. Yang perlu Anda siapkan tetap sama: berkas asli yang dimensinya wajar, supaya layanan itu tidak bekerja dari berkas yang berlebihan.
Pertanyaan yang sering muncul
Apakah gambar yang lebih kecil selalu membuat halaman lebih cepat? Tidak selalu. Kalau penyebabnya tata letak yang bergeser atau skrip pihak ketiga, memperkecil gambar tidak menolong. Ukur dulu penyebabnya.
Apakah lazy load memperlambat gambar utama? Bisa, kalau gambar utama ikut ditunda. Gambar yang pertama terlihat sebaiknya dimuat segera, dan lazy load dipasang hanya untuk gambar di bawah layar.
Apakah menambah atribut lebar dan tinggi mengubah tampilan gambar? Tidak, selama CSS halaman mengatur ukuran tampilnya. Atribut itu memberi tahu peramban rasio gambar supaya ruangnya bisa dipesan sejak awal.
Apakah WebP selalu lebih cepat dimuat? Ukuran berkasnya lebih kecil, tetapi kecepatan pemuatan juga bergantung pada jaringan dan perangkat pengunjung. WebP adalah pilihan yang baik untuk aset web, dengan catatan penerimanya bisa membukanya.
Mulai dari penyebab yang paling besar
Periksa halaman Anda, temukan gambar terbesar, lalu perkecil dimensinya lewat Kompres Foto. Setelah itu lengkapi tag gambarnya di HTML, dan pasang lazy load untuk gambar yang jauh di bawah layar. Penjelasan lengkap tiap langkah ada di Gambar untuk Web, dan gambaran seluruh pekerjaan gambar ada di Panduan Gambar dan Foto.