Cara Leverage Browser Caching Wordpress Tanpa Plugin

Cara Leverage Browser Caching Wordpress

Bagaimana cara optimasi speed website dengan leverage browser chacing wordpress? Saya akan coba menjelaskan teknik ini untuk situs berbasis wordpress tanpa menggunakan plugin.

Kenapa tidak menggunakan plugin?

Plugin sebenarnya adalah aplikasi tambahan yang dapat Anda install dengan mudah, cukup dengan sekali klik.

Tapi plugin ini sebenarnya membebankan kerjas server juga memenuhi disk space server Anda. Sehingga tidak heran banyak orang yang mengeluhkan wordpress itu cukup berat/lemot.

Tidak lain, salah satu alasannya karena mungkin mereka menginstall terlalu banyak plugin pada situs mereka.

Sehingga disk space penuh dan juga membuat server bekerja lebih ekstra dalam meload file-file plugin tersebut.

Baca juga: Mempercepat Load Website dengan Gzip

Juga, tak jarang terjadi plugin-plugin tersebut konflik sehingga Anda menjumpai permasalahan teknikal SEO di Google Search Console. Tentunya hal itu akan membuat Anda pusing jika tidak mau dibilang sangat pusing.

Apa itu Leverage Browser Caching?

Secara umum leverage browser caching adalah cara Anda dalam menentukan berapa lama web browser menyimpan file situs seperti: CSS, JavaScript, hingga Gambar secara lokal.

Dan karena hal itu, browser pengguna akan mengunduh sedikit data (file dari server) ketika berselancar di situs Anda. Sehingga situs Anda dapat semakin cepat ketika brower melakukan load situs.

Cara Cek Leverage Browser Caching

Jika Anda belum tahu apakah situs wordpress Anda sudah mengaktifkan teknik ini, silahkan buka GT Metrix.

GT Metrix. Sumber: kinsta.com

Ketikan domain situs Anda pada kolom yang ada, kemudian klik analyze. Tunggu beberapa saat hingga GTMetrix selesai melakukan analisa.

Ketika selesai coba perhatikan report list yang ada. Apakah ada report seperti gambar di bawah ini?

Hasil GTMetrix. Sumber: trikmudahseo

Kolom berwarna merah memberikan arti bahwa, leverage browser caching belum Anda terapkan. Lalu bagaimana cara mengaktifkannya?

Berikut caranya.

Mengaktifkan Leverage Browser Caching tanpa Plugin

#1 Aktifkan Melalui .htaccess

Cara pertama untuk menentukan waktu kedaluwarsa file-file seperti gambar, javascript, dan css adalah dengan memodifikasi file .htaccess situs Anda.

Letak file .htaccess terdapat di root server hosting Anda. Caranya adalah dengan merubah expire headers agar kinerja situs semakin cepat.

Minimal, Anda dapat menambahkan kode berikut ini ke dalam .htaccess Anda. Untuk melakukannya cukup mudah, silahkan akses CPanel hosting Anda, cari file .htaccess dan klik edit.

Catatan: Jangan melakukan perubahan lain, biarkan isi .htaccess yang asli seperti apa adanya.

Script expire headers via .htaccess:

#Awal kustomisasi cache kedaluwarsa - sesuaikan waktu periode sesuai dengan kebutuhan Anda
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"
</IfModule> #kustomisasi cache kedaluwarsa

Kode di atas membuat Anda menerapkan expire headers. Jika script sudah ditambahkan klik save.

Penjelasan:

Laman HTML Anda akan kedaluwarsa setelah 600 detik.
XHTML+XML akan kedaluwarsa setelah 600 detik.
CSS akan kedaluwarsa setelah 1 bulan.
JavaScript + x-javascript akan kedaluwarsa setelah 1 bulan.
X-Shockwave-Flash akan kedaluwarsa setelah 1 bulan.
Pdf akan kedaluwarsa setelah 1 bulan.
X-Icon kedaluwarsa setelah 1 tahun.
Jpg/Jpeg/Png/Gif akan kedaluwarsa setelah 1 tahun.

Cara ini adalah cara yang cukup efektif untuk memanfaatkan cache browser situs WordPress Anda atau situs web lainnya yang menggunakan file .htaccess.

#2 Add Cache-Control Headers via .htaccess

Cara ini juga mengharuskan Anda menambahkan beberapa baris kode ke dalam file .htaccess Anda. Cara ini berfungsi mengatur cache-control headers.

# AWAL Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>
# AKHIR Cache-Control Headers

Karena pada langkah ke satu kita telah menerapkan tanggal/waktu kedaluwarsa, maka pada cara ke dua di atas kita tidak harus menambahkannya lagi.

Penutup

Saya asumsikan sekarang Anda sudah tahu dan dapat menerapkan script di atas pada file .htaccess Anda. Kini, saatnya Anda kembali mencoba melakukan pengetesan situs Anda di GTMetrix tadi.

Silahkan buka GTMetrix, ketikan domain situs Anda, klik analyze, tunggu proses hingga selesai.

Voila, sekarang report list leverage browser caching Anda sudah tidak lagi merah.

Selamat, Anda telah berhasil melakukan optimasi kinerja situs Anda.

Ngomong-ngomong, cara optimasi di atas ini termasuk pada golongan teknikal SEO, selain dari On-Page SEO dan juga Off-Page SEO.

Sekian, jika ada pertanyaan silahkan postingkan pesan Anda di kolom komentar.

BONUS

Leverage Browser Caching Wordpress dengan Plugin

WP Rocket

Cara ini lebih sederhana tanpa harus mencari letak file .htaccess dan menambahkan kode di dalamnya.

Berikut cara aktifkan leverage browser caching wordpress dengan plugin:

Login ke Admin Wordpress Anda.
Buka bilah: Dashboard > Plugins > Add New.
Cari WP Rocket.
Klik install.
Kemudian, klik aktifkan plugin.
Dan selesai.

Kenapa WP Rocket?

Plugin ini adalah salah satu plugin cache yang sangat cepat dan sangat direkomendasikan oleh collectiveray.com.

WP Rocket dapat menangani optimasi speed situs Anda hanya dengan beberapa kali klik. Beberapap fitur unggulannya adalah:

Static files compression (GZip)
Lazy loading
Enables a file cache
Google Fonts optimization
Minification dan combination
Defer JavaScript loading
Terintegrasi dan enables a CDN
DNS prefetching

Bagaimana? Cukup lengkap bukan? Selamat mencoba dan semoga berhasil!