Optimasi WordPress Menggunakan Image Format WebP

Optimasi WordPress pada dasarnya adalah segala upaya yang dilakukan untuk membuat website lebih cepat pemuatan lamannya disisi pengguna situs. Pada kesempatan yang terdahulu telah dibahas cara optimasi WordPress menggunakan response header If Modified Since dan masih seputar topik yang sama, kali ini akan dibahas teknik optimasi WordPress dengan metode lain yaitu menggunakan Image Format WebP.

Untuk diketahui, WebP sendiri merupakan format modern yang dikembangkan oleh Google, bertujuan mempercepat website dengan cara membuat kompresi pada gambar lebih kecil dari format PNG maupun JPG/JPEG yang telah biasa kita gunakan, sehingga pemuatan gambar pada laman website menjadi ringan.

Penggunaan Format WebP juga akan menghemat media penyimpanan disk, format WebP dapat mengecilkan ukuran gambar 26% lebih kecil dibandingkan dengan format PNG dan 25% sampai dengan 30% lebih kecil dari format JPG/JPEG.

Untuk mengetahui lebih detail bagaimana format WebP berkerja ? penjelasan selanjutnya dapat Anda pelajari langsung dari sumber resminya (Google) dengan mengunjungi tautan link berikut https://developers.google.com/speed/webp/docs/compression.

Cara Menggunakan Format WebP Pada WordPress

Ada beberapa cara yang dapat pakai dalam penggunaan format WebP pada website berbasis WordPress, berikut akan diuraikan cara penggunaannya mulai dari yang instan sampai pada konfigurasi secara mandiri.

1. Plugins

Menggunakan format WebP dengan bantuan plugin adalah cara yang paling favorit untuk dilakukan, tidak diperlukan keahlian khusus bidang coding. Hanya dibutuhkan mengikuti arahan setup yang sudah ada pada manual penggunaannya tersebut.

Dari pengalaman kami, kami rekomendasikan menggunakan plugin Cache Enabler besutan KeyCDN. Mengapa menggunakan plugin ini ? sederhana saja, plugin ini aktif dimaintenance dan update mengikuti perkembangan WordPress. Selain itu karena reputasi developernya (KeyCDN) sendiri sebagai Provider CDN populer selain CloudFlare.

Untuk mendownload, menginstalas dan cara setting Cache Enabler, semua bisa dikerjakan mudah dengan mengunjungi tautan link berikut https://wordpress.org/plugins/cache-enabler/ .

Alternatif plugin lainnya adalah memanfaatkan kolom pencarian di laman Plugin WordPress, silahkan ketik kata kunci WebP, akan ditampilkan sejumlah plugin WebP dari hasil pencarian tersebut. Namun, sebelum Anda gunakan, sebaiknya cek terlebih dahulu kompatibiltasnya dengan versi WordPress yang sedang digunakan saat ini.

2. Modul Google Pagespeed

Modul ini bersifat Ekstension pada web server Apache dan Nginx (Baca : Engine X). Format WebP ini akan secara otomatis tersedia jika mengaktifkan modul Google Pagespeed.

Untuk pengguna Shared Hosting, sebaiknya ditanyakan terlebih dahulu ke pihak Hosting Providernya apakah modul ini merupakan fasilitas yang sudah tersedia atau belum.

Namun, bagi pengguna private server ini menjadi keuntungan tersendiri karena tidak tergantung pihak lain dan Anda dapat melakukan instalasi secara mandiri.

Sebagai acuan, panduan instalasi berikut ini ditujukan untuk pengguna linux distro berbasis Debian Packages seperti Ubuntu karena lebih mudah ditemukan panduan lanjutan serta troubleshotingnya.

Gunakan baris perintah berikut untuk melakukan instalasi pada Apache web server :

Untuk Nginx web server dibutuhkan paket dependensi sebelum melakukan instalasi nginx, berikut baris perintah untuk instalasi dependensinya :

Setelah paket dependensi selesai terinstal, maka dapat dilanjutkan dengan instalasi modul Google Pagespeednya dengan serangkaian baris perintah berikut ini :

Jika Modul Google Pagespeed sudah terinstall, selanjutnya aktifkan modul tersebut beserta konfigurasi untuk WebPnya. Berikut konfigurasi yang dapat ditambahkan pada berkas konfigurasi virtual host Anda :

Note : Modul-modul tersebut aktif pada tingkat basic saja.

3. Online WebP Converter

Cara instan lainnya adalah menggunakan Online WebP Converter, tool ini tersedia gratis dengan mengunjungi tautan link
https://webp-converter.com

Untuk menggunakannya tidaklah sulit, upload image berformat PNG/JPEG ke alamat situs tersebut untuk diconvert menjadi image berformat WebP, selanjutnya upload hasil convert tadi ke server Anda.

4. Compile WebP

Opsi ini bisa digunakan jika menggunakan privat server, lakukan instalasi dari source code berikut ini dengan asumsi menggunakan Ubuntu atau Debian sebagai Operating Systemnya.

Install terlebih dahulu dependensi yang dibutuhkan dengan baris perintah berikut :

Kemudian download sources code libwebp-0.6.1.tar.gz ke server Anda pada directory dimana lokasi image berada, ekstrak file download tersebut kemudian lakukan penginstalan seperti tampak pada serangkaian baris perintah berikut.

Untuk merubah image PNG/JPEG ke format WebP dengan tingkat kompresi tertentu, gunakan perintah di bawah. Pada contoh di bawah asumsinya tingkat kompresi yang digunakan adalah 80%, tetapkan tingkat kompresi sesuai kebutuhan Anda.

Menguji WebP

Pertama, yang akan diujikan adalah menggunakan image yang ada di situs website ini sendiri. Seluruh image akan dikompresikan ke format WebP 80%, berikut informasi hasil kompresinya :

Setelah image terkonversi ke format WebP, selanjutnya akan kita uji seberapa besar signifikan berkontribusi dalam optimasi WordPress khususnya penurunan ukuran image. Berikut disajikan dua screenshot hasil pengujian dengan menggunakan alat uji Google Pagespeed Insights dan Gift Of Speed.

Gisft Of Speed
https://www.giftofspeed.com/image-delivery/

Google Paegspeed
https://developers.google.com/speed/pagespeed/insights/

Dari hasil uji tes tersebut diperoleh informasi bahwa seluruh penggunaan image format WebP pada situs ini telah teroptimasi dengan tingkat kompresi image sebesar 80%, baik informasi Gift Of Speed maupun Google Pagespeed Insights.

Kesimpulan

Hasil pengujian image telah membuktikan bahwa kompresi image menggunakan teknik konversi ke format WebP kompresi 80% telah berhasil meningkatkan status image website menjadi teroptimasi (Images Optimized). Menggunakan teknik optimasi ini akan berdampak baik pada kecepatan website WordPress dan SEO WordPress, seperti kita ketahui Images Optimized merupakan salah satu dari banyak faktor penentu dalam sistem perangkingan Google Search Engine.

Optimasi WordPress Menggunakan Response Header “If Modified Since”

Kurang lebihnya begini, setiap ada yang mengakses ke laman website maka itu dianggap sebagai Request, tentu ketika ada Request maka secara otomatis server web akan memproses dan menerima apa yang diminta client kemudian meresponnya dengan menampilkan informasi data sesuai dengan yang diminta.

Request ini lazimnya datang dari Browser Client, atau bisa juga dari Googlebot yang melakukan rutinitas perambanan website untuk mendapatkan update terbaru dari isi sebuah laman website.

Lalu apa sebenarnya “If Modified Since” itu dalam kaitannya dengan Request dan Response tadi?

Pada dasarnya “If Modified Since” merupakan Response (HTTP Header) yang berisi tanggal dan waktu dimana laman website terakhir diubah atau diperbarui.

Informasi ini akan digunakan sebagai validator untuk menentukan apakah isi dari sebuah laman website yang diterima dan disimpan sama atau tidak.

Jika isi laman sama, maka HTTP Header akan mengirim kode status 304 (Not Modified) yang berarti isi dari lama tersebut tidak berubah.

Atau, jika laman telah berubah (Update), maka HTTP Header akan mengirim kode status 200 (OK) yang berarti konten dapat dimuat dengan baik.

Lalu bagaimana “If Modified Since” dapat mengoptimasi WordPress?

Dari sisi browser, saat pengunjung mengakses dan melihat-lihat situs WordPress Anda, maka browser akan menyimpan file-file statis seperti Images, HTML, CSS, Javascript dan file lainnya secara lokal pada web browser.

Jika diwaktu yang lain pengunjung yang sama mengakses kembali situs WordPress Anda, maka server web akan memeriksa terlebih dahulu apakah ada perubahan pada file atau tidak sejak terakhir kali diakses. Jika tidak ada perubahan (Kode Status 304), maka informasinya akan dimuat dari cache lokal browser yang secara signifikan dapat meningkatkan kecepatan pemuatan konten laman.

Dari sisi Googlebot, saat crawler datang untuk pertama kalinya maka status kode yang diterima adalah 200 atau konten termuat dengan baik. Maka Googlebot memeriksa dan mencatat setiap laman yang ada di website secara keseluruhan.

Diwaktu yang lain Googlebot akan datang kembali untuk melakukan crawl. Maka yang akan dilihat pertama kali adalah Response Headernya, jika tidak ada perubahan (kode status 304) atau laman web belum berubah, maka tidak perlu crawl lagi dan begitu juga sebaliknya. Jadi Googlebot tidak perlu melakukan crawl keseluruh laman seperti pada saat awal-awal, ini tentu akan sangat menghemat penggunaan Bandwith Hosting.

Disamping menghemat penggunaan Bandwith, laman website juga akan ditampilkan pada Google Cache berdasarkan laman terakhir yang diperbarui, jadi pada hasil pencarian Google akan ditampilkan update data terbaru.

Untuk mengetahui kapan update laman Anda terakhir kali diperbarui pada Google Cache, silahkan buka Google.com di web browser lalu kemudian pada kolom pencarian ketikan :

cache:http://domainanda.com //Ganti dengan domain Anda

Tekan Enter, maka akan ditampilkam informasi terbaru pada laman Google Cache berdasarkan laman terakhir yang diperbarui.

Google Cache

Untuk mengetahui apakah server web Anda sudah menggunakan “If Modified Since” atau belum, silahkan cek menggunakan link berikut:

https://www.hscripts.com/tools/if-modified-since/index.php

Last Modified

Atau, jika menggunakan VPS sebagai personal hostingnya, maka Anda dapat mengetahuinya dengan perintah berikut :

curl -D- -o /dev/null http://domainanda.com

Output jika menggunakan “If Modified Since” :

Last-Modified: Thursday, 23-Nov-2017 02:10:39 GMT

Output lengkapnya akan tampak sebagai berikut :

If Modified Since

Jika server web Anda belum mendukung fitur “If Modified Since” silahkan konfirmasikan ke pihak hosting Anda. Fitur ini bisa ditambahkan pada sisi web server (Apache, Nginx, LiteSpeed dll.) dengan mengaktifkan Modul HTTP Header.