Cara Menggunakan File WebP di WordPress & Mengurangi Waktu Muat Halaman

file webp wordpress

Sebagian besar dari kita tahu sekarang bahwa pengoptimalan gambar sangat penting karena memainkan peran besar dalam total waktu muat situs WordPress Anda. Hari ini kami ingin berbagi dengan Anda alternatif mudah tentang bagaimana mengintegrasikan file WebP Google ke situs WordPress Anda. Beberapa pengguna telah melihat pengurangan ukuran file gambar lebih dari 70%!


Apa itu WebP??

Jika Anda tidak terbiasa WebP, ini adalah format file gambar yang dibuat oleh tim kinerja web di Google dengan tujuan membuat gambar yang lebih kecil dan lebih cepat. Ini pertama kali diumumkan pada 2010 dan menampilkan metode kompresi lossy dan lossless. Gambar dikirim ke browser web dari server web berdasarkan tipe MIME yang digunakannya gambar / webp.

Gambar webP lossless adalah 26% lebih kecil dalam ukuran dibandingkan dengan PNGs dan gambar lossy WebP 25-34% lebih kecil dari JPEG.

Perusahaan seperti YouTube dan eBay sudah menggunakan WebP untuk secara diam-diam memberi daya pada banyak situs mereka. Di bawah ini adalah contoh dari eBay, di mana di beranda mereka rata-rata sekitar 30 file WebP.

ebp penggunaan webp

Mengapa WebP begitu penting? Berdasarkan httparchive, per Agustus 2016, akun gambar lebih dari 64% dari berat halaman web rata-rata. Biasanya lebih dari gabungan CSS, JS, dan HTML Anda. Jadi memilih metode optimasi gambar yang kuat dan format gambar seperti WebP sangat penting sehingga Anda dapat mengurangi berat halaman sebanyak mungkin. Secara umum, semakin kecil halaman Anda semakin cepat memuatnya. Dan itu tidak hanya akan menyenangkan pengunjung Anda, tetapi juga Google kecepatan halaman adalah faktor peringkat.

Dukungan WebP

Sekarang sementara WebP sangat menarik, penting juga untuk menyebutkan dukungan browser. Tidak semua browser modern mendukung WebP saat ini. Berdasarkan caniuse, WebP saat ini didukung di Chrome 23+, Opera 39+, semua versi Opera mini, browser Android 4.3+, dan Chrome untuk Android.

dukungan browser webp

Tapi tunggu! Jangan terlalu kecewa, karena dalam tutorial kami akan menunjukkan kepada Anda di bawah ini, ada metode untuk mengirimkan file WebP ke browser dan JPG / PNG yang didukung sebagai cadangan. Ini berarti bahwa browser yang tidak didukung tidak akan melihat gambar yang rusak, mereka hanya akan melihat apa yang mereka lihat sebelumnya. Pikirkan WebP sebagai tambahan ke situs WordPress Anda, daripada migrasi.

Berdasarkan W3Sekolah, Chrome memiliki monopoli pada pangsa pasar browser sedikit di atas 70%. Tetapi jangan hanya mengambil pangsa pasar sebagai bukti kuat, lihat data pengunjung Anda sendiri dan lihat browser apa yang mereka gunakan, karena itu mungkin berbeda berdasarkan ceruk pasar Anda. Anda mungkin akan terkejut melihat betapa miringnya statistik. Di Google Analytics di bawah “Pemirsa” Anda dapat mengklik “Browser & OS” dan melihat browser apa yang digunakan orang ketika mereka mengunjungi situs Anda. Kami menarik situs web acak dan seperti yang Anda lihat di bawah, 67% pengunjung berasal dari Chrome dan 1% lainnya dari Opera. Begitu 68% dari orang-orang ini dapat melihat dan mendapat manfaat dari WebP format file gambar!

browser chrome 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 global (CDN).

  1. [premium] Optimus Pengoptimal Gambar: Plugin kompresi gambar lossless untuk WordPress, mengonversi gambar ke WebP
  2. [Gratis] Enabler Cache WordPress: Plugin caching yang memungkinkan Anda untuk melayani WebP ke browser yang didukung

Optimus Pengoptimal Gambar

Anda dapat mengunduh Optimus Image Optimizer dari menu Repositori WordPress, dari optimus.io, atau dari dalam dashboard plugin Anda. Catatan: Ini memang memerlukan lisensi premium jika Anda ingin mengonversi gambar Anda ke WebP. Setelah diinstal, Anda dapat mengaktifkan “Pembuatan file WebP” di pengaturan plugin.

pembuatan file webp

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 masih diperlukan karena ini masih digunakan untuk melayani browser yang tidak didukung. Optimus melakukan kompresi lossless, jadi PNG dan JPG Anda juga dikompresi.

file webp dan png

Ada juga opsi pengoptimal massal jika Anda telah mengkompres gambar Anda sebelumnya dan masih perlu mengubahnya ke WebP.

pengoptimal gambar massal

Enabler Cache WordPress

Jadi sekarang Anda memiliki gambar WebP, Anda perlu cara untuk memberitahu WordPress untuk menyajikan gambar WebP ke browser yang didukung dan PNG / JPG ke browser lain. Ini dapat dilakukan dengan plugin WordPress Cache Enabler gratis. Anda dapat mengunduh plugin dari Repositori WordPress atau instal dari dalam dashboard plugin Anda. Setelah terinstal, Anda dapat mengaktifkan “Buat versi cache WebP tambahan” di pengaturan plugin.

pengaturan cache enabler

Setelah Anda mengaktifkan opsi itu, versi WebP cache tambahan dari halaman Anda dibuat.versi webp

Dan itu dia! Sekarang Anda harus memiliki file WebP berjalan di situs WordPress Anda.

Perbandingan JPG ke WebP

Kami menjalankan perbandingan JPG ke WebP untuk menunjukkan perbedaan yang bisa Anda raih.

NAMA FILEJPG ASLIJPG PESANFORMAT WEBPPERBEDAAN UKURAN%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58,8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71,7 KB93%

WebP menghasilkan a 85.87% penurunan ukuran gambar rata-rata.

Perbandingan PNG ke WebP

Sekali lagi, kami juga menjalankan perbandingan PNG ke WebP untuk menunjukkan perbedaan yang bisa Anda raih.

Nama filePNG asliPNG terkompresiFormat WebPPerbedaan Ukuran%
png-ke-webp-1.png44 KB34 KB30 KB32%
png-ke-webp-2.png46 KB35 KB33 KB28%
png-ke-webp-3.png43 KB31 KB25 KB42%
png-ke-webp-4.png30 KB24 KB18 KB40%
png-ke-webp-5.png15 KB11 KB8 KB47%
png-ke-webp-6.png34 KB24 KB18 KB47%
png-ke-webp-7.png15 KB13 KB8 KB47%
png-ke-webp-8.png63 KB47 KB44 KB30%
png-ke-webp-9.png48 KB36 KB33 KB31%
png-ke-webp-10.png17 KB14 KB11 KB35%
png-ke-webp-11.png18 KB13 KB9 KB50%
png-ke-webp-12.png61 KB45 KB39 KB36%
png-ke-webp-13.png32 KB25 KB21 KB35%
png-ke-webp-14.png26 KB21 KB17 KB35%
png-ke-webp-15.png14 KB12 KB9 KB36%
png-ke-webp-16.png36 KB27 KB24 KB33%
png-ke-webp-17.png14 KB12 KB8 KB43%
png-ke-webp-18.png21 KB18 KB13 KB38%
png-ke-webp-19.png42 KB30 KB27 KB36%
png-ke-webp-20.png23 KB20 KB18 KB22%

WebP menghasilkan a 42,8% penurunan ukuran gambar rata-rata.

Ringkasan

Seperti yang Anda lihat, WebP sangat mudah diimplementasikan di situs WordPress Anda dan Anda dapat mencapai ukuran file gambar yang lebih kecil secara drastis! 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? Itu berarti Anda tidak akan melihat adanya penurunan kualitas yang nyata. Jika Anda mencari cara yang lebih baik untuk mempercepat WordPress, WebP bisa menjadi solusi yang bagus.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map