Gambar dan media sering menjadi penyebab utama halaman web lambat. Jika tidak dioptimasi, ukuran file besar akan memperpanjang waktu muat dan menurunkan skor SEO. Optimasi media membuat pengalaman pengguna lebih cepat dan hemat bandwidth. Ini adalah investasi penting untuk frontend performance.
Gunakan format dan ukuran yang tepat
Pilih format modern seperti WebP atau AVIF untuk mengurangi ukuran file. Jangan memuat gambar dengan resolusi lebih besar dari kebutuhan tampilan. Gunakan responsive image agar browser memilih ukuran yang paling sesuai.
- Terapkan
srcsetuntuk variasi ukuran. - Kompres gambar tanpa menurunkan kualitas secara drastis.
- Hindari GIF besar, gunakan video kecil jika perlu.
Lazy loading dan placeholder
Gunakan lazy loading agar gambar di bawah fold tidak dimuat sekaligus. Tampilkan placeholder atau blur-up agar tampilan tetap mulus. Ini menurunkan waktu muat awal dan membuat halaman lebih responsif.
Jika aplikasi menggunakan framework modern, pastikan komponen image sudah menangani optimasi otomatis. Hindari inline base64 untuk gambar besar karena bisa memperbesar HTML.
CDN dan caching
Simpan media di CDN agar pengguna mendapatkan file dari lokasi terdekat. Atur cache control agar browser menyimpan media lebih lama. Gunakan versioning jika media sering berubah.
Optimasi media yang konsisten meningkatkan performa frontend, memperbaiki core web vitals, dan membuat aplikasi web lebih SEO friendly.