Kenapa Gambar Jadi Penyebab Utama
Gambar biasanya menyumbang bagian terbesar dari ukuran sebuah halaman, dan di WordPress satu gambar yang diunggah bisa menghasilkan banyak berkas sekaligus. Setiap gambar yang masuk otomatis dibuatkan beberapa ukuran turunan, dan tema serta plugin bisa menambah ukuran mereka sendiri.
Mengunggah foto berukuran layar besar berarti menghasilkan turunan yang besar juga. WordPress memang memperkecil gambar yang lebarnya melebihi 2560 piksel sejak versi 5.3, tetapi ukuran itu tetap jauh dari kebutuhan kebanyakan halaman.
Akibatnya paling terasa di ponsel dengan koneksi terbatas, tempat banyak pengunjung berada. Urutan perbaikan kecepatan secara keseluruhan ada di panduan mempercepat WordPress.
Empat Langkah Berurutan
1. Kecilkan sebelum mengunggah
Tetapkan lebar maksimal yang wajar untuk situs Anda, dan kecilkan gambar sebelum masuk ke Media Library. Ini langkah yang paling berpengaruh, dan satu-satunya yang tidak butuh plugin.
Mengunggah gambar jauh lebih besar dari lebar tampilnya tidak menambah ketajaman. Ia hanya menambah beban.
2. Pakai format modern
Format web modern menghasilkan berkas yang jauh lebih kecil pada kualitas yang sama dibanding format lama. WordPress menerima unggahan WebP sejak versi 5.8 dan AVIF sejak versi 6.5, selama server hosting mendukungnya.
WordPress tidak mengubah JPEG atau PNG yang sudah ada menjadi WebP secara otomatis. Konversinya dilakukan sebelum mengunggah, lewat plugin optimasi, atau lewat plugin Modern Image Formats dari tim performa WordPress.
3. Kompres
Kompresi mengurangi ukuran berkas dengan membuang detail yang tidak terlihat mata. Untuk foto biasa, tingkat kompresi menengah biasanya tidak terlihat bedanya di layar.
Saat memilih plugin kompresi, periksa tiga hal: apakah berkas asli disimpan, apakah gambar lama bisa diproses secara massal, dan apakah pemrosesan terjadi di server Anda atau di layanan mereka.
4. Tunda pemuatan yang belum terlihat
Gambar di bawah layar pertama sebaiknya baru dimuat saat pengunjung menggulir ke sana. WordPress sudah menambahkan atribut loading="lazy" pada gambar secara bawaan sejak versi 5.5.
Pengecualiannya penting: gambar utama di bagian paling atas halaman tidak boleh ditunda. Menundanya memperlambat waktu tampil elemen terbesar (LCP), yang ambang baiknya 2,5 detik.
WordPress sudah membantu di sini. Sejak versi 5.9 gambar pertama dilewatkan dari penundaan, dan sejak versi 6.3 WordPress menambahkan fetchpriority="high" pada gambar yang dinilai sebagai gambar LCP. Tebakan ini tidak selalu tepat, misalnya ketika logo di header dihitung sebagai gambar pertama, jadi periksa sendiri gambar utama pada halaman terpenting.
Yang Sering Terlewat
- Gambar latar lewat CSS tidak ikut diproses plugin optimasi gambar.
- Logo dan ikon sering diunggah jauh lebih besar dari ukuran tampilnya.
- Gambar unggulan dipakai di banyak tempat dengan ukuran berbeda, jadi pastikan turunannya sesuai.
- Berkas dari page builder kadang tidak melalui alur unggah biasa.
Mengurangi Ukuran Turunan yang Dihasilkan
Kalau tema Anda mendaftarkan banyak ukuran turunan dan hanya sebagian yang dipakai, sisanya memenuhi server tanpa guna. Jumlahnya bisa dikurangi lewat pengaturan atau potongan kode di tema turunan.
Buat cadangan sebelum mengubahnya. Perubahan hanya berlaku untuk gambar yang diunggah setelahnya, sehingga gambar lama perlu diproses ulang.
Jangan Unggah Video ke Media Library
Video membebani server dan membuat cadangan menjadi sangat besar, sementara pemutarannya tidak menyesuaikan kualitas dengan koneksi pengunjung. Pakai layanan video seperti YouTube, lalu sematkan alamatnya. WordPress mengubah alamat dari layanan yang didukung menjadi pemutar otomatis.
Cara Memeriksa Hasilnya
- Buka halaman terberat di ponsel dan rasakan bedanya, bukan hanya melihat skor.
- Periksa ukuran berkas gambar lewat alat pengembang peramban dan cari yang jauh lebih besar dari lainnya.
- Ukur waktu tampil elemen terbesar sebelum dan sesudah.
- Pastikan gambar tidak buram setelah dikompres, terutama logo dan gambar produk.
FAQ
Apakah kompresi menurunkan kualitas gambar?
Sedikit, dan biasanya tidak terlihat di layar pada tingkat menengah. Yang perlu diperiksa adalah logo dan gambar produk, tempat detail kecil lebih terasa.
Apakah perlu plugin optimasi gambar?
Berguna untuk memproses yang sudah terlanjur ada dan mengotomatiskan yang baru. Mengecilkan gambar sebelum mengunggah tetap langkah yang paling berpengaruh. Di agency pembuatan website Jogja Roofel, paket Website SEO mencakup optimasi kecepatan dan Core Web Vitals yang diukur di PageSpeed Insights.
Format mana yang sebaiknya dipakai?
Format web modern seperti WebP untuk foto, dan format vektor untuk logo dan ikon. Format vektor tetap tajam di semua ukuran dengan berkas yang kecil.