Mengoptimalkan gambar di WordPress: kompresi, dan penundaan pemuatan.

Gambar merupakan bagian penting dari konten situs web, tetapi juga merupakan "pembunuh teratas" yang memperlambat kecepatan - gambar HD yang belum dioptimalkan (seperti 5MB) dapat menyebabkan waktu pemuatan halaman meningkat 3-5 detik, langsung membuat pengguna kehilangan kesabaran. Untungnya, optimasi gambar cukup sederhana. Dengan dua metode utama, "mengompres ukuran" dan "penundaan pemuatan", Anda dapat mengurangi waktu pemuatan gambar lebih dari 50%. Bagian ini akan menggunakan plugin untuk melakukan optimasi sepenuhnya otomatis, sehingga pemula tidak memerlukan pengetahuan teknis apa pun untuk melakukannya.

1. Mengapa gambar harus dioptimalkan? 3 data yang mengejutkan.

• Gambar biasanya menyumbang 60%-80% dari total ukuran loading sebuah situs web (jauh lebih besar daripada teks, kode, dan konten lainnya).
• Untuk setiap detik tambahan dalam waktu pemuatan, tingkat churn pengguna meningkat sebesar 20% (terutama bagi pengguna seluler yang lebih sensitif terhadap kecepatan).
• Gambar yang tidak dioptimalkan akan langsung menurunkan skor Google PageSpeed (yang memengaruhi peringkat SEO).

Tujuan utama: Kompres ukuran gambar hingga 50%-80% tanpa mengurangi kualitas gambar, dan buat gambar yang tidak muncul di layar pertama untuk "dimuat sesuai kebutuhan".

II. Metode 1: Kompresi gambar (menggunakan plugin untuk mengurangi ukuran secara otomatis)

Prinsip kompresi gambar adalah menghapus data yang berlebihan (seperti informasi perangkat pengambilan gambar, detail piksel yang tidak ditampilkan), sambil mempertahankan kualitas gambar yang terlihat oleh mata manusia secara hampir tidak berubah. Direkomendasikan untuk menggunakan plugin "Smush" untuk kompresi otomatis sepenuhnya, yang mendukung pemrosesan batch untuk gambar yang sudah ada dan kompresi otomatis untuk gambar yang baru diunggah.

Langkah 1: Instal dan aktivasi plugin Smush.

1. Masuk ke dasbor WordPress, lalu masuk ke "Plugins → Instal Plugins".
2. Cari "Smush", temukan plugin yang ditandai "Dikembangkan oleh WPMU DEV", lalu klik "Instal" → "Aktifkan".

Langkah 2: Konfigurasi kompresi otomatis (gambar baru tidak perlu diproses secara manual)

Setelah aktivasi, plugin akan secara otomatis beralih ke halaman pengaturan, dan konfigurasinya dilakukan sesuai dengan langkah-langkah berikut:

1. Mengaktifkan kompresi otomatis.Di tab "Pengaturan", pastikan untuk mencentang "Kompresi otomatis gambar yang baru diunggah" (yang sudah tercentang secara default), sehingga gambar yang diunggah nantinya akan dikompresi secara otomatis tanpa perlu melakukannya secara manual.
2. Pilih mode kompresi：
   • Untuk pemula, kami merekomendasikan "kompresi lossless" (opsi default): hanya menghapus data yang berlebihan, tanpa mengurangi kualitas gambar, dengan tingkat kompresi sekitar 30%-50%.
   • Jika Anda menginginkan tingkat kompresi yang lebih tinggi (misalnya, jika ukuran gambar masih terlalu besar), Anda dapat memilih "Kompresi dengan Kualitas Buruk": dengan sedikit penurunan kualitas gambar (yang hampir tidak terlihat oleh mata telanjang), tingkat kompresi bisa mencapai 60%-80% (perlu mengklik "Pengaturan Lanjutan" untuk mengaktifkannya).
3. \nSimpan pengaturan.: Klik "Simpan Pengaturan" di bagian bawah halaman.

Langkah 3: Kompres gambar yang sudah ada secara massal (satu kali operasi, optimasi untuk seluruh jaringan).

Jika situs web sudah memiliki banyak gambar yang tidak terkompresi (seperti gambar ilustrasi untuk artikel yang diunggah sebelumnya), gunakan fungsi "kompresi massal" untuk mengoptimalkannya dengan sekali klik:

1. Di halaman plugin Smush, klik tab "Smush Massal" di sebelah kiri.
2. Klik "Mulai Sekarang", dan plugin akan secara otomatis memindai semua gambar di perpustakaan media.
3. Setelah pemindaian selesai, klik "Terapkan Smush ke XX gambar", sistem akan mengompresnya secara massal (prosesnya mungkin memakan waktu beberapa menit, tidak perlu menunggu, dan dapat berjalan di latar belakang).
4. \nLihat efek kompresinya.Setelah kompresi selesai, akan ditampilkan "Total ruang yang disimpan" (seperti "12 MB telah disimpan"), dan perbandingan ukuran sebelum dan sesudah kompresi untuk setiap gambar juga akan ditampilkan.

III. Metode 2: Pemuatan tertunda (memungkinkan gambar "dimuat sesuai kebutuhan")

Prinsip dari Lazy Load adalah:Hanya ketika pengguna menggulir ke posisi gambar, gambar itu akan mulai dimuat.Dengan cara ini, gambar di layar pertama (area yang pertama kali terlihat saat membuka halaman) akan dimuat terlebih dahulu, sedangkan gambar yang tidak berada di layar pertama (seperti gambar artikel di bawah dan gambar footer) tidak akan dimuat untuk sementara waktu, sehingga secara signifikan mengurangi waktu pemuatan awal.

Gunakan plugin Smush untuk mengaktifkan loading tertunda dengan satu klik (tanpa memerlukan plugin tambahan).

Smush sudah memiliki fitur loading tertunda, jadi tidak perlu menginstal plugin tambahan. Langkah-langkah pengaturannya adalah:

1. Di halaman plugin Smush, klik tab "Lazy Load" di sisi kiri.
2. Centang "Aktifkan Loading Tertunda", dan ikuti konfigurasi yang direkomendasikan di bawah ini:
   • "Tipe gambar yang ditunda pemuatannya": Pilih semua (gambar, avatar, thumbnail, dll.).
   • "Menghilangkan gambar di layar pertama": Disarankan untuk mencentang ini (gambar di layar pertama tidak ditunda, memastikan pengguna dapat melihat konten utama dengan cepat saat membuka halaman).
   • "Animasi Pemuatan": Tetapkan ke default (menampilkan animasi ringan untuk memberi tahu pengguna bahwa gambar sedang dimuat).
3. Klik "Simpan Pengaturan", dan pemuatan tertunda akan segera berlaku.

Verifikasi apakah pemuatan tertunda berfungsi.

1. Buka halaman artikel apa saja di situs web (yang berisi banyak gambar), lalu tekan F12 untuk membuka "Alat Pengembang" browser.
2. Klik tab "Jaringan", segarkan halaman, dan amati proses pemuatan gambar:
   • Saat pertama kali dimuat, hanya gambar di layar pertama yang akan ditampilkan dalam daftar "Jaringan".
   • Gulir halaman ke bawah, dan ketika gambar yang bukan berada di layar pertama muncul, catatan pemuatan gambar-gambar tersebut baru akan muncul di daftar "Jaringan", yang menunjukkan bahwa pemuatan tertunda telah berlaku.

4. Teknik tambahan untuk mengoptimalkan gambar yang harus diketahui oleh pemula.

1. Pilih format gambar yang benar (lebih mendasar daripada kompresi).

Sebelum mengunggah gambar, pilih format yang tepat untuk mengurangi ukurannya dari sumbernya:

• Foto / Gambar KompleksMenggunakan format WebP (ukuran 30%-50% lebih kecil dari JPG, dan kualitas gambar lebih baik), plugin Smush dapat secara otomatis mengonversi JPG/PNG menjadi WebP (aktifkan "konversi otomatis ke WebP" di "Pengaturan Lanjutan").
• Grafik / ikon sederhana.Gunakan format PNG (mendukung latar belakang transparan, ukuran file kecil), dan hindari menggunakan JPG.
• Sama sekali tidak menggunakan format BMP dan TIFF.Format-format ini sangat besar dan tidak cocok untuk digunakan di halaman web.

2. Kontrol ukuran gambar (jangan gunakan "gambar besar yang ditampilkan dalam ukuran kecil").

Banyak pemula langsung mengunggah gambar HD yang diambil dengan kamera (seperti 3000×2000 piksel), lalu mengaturnya untuk ditampilkan sebagai 300×200 piksel di WordPress — ini salah! Karena browser akan tetap memuat gambar asli dengan ukuran besar, yang membuang-buang bandwidth dan waktu.

Hal yang benar untuk dilakukan.：

• Sebelum mengunggah, gunakan alat gambar (seperti "Painting" yang terpasang di komputer, atau alat online seperti "Canva") untuk memotong ukuran gambar menjadi ukuran yang sebenarnya ditampilkan (misalnya, spanduk layar utama dengan lebar 1200 piksel sudah cukup).
• Jika Anda tidak tahu cara menggunakan alat gambar, Anda dapat menginstal plugin "Imsanity", yang secara otomatis akan mengompres gambar besar yang diunggah ke ukuran yang ditentukan (seperti lebar maksimum 1200 piksel).

3. Hindari penyalahgunaan gambar (bukan semakin banyak semakin baik).

• Jika konten dapat dijelaskan dengan kata-kata, jangan gunakan gambar (seperti petunjuk langkah-langkah sederhana).
• Beberapa gambar berturut-turut dapat digabungkan menjadi gambar bergulir (seperti tampilan produk), yang mengurangi jumlah gambar yang dimuat secara bersamaan.

5. Memecahkan Masalah Umum.

1. Kualitas gambar setelah dikompresi menjadi sangat buruk?

• Jika menggunakan "kompresi lossy", Anda dapat mengurangi intensitas kompresi di pengaturan Smush ("Pengaturan Lanjutan" → "Intensitas Kompresi" disetel ke 50%).
• Disarankan untuk menggunakan "kompresi lossless" + "format WebP" terlebih dahulu, untuk menyeimbangkan ukuran file dan kualitas gambar.

2. Apakah penundaan pemuatan menyebabkan gambar ditampilkan secara tidak normal (seperti kosong, tidak tepat)?

• Periksa apakah gambar di layar pertama telah dikecualikan (jika tidak, mungkin menyebabkan gambar di layar pertama dimuat terlambat dan menampilkan layar kosong untuk sementara waktu).
• Jika beberapa gambar harus segera dimuat, Anda dapat memasukkan nama kelas CSS gambar tersebut di kotak "Pengecualian" dalam pengaturan "Pemuatan Tertunda" Smush (membutuhkan pengetahuan kode sederhana; pemula dapat menonaktifkan pemuatan tertunda untuk halaman yang berisi gambar tersebut untuk sementara waktu).

3. Setelah dioptimalkan, peningkatan kecepatannya tidak terlalu jelas?

• Uji ulang menggunakan GTmetrix (referensi) Alat untuk memeriksa kecepatan situs web(.), lihat "Grafik Air Terjun" untuk memastikan waktu pemuatan gambar berkurang.
• Jika masih lambat, mungkin disebabkan oleh faktor lain (seperti respons server yang lambat, terlalu banyak plugin), dan perlu dikombinasikan dengan metode optimasi selanjutnya (seperti mengaktifkan caching).

Menyimpulkan.

Optimasi gambar adalah langkah yang paling "menguntungkan" dalam mengoptimalkan kecepatan situs web — dengan plugin Smush, Anda hanya perlu menyiapkannya dalam 10 menit, dan waktu pemuatan gambar dapat dikurangi hingga lebih dari 50%. Langkah-langkah utamanya adalah: menginstal Smush → mengaktifkan kompresi otomatis dan kompresi batch → mengaktifkan lazy loading (mengecualikan gambar di layar pertama).

Ingat, prinsip optimasi gambar adalah "cukup baik": tidak perlu mengejar tingkat kompresi yang ekstrem, juga tidak perlu mengunggah gambar dengan resolusi sangat tinggi. Menemukan keseimbangan antara kualitas gambar dan kecepatan, sehingga pengguna dapat melihat konten dengan jelas dan memuatnya dengan cepat, adalah kondisi terbaiknya.