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.

Penerapan Tag Hreflang Untuk Regional dan Bahasa Indonesia

Untuk website yang mentargetkan pengunjung lokal (Customer) Indonesia, penggunaan tag hreflang pada website akan mempunyai dampak positif dalam rangka optimasi website di Google penelusuran. Atribut rel=”alternate” hreflang=”x” yang disematkan pada informasi header website Anda akan digunakan Google sebagai indikator untuk menyajikan hasil penelusuran yang benar dan akurat buat pengguna Google Search lokal (Google.co.id).

Selain untuk penelusuran lokal, penerapan tag hreflang juga baik untuk penargetan pengunjung global. Misal konten disediakan dalam bahasa Indonesia untuk pengguna di kawasan Negara tetangga yang mayoritas mengerti Bahasa Indonesia seperti : Malaysia, Brunei Darussalam, Timor Leste, Filipina, Singapore dan Australia. Tentu penerapan tag hreflang ini akan menambah manfaat buat website Anda.

Note : Selanjutnya, informasi resmi Google perihal penggunaan tag hreflang dapat Anda pelajari lebih detail pada : https://support.google.com/webmasters/answer/189077?hl=id

Sebelum memasang tag hreflang pada website Anda, ada baiknya sedikit mengikuti arahan pada tahapan-tahapan berikut untuk memudahkan Anda dalam menerapkannya.

Persiapan

Membuat tag hreflang terlebih dahulu dengan menggunakan batuan hreflang generator : https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/

Tag Hreflang Generator

Isikan alamat URL Anda pada form “Add a valid URL like https://example.com, pilih opsi Bahasa yang digunakan pada website Anda (Select the Language of the URL) dan pilih tujuan Negara (Select Country of the URL).

Anda bisa menggunakan “ADD AN ADDITIONAL LANGUAGE/COUNTRY URL VERSION” dengan asumsi ingin menargetkan pengguna kawasan Asia Tenggara, khususnya negara tetangga seperti Malaysia, Brunei Darussalam, Filipina, Timor Leste, Singapore dan Australia.

Kemudian klik “GENERATE THE HREFLANG TAGS FOR THESE URLS” untuk mendapatkan tag hreflang sesuai dengan isian form yang Anda isikan.

Penerapan Tag Hreflang

Untuk memasang tag hreflang pada website cukup mudah, silahkan login ke WP Admin sebagai administrator kemudian gunakan fasilitas Editor pada menu Appearance.

Pilih Header.php pada themes yang Anda gunakan kemudian pastekan tag hreflang yang sudah Anda buat tadi ke dalam tag <head> seperti tampak pada contoh gambar berikut :

Editor

Note : Sebaiknya menggunakan Child Theme jika ingin memodifikasi Theme WordPress Anda untuk mengantisipasi kehilangan data jika dikemudian hari dilakukan Upgrade pada Theme Core.

Tes Validasi Tag Hreflang

Tahapan ini adalah untuk mengetahui tag hreflang yang telah disematkan pada tag <head> apakah sudah benar sesuai dengan keadaan website atau belum. Gunakan link hreflang checker validation tool berikut untuk mengeceknya :

http://hrefbuilder.com/hreflang-checker-validation-tool

Jika penerapan tag hreflang sudah benar, maka akan tampak seperti contoh gambar di bawah ini untuk report validasinya :

Tag Hreflang Validation Tool

Langkah terakhir adalah merubah target user untuk Negara Indonesia melalui menu International Targeting pada laman Search Console.

International Targeting