Mengapa Situs Web Anda Lambat — Daftar Periksa Pengoptimalan Gambar untuk tahun 2026
Jalankan situs web Anda melalui Google PageSpeed Insights sekarang juga. Silakan, buka tab baru dan lakukan. Jika skor performa Anda di bawah 80, kemungkinan besar rekomendasi teratas adalah tentang gambar. Gambar yang tidak dioptimalkan adalah satu-satunya kontributor terbesar terhadap situs web yang lambat — gambar-gambar tersebut secara konsisten menyumbang lebih banyak bobot halaman dibandingkan gabungan JavaScript, CSS, font, dan HTML. Kabar baiknya adalah pengoptimalan gambar juga merupakan perbaikan kinerja yang paling mudah. Tidak ada perubahan kode, tidak ada konfigurasi ulang server, tidak ada debugging. Hanya gambar yang lebih cerdas.
Gambar Adalah Masalah Berat Halaman #1
Menurut data Arsip HTTP, gambar menyumbang sekitar 42% dari total berat rata-rata halaman web. Halaman web rata-rata berukuran sekitar 2,3 MB, dan sekitar 1 MB di antaranya adalah gambar. Namun itulah mediannya — situs yang tidak dioptimalkan dengan baik biasanya menyajikan 5-15 MB gambar per halaman. Setiap megabyte tambahan menambah sekitar 1-2 detik waktu muat pada koneksi seluler biasa. Halaman berukuran 10 MB membutuhkan waktu 8-12 detik untuk dimuat sepenuhnya di 4G, dan sebagian besar pengunjung meninggalkannya setelah 3 detik.
Masalahnya hampir selalu terletak pada salah satu dari dua hal: gambar yang dimensinya terlalu besar (menyajikan gambar 4000 piksel dalam wadah 800 piksel) atau gambar yang kompresinya kurang memadai (menyimpan pada kualitas 100% padahal 80% identik secara visual). Seringkali keduanya.
Item Daftar Periksa 1 — Sajikan Gambar dengan Ukuran yang Benar
Ini adalah satu-satunya pengoptimalan dengan dampak tertinggi. Jika CSS Anda menampilkan gambar dengan lebar 800 piksel, lebar file gambar harus sekitar 800 piksel — bukan 4000 piksel. Menayangkan gambar berukuran besar akan membuang bandwidth piksel yang dibuang oleh browser. Buka alat pengembang browser Anda, periksa gambar Anda, dan bandingkan ukuran yang ditampilkan dengan ukuran (file) aslinya. Jika ukuran aslinya lebih dari 2x ukuran yang ditampilkan, Anda membuang-buang data.
Untuk desain responsif yang gambarnya mungkin ditampilkan dalam ukuran berbeda di layar berbeda, gunakan atribut srcset untuk menyediakan beberapa ukuran gambar. Browser memilih yang terbaik untuk layar pengunjung. Pendekatan umum: sediakan gambar dengan lebar 400 piksel, 800 piksel, 1200 piksel, dan 1600 piksel. Buat varian ukuran ini dari dokumen asli Anda, dan biarkan browser memilih.
Item Daftar Periksa 2 — Gunakan Format Generasi Berikutnya
Jika Anda masih hanya menyajikan file JPEG dan PNG pada tahun 2026, Anda menyisakan 25-50% potensi penghematan ukuran file. WebP memiliki dukungan browser yang hampir universal (97%+ secara global) dan menghasilkan file 25-35% lebih kecil dari JPEG dengan kualitas yang sama. AVIF mencapai kompresi yang lebih baik — kira-kira 50% lebih kecil dari JPEG — dan dukungan browser kini di atas 92%.
Implementasinya mudah: konversikan gambar Anda ke WebP (atau AVIF jika platform Anda mendukungnya). Untuk kompatibilitas maksimum, gunakan elemen gambar HTML untuk menyajikan AVIF ke browser yang mendukungnya, WebP sebagai cadangan, dan JPEG sebagai cadangan terakhir. Sebagian besar platform CMS modern dan generator situs statis memiliki plugin atau fitur bawaan untuk menangani hal ini secara otomatis.
Daftar Periksa Item 3 — Menerapkan Pemuatan Lambat
Pemuatan lambat menunda pemuatan gambar yang berada di bawah area pandang yang terlihat. Browser pengunjung hanya mendownload gambar saat mereka menggulir di dekatnya, daripada memuat semua gambar di halaman sekaligus. Ini secara dramatis meningkatkan waktu buka halaman awal, terutama pada halaman dengan banyak gambar seperti portofolio, galeri, atau postingan blog yang panjang. Dalam HTML, itu semudah menambahkan memuat="malas" ke tag img Anda. Kebanyakan platform CMS sekarang melakukan ini secara default.
Peringatan penting: jangan memuat gambar dengan lambat yang terlihat di area pandang awal (paro atas). Gambar pahlawan Anda, logo, dan gambar apa pun yang terlihat tanpa menggulir akan segera dimuat. Pemuatan yang lambat ini sebenarnya merugikan skor LCP Anda karena menunda rendering konten visual yang paling penting.
Item Daftar Periksa 4 — Kompres pada Tingkat Kualitas yang Tepat
Sebagian besar gambar di web dapat dikompresi hingga kualitas 75-85% tanpa kehilangan apa pun. Perbedaan antara kualitas 100% dan 85% dalam JPEG biasanya tidak terlihat oleh mata manusia, namun perbedaan ukuran file adalah 2-3x. Jalankan gambar Anda melalui kompresor dan bandingkan sebelum dan sesudahnya. Anda akan terkejut melihat betapa kecilnya Anda dapat membuatnya tanpa adanya degradasi yang terlihat.
Alat Pengujian untuk Performa Gambar
Wawasan Kecepatan Laman Google: mengidentifikasi gambar tertentu yang memerlukan pengoptimalan dan memperkirakan penghematan. GTmetrix: menunjukkan grafik air terjun sehingga Anda dapat melihat dengan tepat gambar mana yang memperlambat segalanya. Tes Halaman Web: menyediakan tampilan strip film untuk melihat kapan gambar muncul selama pemuatan. Alat Pengembang Chrome: tab Jaringan memungkinkan Anda mengurutkan permintaan berdasarkan ukuran untuk menemukan pelanggar terbesar.
Item Daftar Periksa 5 — Pertimbangkan CDN untuk Gambar
Jaringan Pengiriman Konten menyimpan salinan gambar Anda di server di seluruh dunia, sehingga pengunjung mengunduh gambar dari server di dekat mereka, bukan dari server asal Anda di belahan dunia lain. Untuk situs dengan audiens global, CDN dapat mengurangi waktu pemuatan gambar sebesar 40-60%. Banyak penyedia CDN juga menawarkan pengoptimalan gambar otomatis — mereka akan mengubah ukuran, mengompresi, dan mengonversi format dengan cepat berdasarkan perangkat dan browser pengunjung.
Cloudflare (tersedia tingkat gratis), BunnyCDN, dan Amazon CloudFront adalah opsi yang populer. Jika Anda menggunakan WordPress, paket gratis Cloudflare saja dapat membuat perbedaan nyata. Untuk situs statis pada platform seperti Netlify atau Vercel, pengiriman CDN sudah ada di dalamnya.
Daftar periksa lengkap berdasarkan dampaknya: (1) mengubah ukuran gambar untuk menampilkan dimensi, (2) mengompres dengan kualitas 75-85%, (3) mengonversi ke WebP atau AVIF, (4) menerapkan pemuatan lambat untuk gambar lipatan bawah, (5) menggunakan srcset responsif untuk berbagai ukuran layar, (6) menyajikan melalui CDN, (7) mengatur header cache yang tepat sehingga pengunjung yang kembali tidak mengunduh ulang gambar. Pelajari daftar ini dan jalankan PageSpeed Insights setelah setiap langkah. Sebagian besar situs melihat peningkatan terbesarnya hanya dari langkah 1-3.
