Menguji kecepatan gambar website berarti mengukur berapa banyak byte yang benar-benar terkirim ke peramban dan berapa lama prosesnya, bukan menebak dari tampilan halaman. Alat yang paling langsung adalah panel Network di alat pengembang peramban, yang bisa disaring khusus untuk gambar, diurutkan dari berkas terbesar, dan disimulasikan pada jaringan lambat. Untuk gambaran menyeluruh, ada alat uji kecepatan halaman yang menggabungkan pengukuran gambar dengan pengukuran HTML, CSS, dan skrip. Hasil pengukuran itu yang menentukan langkah perbaikan: memperkecil dimensi lewat Kompres Foto, mengubah format lewat Konversi Format Gambar, atau menunda pemuatan gambar di bawah layar.
Satu hal yang perlu dipegang sejak awal: angka dari alat uji bukan nilai mutlak. Skor bisa berbeda antar pengukuran karena jaringan, perangkat, dan beban server ikut berpengaruh. Yang berguna bukan angka tunggalnya, melainkan perbandingan antara kondisi sebelum dan sesudah perbaikan, diukur dengan alat dan pengaturan yang sama.
Yang sebenarnya diukur
Ada beberapa ukuran berbeda, dan mencampurnya membuat diagnosis kacau.
Ukuran berkas adalah besar gambar di server. Ukuran transfer adalah besar yang benar-benar melintas di jaringan, yang bisa lebih kecil kalau berkasnya dipadatkan lagi oleh lapisan penyebar konten, atau lebih besar kalau ada header tambahan. Ukuran tampil adalah besar gambar di layar. Yang menentukan berat halaman adalah ukuran transfer, bukan ukuran tampil.
Waktu muat gambar adalah selang antara permintaan dikirim dan gambar selesai ditampilkan. Waktu ini dipengaruhi ukuran berkas, kecepatan jaringan, dan antrean permintaan lain di halaman yang sama.
Jumlah permintaan adalah banyaknya gambar yang diunduh. Dua puluh gambar kecil bisa sama beratnya dengan satu gambar besar, tetapi dua puluh permintaan menambah antrean dan overhead.
Mengukur dengan panel Network
Alat pengembang peramban tersedia di peramban desktop, biasanya dibuka dengan menekan F12 atau kombinasi tombol pintas. Panel Network mencatat semua permintaan yang dibuat halaman.
Langkahnya begini. Buka halaman yang ingin diuji. Buka panel Network, lalu muat ulang halaman dengan paksa supaya cache tidak dipakai. Saring daftar permintaan untuk jenis gambar. Urutkan berdasarkan ukuran, dari yang terbesar. Yang muncul di puncak daftar adalah gambar yang paling perlu diperhatikan.
Untuk setiap gambar, periksa empat hal. Ukuran transfernya. Dimensi aslinya, yang biasanya terlihat di kolom khusus atau saat berkasnya dibuka. Ukuran tampilnya di halaman, yang bisa diperiksa lewat inspeksi elemen. Dan waktu yang dibutuhkan untuk mengunduhnya.
Selisih antara dimensi asli dan ukuran tampil adalah petunjuk pertama. Gambar berukuran 3000 piksel yang ditampilkan selebar 300 piksel mengirim sekitar sepuluh kali piksel yang diperlukan. Kecilkan dimensinya.
Untuk menguji kondisi jaringan lambat, panel Network menyediakan pilihan pembatasan kecepatan. Aktifkan pembatasan itu, lalu muat ulang halaman. Halaman yang terasa cepat di jaringan kantor bisa terasa berat di jaringan seluler, dan pengujian ini menunjukkan gambar mana yang paling menahan.
Panel yang sama juga menunjukkan apakah gambar diunduh sejak awal atau setelah mendekati layar. Gambar di bawah layar yang ikut terunduh sejak awal membuang kuota pengunjung.
Alat uji kecepatan halaman
Alat uji kecepatan halaman menjalankan halaman di lingkungan yang dikendalikan, lalu melaporkan waktu dan penyebabnya. Tiga yang lazim dipakai: Lighthouse yang tersedia di dalam alat pengembang, layanan pengukuran daring dari penyedia mesin pencari, dan layanan pengujian dari berbagai lokasi.
Alat-alat ini melaporkan beberapa metrik. Waktu muat elemen terbesar di layar, waktu respons pertama, dan total byte per jenis sumber daya. Untuk keperluan gambar, bagian yang paling berguna adalah daftar sumber daya terberat dan saran perbaikan yang menyertainya, misalnya menyarankan format yang lebih hemat atau menunda pemuatan gambar tertentu.
Beberapa catatan saat memakai alat ini. Pertama, jalankan lebih dari sekali dan bandingkan hasilnya; satu kali pengukuran bisa menyesatkan. Kedua, pilih lokasi pengujian yang dekat dengan pengunjung Anda. Ketiga, alat daring menguji halaman dari luar, jadi hasilnya tidak sama dengan pengalaman pengunjung yang sudah punya cache. Keempat, skor bersifat perkiraan dan rumusnya bisa berubah; jangan mengejar angka, kejar penyebab yang terlihat di daftar sumber daya.
Menyaring gambar mana yang paling berat
Setelah data terkumpul, urutkan gambar berdasarkan ukuran transfer dan periksa lima yang teratas. Pertanyaan yang perlu dijawab untuk masing-masing.
Apakah dimensinya jauh lebih besar daripada ukuran tampilnya? Kalau ya, ini kandidat pertama untuk diperkecil.
Apakah formatnya sesuai isinya? Foto sebaiknya JPG atau WebP, bukan PNG. Tangkapan layar dan logo sebaiknya PNG atau WebP, bukan JPG. Ketiga format itu punya kekuatan masing-masing, dan perbandingannya ada di Perbedaan JPG PNG dan WebP.
Apakah gambar itu berada di bagian atas halaman? Gambar di bagian atas paling terasa pengaruhnya karena menahan tampilan pertama. Gambar di bawah layar sebaiknya ditunda pemuatannya.
Apakah gambarnya dipakai di beberapa tempat dengan ukuran berbeda? Kalau ya, siapkan beberapa versi ukuran dan biarkan peramban memilih yang sesuai lewat atribut srcset. Cara menyiapkannya ada di Cara Membuat Gambar Responsive.
Apakah ukurannya wajar untuk jenis gambarnya? Foto produk berisi detail halus memang lebih berat daripada bidang warna rata pada dimensi yang sama. Yang bisa dibandingkan adalah gambar sejenis di halaman yang sama.
Melakukan perbaikan berdasarkan temuan
Kalau gambar terlalu besar dimensinya, kecilkan lewat Kompres Foto. Ukuran persen tersedia dari 10 sampai 200, dan angkanya terlihat di pratinjau sebelum diunduh. Untuk keperluan yang butuh ukuran tertentu, tersedia juga ukuran pas foto 2x3, 3x4, dan 4x6 sentimeter yang dipotong mengisi seluruh area pada 300 DPI.
Kalau formatnya kurang tepat, ubah lewat Konversi Format Gambar. Untuk foto, WebP memberi ukuran paling kecil pada mutu yang sama; JPG adalah pilihan paling aman kalau ada aplikasi atau penerima yang belum bisa membuka WebP. Untuk gambar bergaris tajam, PNG menjaga ketajaman.
Kalau gambar di bawah layar ikut terunduh sejak awal, pasang penundaan pemuatan. Langkahnya ada di Cara Membuat Lazy Load Gambar. Gambar utama di bagian atas sebaiknya tidak ditunda.
Kalau tata letak bergeser saat gambar muncul, lengkapi atribut dimensi di tag gambar. Caranya ada di Cara Menentukan Dimensi Gambar di HTML.
Kalau situs Anda menerima beberapa ukuran berkas, siapkan versi kecil dan versi besar, lalu pasang srcset. Pengunjung di ponsel tidak perlu mengunduh versi terbesar.
Menguji di perangkat dan jaringan nyata
Alat uji di desktop berguna, tetapi tidak menggantikan pengujian di perangkat. Buka halaman di ponsel dengan jaringan seluler, bukan hanya wifi kantor. Perhatikan apakah gambarnya muncul satu per satu dengan lambat, dan apakah halaman bisa dipakai sebelum semua gambar selesai dimuat.
Uji juga di beberapa kondisi. Sinyal kuat dan sinyal lemah. Mode hemat data, kalau peramban ponselnya punya. Ukuran layar kecil dan besar. Perbedaan hasil antar kondisi menunjukkan gambar mana yang paling rapuh.
Membandingkan sebelum dan sesudah
Setelah perbaikan, ukur lagi dengan alat dan pengaturan yang sama seperti pengukuran awal. Bandingkan tiga angka: total byte gambar, jumlah permintaan, dan waktu muat elemen terbesar. Catat juga gambar mana yang masih di puncak daftar.
Kalau perbaikannya tidak mengubah apa pun, periksa apakah berkas yang diunggah benar-benar berkas hasil kompresi, bukan berkas aslinya. Periksa juga cache: peramban atau lapisan penyebar konten bisa menyajikan berkas lama. Uji di jendela penyamaran atau setelah membersihkan cache.
Kalau hasilnya justru membesar, ada penjelasan tersendiri. Berkas yang sudah efisien bisa tidak menyusut, bahkan bertambah sedikit setelah ditulis ulang. Penjelasannya ada di Kenapa Kompres Foto Malah Membesar.
Kapan pengukuran ini tidak perlu
Untuk situs kecil dengan sedikit gambar, pengukuran menyeluruh berlebihan. Cukup periksa ukuran berkas setiap gambar sebelum diunggah, dan pastikan dimensinya sesuai ukuran tampil.
Kalau situs Anda memakai layanan optimasi gambar otomatis yang menyajikan format dan ukuran berbeda per perangkat, hasil pengukuran di desktop tidak menggambarkan pengalaman pengunjung lain. Uji dari beberapa perangkat, atau periksa dokumentasi layanan itu untuk memahami apa yang sudah ditangani.
Kalau halaman Anda sudah terasa cepat dan pengunjung tidak mengeluh, tidak ada yang perlu dikejar. Kecepatan adalah sarana, bukan tujuan yang berdiri sendiri.
Pertanyaan yang sering muncul
Alat apa yang paling mudah untuk memulai? Panel Network di alat pengembang peramban. Alat itu sudah terpasang, tidak perlu memasang apa pun, dan langsung menunjukkan gambar mana yang paling berat.
Apakah skor dari alat uji bisa berubah? Bisa. Jaringan, perangkat, lokasi server, dan beban saat pengujian ikut memengaruhi. Karena itu, bandingkan hasil dari kondisi yang sama, bukan mengejar satu angka.
Berapa ukuran gambar yang ideal? Tidak ada satu angka yang berlaku untuk semua gambar. Ukuran yang ditentukan adalah dimensi piksel yang sesuai ukuran tampil, lalu berkasnya dikecilkan selama hasilnya masih terlihat baik. Patokan umumnya ada di Berapa Ukuran Foto yang Ideal untuk Web.
Apakah layanan ini bisa mengukur kecepatan halaman? Tidak. Layanan ini menyiapkan berkasnya: memperkecil dimensi, menurunkan mutu, mengubah format, dan menghapus metadata lokasi. Pengukuran kecepatan dikerjakan alat uji di peramban atau layanan pengukuran.
Apakah menghapus metadata mempercepat halaman? Efeknya kecil pada foto biasa, tetapi tetap mengurangi byte yang terkirim. Metadata kamera dan koordinat GPS terhapus saat berkas ditulis ulang di sini.
Mulai dari gambar terberat
Buka panel Network, urutkan gambar dari yang terbesar, dan catat tiga yang teratas. Kecilkan dimensinya lewat Kompres Foto, ubah formatnya kalau perlu lewat Konversi Format Gambar, lalu ukur lagi dengan pengaturan yang sama. Peta lengkap pekerjaan ini ada di Gambar untuk Web, dan panduan besarnya di Panduan Gambar dan Foto.