Imagyc›Artikel

Cara menemukan gambar yang membuat situs lambat

Diterbitkan 12 Oktober 2026 · 7 menit baca

Banner muncul setelah teks. Foto produk lama mengisi katalog. Di komputer semuanya terasa normal, tetapi di ponsel halaman terus menunggu. Sebelum mengompresi semua file, cari tahu apa yang terjadi pada gambar yang benar-benar diterima browser.

Untuk memeriksa gambar yang lambat, identifikasi filenya, lihat jumlah data yang dikirim, kapan unduhannya dimulai, dan kapan gambar muncul. Setelah itu, ubah satu hal dan bandingkan dalam kondisi yang sama.

Anda dapat memulai tanpa menulis kode. PageSpeed Insights membantu menemukan bagian yang perlu diperhatikan, sedangkan Chrome memungkinkan pemeriksaan per file. Tujuannya adalah menemukan bukti yang dapat diperiksa kembali pada halaman.

Jika ingin memahami manfaatnya lebih dulu, baca mengapa gambar perlu dioptimalkan. Panduan ini berfokus pada diagnosis.

1. Pilih halaman dan catat masalahnya

Mulai dari URL tempat masalah muncul: halaman produk, halaman penawaran, atau artikel. Menguji beranda saja bisa melewatkan masalah yang sebenarnya.

Catat gejala secara konkret: “foto utama lambat muncul di ponsel”, “galeri tersendat saat dibuka”, atau “teks bergeser ketika banner tampil”. Catatan itu membantu memilih pengujian dan memastikan apakah perubahan menyelesaikan masalah.

Simpan alamat halaman, tanggal, perangkat, serta kondisi cache. Jika diperlukan, simpan tangkapan layar awal tanpa informasi pelanggan atau data pribadi.

Pilih satu halaman dan satu masalah terlebih dahulu. Koreksi yang sama mungkin berguna pada halaman lain, tetapi kesimpulan itu perlu diperiksa setelah pengujian awal.

2. Gunakan PageSpeed Insights untuk menemukan petunjuk

Buka PageSpeed Insights, masukkan URL yang sudah diterbitkan, dan jalankan analisis. Periksa hasil seluler dan desktop secara terpisah. Laporan menampilkan pengujian laboratorium dan, jika tersedia, data pengguna nyata.¹

Cari informasi tentang pengiriman gambar, LCP, dan pergeseran tata letak. Nama bagian dapat berubah menurut versi atau bahasa alat. Buka rinciannya, jangan berhenti pada skor utama.

Insight Improve image delivery menunjukkan peluang pengurangan data. Angka penghematannya merupakan perkiraan, bukan ukuran pasti file yang akan Anda hasilkan atau prediksi penghematan waktu dalam detik.²

Buat daftar singkat berisi URL gambar, perkiraan penghematan, dan fungsi gambar. Foto utama dan foto di akhir artikel mungkin memerlukan prioritas berbeda meskipun ukurannya sama.

Pastikan data berasal dari URL atau keseluruhan origin

Data pengguna nyata mencakup 28 hari terakhir dan memerlukan sampel yang cukup. PageSpeed dapat menampilkan data origin, bukan URL tertentu, atau tidak menampilkan data lapangan sama sekali. Ketiadaan data tidak membuktikan halaman cepat.^{1, 3}

Uji laboratorium membantu memeriksa perubahan langsung. Data lapangan membantu melihat pengalaman pengunjung selama periode yang lebih panjang. Simpan kedua hasil beserta konteksnya.

3. Lihat file yang benar-benar diunduh Chrome

Ikuti langkah berikut pada halaman yang sedang diperiksa:

1. Klik kanan halaman dan pilih Inspect atau Inspeksi.
2. Buka tab Network.
3. Muat ulang halaman dengan panel tetap terbuka.
4. Pilih filter gambar, biasanya Img.
5. Urutkan kolom Size untuk menemukan transfer terbesar.⁴

Arahkan kursor pada nama file untuk melihat URL lengkap. Buka permintaan dan lihat pratinjaunya. Dengan begitu, Anda dapat menghubungkan baris laporan dengan banner atau foto produk di halaman.

File yang dikirim situs bisa berbeda dari file yang diunggah ke editor. CMS dapat membuat beberapa ukuran, mengonversi format, atau memakai CDN. Periksa permintaan sebenarnya sebelum menentukan file asli yang harus diubah.

Pisahkan pengujian dengan cache dan tanpa cache

Opsi Disable cache pada Network menonaktifkan cache browser selama DevTools terbuka. Aktifkan, muat ulang, dan catat hasilnya. Lalu matikan opsi tersebut untuk mengamati kunjungan dengan cache. Simpan hasilnya secara terpisah.⁵

Service Worker atau cache aplikasi masih dapat menyediakan file. Periksa sumber respons yang ditampilkan. Menonaktifkan cache browser tidak membuktikan semua lapisan cache sudah dilewati.⁶

Ukuran transfer berbeda dari waktu permintaan

Kolom Size membantu melihat data yang dikirim dan ukuran sumber daya. Time menunjukkan durasi permintaan. Bagian Timing memecah durasi menjadi tahap seperti menunggu respons dan menerima konten.⁵

Permintaan yang lama belum tentu berarti gambar kurang terkompresi. Jangan menjumlahkan waktu semua foto untuk memperkirakan waktu halaman: beberapa permintaan berjalan bersamaan. Cari file yang berkaitan dengan gejala awal.

4. Bandingkan dimensi file dan area tampilnya

Foto katalog selebar 3.000 piksel mungkin muncul pada kartu selebar 300 piksel CSS. Selisih ini perlu diperiksa, terutama jika kartu menggunakan file yang sama dengan fitur zoom.

Lihat lebar tampilan pada panel Elements. Periksa juga dimensi file yang benar-benar dikirim melalui pratinjau atau properti file yang disimpan. Jangan hanya melihat ukuran sumber di pustaka media.

Perhitungkan kepadatan layar. Gambar selebar 400 piksel CSS dapat memanfaatkan sumber 800 piksel pada layar 2x. srcset dan sizes memungkinkan browser memilih di antara beberapa kandidat.⁷

Jika ponsel masih menerima gambar sangat besar, periksa pengaturan responsif. Sumber lebih besar mungkin diperlukan untuk zoom atau kepadatan layar; pastikan penggunaannya sebelum mengurangi resolusi.

Baca resolusi gambar untuk desktop dan ponsel untuk menghubungkan jumlah piksel dengan fungsi dan ruang gambar.

5. Periksa apakah gambar menunda konten utama

Buka panel Performance di Chrome, rekam pemuatan ulang, lalu periksa peristiwa LCP dan insight yang terkait. Jika elemen LCP adalah gambar, cocokkan dengan URL yang ditemukan pada Network.⁸

LCP mengikuti kemunculan konten terbesar yang memenuhi kriteria di area terlihat. Elemen itu bisa berupa teks. Nilai LCP buruk tidak membuktikan seluruh foto terlalu berat.⁹

Pembagian ini membantu membedakan permintaan terlambat, transfer yang lama, dan keterlambatan tampilan setelah file diterima.¹⁰

Jika unduhan gambar dimulai terlambat

Periksa apakah gambar memakai loading="lazy", bergantung pada JavaScript, atau sulit ditemukan sejak awal. Gambar LCP perlu tersedia lebih awal; prioritas tinggi dapat sesuai untuk sumber daya tersebut.¹¹

Jika permintaannya lama

Periksa bytes dan Timing. Apakah waktu habis untuk menerima data, atau menunggu sebelum respons? Yang pertama mengarahkan pemeriksaan ke dimensi dan kompresi. Yang kedua memerlukan pemeriksaan pengiriman. Keduanya juga bisa terjadi sekaligus.

Jika file sudah diterima tetapi gambar belum muncul

Periksa keterlambatan rendering. Kode, gaya, atau aturan tampilan mungkin menahan elemen. Mengurangi ukuran file dapat menghemat data tanpa menyelesaikan penundaan itu.⁹

6. Tentukan prioritas berdasarkan temuan

Angka berikut hipotetis, bukan hasil pengujian Imagyc atau batas dari Google.

Menyediakan ruang untuk gambar membantu menghindari pergeseran, tetapi halaman dapat bergeser karena sebab lain. Konfirmasikan elemen yang memicunya.¹²

Sebagai titik awal, periksa gambar konten utama, transfer besar pada layar pertama, lalu galeri. Sesuaikan urutan dengan masalah yang Anda catat.

7. Ubah satu hal dan periksa file yang sudah dipublikasikan

Jika bukti menunjukkan data berlebihan, buat salinan dan uji kompresi atau konversi di Imagyc. Bandingkan ukuran, dimensi, tulisan, tekstur, dan detail produk.

Panduan format gambar membantu memilih kandidat. File lebih kecil berguna jika format diterima tujuan publikasi dan gambar tetap memenuhi fungsinya.

Setelah menerbitkan perubahan, kembali ke Network. Pastikan URL dan bytes sesuai versi baru. Jika situs masih mengirim versi lama, periksa cache dan referensi halaman.

Jika nama file berubah, perbarui semua tempat yang merujuknya. Panduan nama file gambar untuk SEO membantu mencegah tautan rusak.

8. Bandingkan sebelum dan sesudah secara konsisten

Sebagai prosedur praktis, lakukan tiga pengujian sebelum dan tiga setelah perubahan. Pertahankan URL, profil perangkat, simulasi jaringan, dan kondisi cache. Bandingkan median serta variasinya. Ini saran pengujian, bukan ketentuan Google atau representasi seluruh pengunjung.

Jangan membandingkan pemuatan ulang pada komputer sendiri dengan tes seluler simulasi yang berbeda kondisinya. Pilih alat dan pertahankan pengaturannya.

Mode perangkat Chrome membantu menyimulasikan layar, jaringan, dan pemrosesan, tetapi tidak sepenuhnya mereproduksi ponsel nyata. Lakukan pemeriksaan tambahan pada perangkat sungguhan.¹³

Skor Lighthouse bergantung pada sejumlah metrik dan dapat berubah antar-pengujian. Penghematan bytes tidak menjamin kenaikan skor yang sebanding. Periksa juga ukuran yang terkait dengan masalah awal.¹⁴

Pertanyaan yang sering diajukan

Apakah setiap gambar di atas 100 KB bermasalah?

Tidak. Thumbnail dan foto yang dapat diperbesar memiliki tugas berbeda. Nilai ukuran bersama dimensi, kualitas, dan waktu pemuatannya.

Mengapa kompresi hampir tidak mengubah LCP?

Pastikan file baru benar-benar dikirim. Lalu periksa tahapan LCP. Hambatan dapat terjadi sebelum unduhan atau saat rendering. Penghematan data tetap merupakan hasil tersendiri.

Apakah skor PageSpeed saja cukup?

Rinciannya diperlukan untuk menentukan koreksi. Skor keseluruhan tidak menjelaskan sendiri foto mana yang menyebabkan gejala.

Apakah WebP dan AVIF perlu diperiksa juga?

Ya. Ekstensi tidak menunjukkan kecocokan dimensi, kualitas ekspor, atau ketepatan waktu permintaan.

Kapan pemeriksaan dapat dianggap selesai?

Kembali ke gejala awal. Apakah gambar utama tampil lebih baik, versi yang tepat dikirim, dan kualitas tetap memadai? Simpan catatan dan ulangi ketika banner, tata letak, atau alat berubah.