Cara Menggunakan File WebP di WordPress
Sebagian besar dari kita sekarang sudah mengetahui bahwa pengoptimalan gambar sangat penting karena berperan besar dalam total waktu muat situs WordPress Anda. Hari ini kami ingin berbagi dengan Anda alternatif mudah tentang cara mengintegrasikan file WebP Google ke situs WordPress Anda. Beberapa pengguna telah melihat pengurangan ukuran file gambar lebih dari 70%!
Apa itu WebP?
Jika Anda belum familiar dengan WebP, ini adalah format file gambar yang dibuat oleh tim kinerja web di Google dengan tujuan untuk membuat gambar yang lebih kecil dan lebih cepat. Ini pertama kali diumumkan pada tahun 2010 dan menampilkan metode kompresi lossy dan lossless. Gambar dikirim ke browser web dari server web berdasarkan jenis MIME yang digunakan yaitu image/webp.
Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan PNG dan gambar lossy WebP berukuran 25-34% lebih kecil dari JPEG.
Perusahaan seperti YouTube dan eBay sudah menggunakan WebP untuk memberi daya pada banyak situs mereka secara diam-diam. Di bawah ini adalah contoh dari eBay, di mana di beranda mereka rata-rata terdapat sekitar 30 file WebP.
Mengapa WebP sangat penting? Menurut httparchive, per Agustus 2016, gambar menyumbang lebih dari 64% rata-rata bobot laman web. Biasanya ini lebih dari gabungan CSS, JS, dan HTML Anda. Jadi memilih metode pengoptimalan gambar dan format gambar yang kuat seperti WebP sangatlah penting agar Anda dapat mengurangi bobot halaman sebanyak mungkin. Umumnya, semakin kecil halaman Anda, semakin cepat pemuatannya. Dan itu tidak hanya akan menyenangkan pengunjung Anda, tetapi juga Google, karena kecepatan halaman adalah faktor peringkat.
Dukungan WebP
Meskipun WebP sangat menarik, penting juga untuk menyebutkan dukungan browser. Tidak semua browser modern mendukung WebP saat ini. Menurut caniuse, WebP saat ini didukung di Chrome 23+, Opera 39+, semua versi Opera mini, browser Android 4.3+, dan Chrome untuk Android.
Tapi tunggu! Jangan terlalu kecewa, karena dalam tutorial yang akan kami tunjukkan di bawah ini, terdapat metode untuk mengirimkan file WebP ke browser yang didukung dan JPG/PNG sebagai cadangan. Ini berarti browser yang tidak didukung tidak akan melihat gambar yang rusak, mereka hanya akan melihat apa yang mereka lihat sebelumnya. Pikirkan WebP sebagai tambahan pada situs WordPress Anda, bukan sebagai migrasi.
Menurut W3Schools, Chrome memiliki monopoli pangsa pasar browser sedikit di atas 70%. Namun jangan hanya menganggap pangsa pasar sebagai bukti kuat, lihat data pengunjung Anda dan lihat browser apa yang mereka gunakan, karena data tersebut mungkin berbeda berdasarkan niche Anda. Anda mungkin akan terkejut melihat betapa miringnya statistik tersebut. Di Google Analytics pada “Audiens” Anda dapat mengklik “Browser & OS” dan melihat browser apa yang digunakan orang-orang saat mereka mengunjungi situs Anda. Kami menarik situs web secara acak dan seperti yang Anda lihat di bawah, 67% pengunjung berasal dari Chrome dan 1% lainnya dari Opera. Jadi 68% dari orang-orang ini dapat melihat dan memanfaatkan format file gambar WebP!
Cara Menggunakan File WebP di WordPress
Dalam contoh hari ini kita akan menggunakan kombinasi dua plugin WordPress yang berbeda untuk mengaktifkan dan menjalankan WebP di WordPress. Ini dibuat dan dikembangkan oleh tim di KeyCDN, yang merupakan jaringan pengiriman konten (CDN) global.
- [premium] Optimus Image Optimizer: Plugin kompresi gambar lossless untuk WordPress, mengonversi gambar ke WebP
- [gratis] Pengaktif Cache WordPress: Plugin caching yang memungkinkan Anda menyajikan WebP ke browser yang didukung
Pengoptimal Gambar Optimus
Anda dapat mendownload Optimus Image Optimizer dari repositori WordPress, dari optimus.io, atau dari dalam dasbor plugin Anda. Catatan: Ini memerlukan lisensi premium jika Anda ingin mengonversi gambar Anda ke WebP. Setelah terinstal, Anda dapat mengaktifkan “Pembuatan file WebP” di pengaturan plugin.
Setelah WebP diaktifkan, ini pada dasarnya membuat gambar tambahan untuk semua yang dikonversi. Jadi jika Anda mengunggah file PNG atau JPG, sekarang juga ada versi .webp dari gambar Anda. Ingat, PNG/JPG tetap diperlukan karena masih digunakan untuk melayani browser yang tidak didukung. Optimus melakukan kompresi lossless, sehingga PNG dan JPG Anda juga terkompresi.
Ada juga opsi pengoptimal massal jika Anda sudah mengompresi gambar sebelumnya dan masih perlu mengonversinya ke WebP.
Pengaktif Cache WordPress
Jadi sekarang Anda memiliki gambar WebP, Anda memerlukan cara untuk memberi tahu WordPress agar menyajikan gambar WebP ke browser yang didukung dan PNG/JPG ke browser lain. Ini dapat dicapai dengan plugin WordPress Cache Enabler gratis. Anda dapat mendownload plugin dari repositori WordPress atau menginstalnya dari dalam dasbor plugin Anda. Setelah terinstal, Anda dapat mengaktifkan “Buat versi cache WebP tambahan” di setelan plugin.
Setelah Anda mengaktifkan opsi itu, versi WebP cache tambahan dari halaman Anda akan dibuat.
Dan itu dia! Sekarang Anda seharusnya sudah menjalankan file WebP di situs WordPress Anda.
Perbandingan JPG ke WebP
Kami melakukan perbandingan JPG dengan WebP untuk menunjukkan perbedaan yang dapat Anda capai.
| FILE NAME | ORIGINAL JPG | COMPRESSED JPG | WEBP FORMAT | SIZE DIFFERENCE % |
|---|---|---|---|---|
| jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
| jpg-to-webp-2.jpg | 599 KB | 529 KB | 58.8 KB | 90% |
| jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
| jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
| jpg-to-webp-5.jpg | 960 KB | 877 KB | 71.7 KB | 93% |
WebP menghasilkan penurunan rata-rata ukuran gambar sebesar 85,87%.
Perbandingan PNG ke WebP
Sekali lagi, kami juga melakukan perbandingan PNG dengan WebP untuk menunjukkan perbedaan yang dapat Anda capai.
| File Name | Original PNG | Compressed PNG | WebP Format | Size Difference % |
|---|---|---|---|---|
| png-to-webp-1.png | 44 KB | 34 KB | 30 KB | 32% |
| png-to-webp-2.png | 46 KB | 35 KB | 33 KB | 28% |
| png-to-webp-3.png | 43 KB | 31 KB | 25 KB | 42% |
| png-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
| png-to-webp-5.png | 15 KB | 11 KB | 8 KB | 47% |
| png-to-webp-6.png | 34 KB | 24 KB | 18 KB | 47% |
| png-to-webp-7.png | 15 KB | 13 KB | 8 KB | 47% |
| png-to-webp-8.png | 63 KB | 47 KB | 44 KB | 30% |
| png-to-webp-9.png | 48 KB | 36 KB | 33 KB | 31% |
| png-to-webp-10.png | 17 KB | 14 KB | 11 KB | 35% |
| png-to-webp-11.png | 18 KB | 13 KB | 9 KB | 50% |
| png-to-webp-12.png | 61 KB | 45 KB | 39 KB | 36% |
| png-to-webp-13.png | 32 KB | 25 KB | 21 KB | 35% |
| png-to-webp-14.png | 26 KB | 21 KB | 17 KB | 35% |
| png-to-webp-15.png | 14 KB | 12 KB | 9 KB | 36% |
| png-to-webp-16.png | 36 KB | 27 KB | 24 KB | 33% |
| png-to-webp-17.png | 14 KB | 12 KB | 8 KB | 43% |
| png-to-webp-18.png | 21 KB | 18 KB | 13 KB | 38% |
| png-to-webp-19.png | 42 KB | 30 KB | 27 KB | 36% |
| png-to-webp-20.png | 23 KB | 20 KB | 18 KB | 22% |
WebP menghasilkan penurunan rata-rata ukuran gambar sebesar 42,8%.
Ringkasan
Seperti yang Anda lihat, WebP sangat mudah diterapkan di situs WordPress Anda dan Anda dapat mencapai ukuran file gambar yang jauh lebih kecil! Tidak ada kompresi gambar di luar sana yang dapat dibandingkan dengan penghematan WebP. Oh, dan apakah kami menyebutkan bahwa WebP memiliki kemampuan untuk menggunakan kompresi lossless? Artinya, Anda tidak akan melihat penurunan kualitas yang nyata. Jika Anda mencari cara yang lebih baik untuk mempercepat WordPress, WebP bisa menjadi solusi yang bagus.