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.

Terindeks Google Dalam Waktu 1×24 Jam

Membangun website dengan domain yang telah berumur (Eks Domain) tentu akan lebih mudah dalam hal pengindeksan oleh Google Search Engine dibandingkan dengan membangun sebuah website dari domain yang betul-betul baru diregister untuk pertama kalinya.

Untuk mendapatkan Eks Domain tidaklah mudah, ada sejumlah harga yang harus ditebus dengan harga yang terbilang relatif tidak murah. Terlebih lagi, Anda akan membutuhkan waktu dan kesabaran dalam berburu Eks Domain Branded dengan harga yang terjangkau.

Bagi Anda yang sudah memiliki produk kemudian memutuskan untuk mengonlinekannya, pilihan New Domain akan lebih memudahkan dan mempercepat proses pembangunan web. Dan tidak perlu khawatir berlebih terhadap lamanya waktu yang dibutuhkan oleh New Domain sampai terindek oleh Google Search Engine.

Pedoman Kualitas dari Google yang bisa dipelajari di Google Webmaster Academy pada kesempatan lebih lanjut.

Sebagai langkah awal, berikut beberapa langkah yang dapat dilakukan untuk membuat New Domain (Website) dapat terindeks cepat oleh Google dalam waktu 1×24 jam.

Pertama, lakukan verifikasi kepemilikan website ke Google Search Console dengan menambahkan New Domain pada pilihan ADD PROPERTY, atau kunjungi laman : https://www.google.com/webmasters/tools/home.

Add Property

Kemudian pilih metode verifikasi yang termudah yaitu menggunakan Alternate Methods TAG HTML. Copy kodenya kemudian pastekan sebelum tag </head> pada Header website Anda.

HTML Tag Methods

Atau kunjungi link https://www.google.com/webmasters/verification/home?hl=en untuk melakukan verifikasi, ikuti setiap petunjuk yang tertera.

Kedua, mendaftarkan New Domain tersebut ke Google Search Console dengan melakukan Submit Request melalui informasi laman resmi berikut : https://www.google.com/webmasters/tools/submit-url

Ketiga, membuat peta situs untuk Googlebot pada Search Console agar memudahkan dalam hal CRAWL (Mengindeks) laman website. Atau dapat juga menambahkan tautan link Sitemap: https://newdomain.com/sitemap_index.xml kedalam file robots.txt untuk menentukan jalur akses ke peta situs.

Add Sitemap

Jika menggunakan plugin YOAST SEO maka untuk sitemapnya isikan sitemap_index.xml.

Silahkan cek terlebih dahulu sebelum menggunakan plugin, apakah compatible dengan versi WordPress yang sedang Anda gunakan atau tidak, kunjungi : https://wordpress.org/plugins/wordpress-seo/

Jika menggunakan Plugin Google XML Sitemaps maka untuk sitemapnya isikan dengan sitemap.xml.

Cek juga untuk compatible atau tidaknya dengan versi WordPress Anda, silahkan lihat informasinya ke laman : https://wordpress.org/plugins/google-sitemap-generator/

Keempat, silahkan ambil tindakan “Fetch As Google” untuk mengetahui dan menguji Google dalam merender/merayapi konten website. Gunakan fasilitas ini untuk merender laman website secara total keseluruhan atau hanya menginginkan laman tertentu saja baik dalam render untuk versi Desktop maupun render untuk versi Smartphone.

Dan, pastikan tidak ada sumber daya laman (Misalnya gambar atau script) yang diblokir untuk akses Googlebot. Sehingga nantinya status render menjadi complete.

Fetch As Google

Jika status render sudah complete, maka selanjutnya dapat meminta Googlebot untuk mengindek laman website dengan menekan tombol Request Indexing.

Sampai dengan tahap Request Indexing sudah cukup untuk mempercepat proses indeks Google untuk New Domain Anda, silahkan tunggu hasilnya dalam waktu 1×24 jam.

Opsi Tambahan

Selain yang berasal resmi dari Google, Anda juga dapat menambahkan metode lain ADD URL dengan memanfaatkan jasa FREE SUBMISSION eksternal seperti : Googleping.com, Totalping.com, Freewebsubmission.com dan lain sebagainya.

Atau ketik di Google Search dengan keyword “free addurl submission” atau “free addurl submission without reciprocal”, nanti akan muncul situs-situs jasa sebar URL kebeberapa Search Engine lainnya dari hasil pencarian. Silahkan gunakan sebijaknya.

Rujukan :
https://support.google.com/webmasters/answer/35179?hl=id
https://support.google.com/webmasters/answer/35179?hl=id#verification_details

Mempercepat Akses Website Dengan HTTP/2

Pertama kali, akses website yang cepat sudah pasti akan disukai oleh pengunjung sebelum sajian utama konten itu sendiri.

Konten maupun file yang biasa diakses oleh pengunjung melalui antar muka Web Browser ke website tujuan (Server) pada dasarnya adalah merupakan jalur koneksi yang berisi seperangkat aturan sederhana dari protokol transfer HTTP.

Namun, protokol transfer HTTP yang masih digunakan sejak diterbitkan pada tahun 1999 sampai dengan saat ini adalah versi HTTP/1.1.

Seiring dengan pesatnya perkembangan teknologi Web Browser dan Web, penggunaan HTTP/1.1 menjadi bottleneck (macetnya proses transmisi data) pada website multimedia yang semakin dinamis.

Bagaimana HTTP/2 dapat mempercepat akses website?

Mari ketahui bersama, tujuan utama HTTP/2 dikembangkan adalah untuk memenuhi kebutuhan website modern. Metodenya, mengurangi Latency dengan mengaktifkan Multiplexing dan meminimalkan overhead protokol melalui kompresi kolom HTTP header sehingga proses transmisi data menjadi lebih efisien serta fleksibel.

Uniknya, HTTP/2 hanya memodifikasi bagaimana data diformat (Dienkripsi), kemudian menyembunyikan semua kompleksitas data di dalam lapisan framing baru (Kompresi Header) yang secara otomatis akan mengurangi volume data.

Jika digambarkan perbandingan proses transmisi data, penggunaan HTTP/1.1 dengan HTTP/2 akan tampak seperti gambar berikut :

Multiplexing
Gambar : https://blog.cloudflare.com/http-2-for-web-developers/

Jadi, HTTP/2 hanya membutuhkan satu koneksi saja antara Browser dan Server Web, yang memungkinkan semua file ditransfer secara paralel dari dan kedua arah.

Mengetahui Website Sudah Menggunakan HTTP/2

Pada prinsipnya semua Web Browser membutuhkan koneksi yang dienkripsi dengan SSL untuk menggunakan protokol transfer HTTP/2.

Namun, dengan aktifnya SSL Encryption tidak serta merta otomatis akan mengaktifkan protokol transfer HTTP/2, Anda harus mengecek Web Server yang sedang digunakan apakah sudah tersedia modul http versi 2 atau belum.

Jika menggunakan Nginx (Engine X) sebagai Web Server, modul HTTP Header versi 2 (ngx_http_v2_module) sudah tersedia sejak versi Nginx-1.9.5.

Sederhananya, gunakan tool berikut ini untuk mengecek apakah sudah menggunakan protokol transfer HTTP/2 atau belum pada website Anda :

https://h2.nix-admin.com

Selain membuat akses ke website menjadi lebih cepat, kabar baiknya penyandian SSL dinilai positif oleh Google dan mesin pencari lainnya, sehingga menghasilkan posisi yang lebih baik dalam hal SEO.

Jadi mari beralih menggunakan protokol transfer HTTP/2 untuk mendapatkan pengalaman baru dalam SEO, Let’s Encrypt menjadi solusi SSL FREE untuk website Anda.

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