Cara Mengatasi Leverage Browser Caching WordPress

Mengatasi leverage browser caching di wordpress sebenarnya dapat dilakukan dengan mudah, ada dua cara yang dapat digunakan yaitu menggunakan plugin tambahan dan mengatasi leverage browser caching secara manual.

Dipostingan kali ini kita akan membahas secara lengkap bagaiman cara mengatasi leverage browser caching di wordpress untuk meningkatkan score page speed website pada web penguji kecepatan seperti GTMetrix dan Google Page Speed Insight.

Apa Itu Leverage Browser Caching

Leverage Browser Caching atau biasa disebut Browser Cache sederhananya adalah suatu proses pada browser yang menampilkan jumlah waktu browser untuk menyimpan cache secara lokal saat membuka suatu website, atau dengan kata lain nya proses dimana browser menyimpan cache pada wesbite yang dituju. File cache yang disimpan ini berupa file gambar, javascript, css dll nya.

Dengan leverage browser caching, browser hanya mengambil sumber data dari cache yang tersimpan ketika kita membuka alamat website yg sama tanpa harus mendownload file nya lagi secara terus menerus, dan proses ini dapat meningkatkan kecepatan pemuatan atau proses buka halaman website wordpress kita.

Cara Mengatasi Leverage Browser Caching di WordPress

Untuk dapat mengatasi masalah leverage browser caching di wordpress, dapat dilakukan dengan dua cara, yaitu menggunakan plugin caching seperti yang dapat dibaca pada artikel saya sebelumnya yaitu Cara Mempercepat WordPress Score 100 di PageSpeed Insight. Atau dapat juga menggunakan cara manual tanpa plugin.

#1 Mengatasi Leverage Browser Caching Menggunakan Plugin

Untuk mengatasi leverage browser caching pada wordpress, kita dapat menggunakan plugin cache yang sering digunakan, seperti WP Fastest Cache, WP Rocket, Cache Enabler, W3 Total Cache, Litespeed Cache.

1. WP Fastest Cache

Merupakan plugin cache yang paling banyak digunakan, plugin WP Fastest Cache ini memiliki settingan yang sangat sederhana dan tidak ribet sehingga sangat mudah dalam penggunaannya. Plugin ini juga saya gunakan pada beberapa blog pribadi dan client yang saya kelola untuk meningkatkan kecepatan loading website yang telah saya tulis tutorialnya disini.

2. Litespeed Cache

Litespeed Cache juga merupakan plugin caching yang paling banyak digunakan, banyak sekali fitur-fitur yang dapat digunakan untuk meningkatkan kecepatan website menggunakan plugin ini,

3. W3 Total Cache

W3 Total Cache adalah plugin cache wordpress yang banyak digunakan selain WP Fastest Cache dan Litespeed Cache, plugin ini merupakan plugin Cache paling lengkap yang pernah ada di wordpress repo.

4. Cache Enabler – WordPress Cache

Cache Enabler merupakan plugin cache pendatang baru yang belakangan ini mulai banyak di gunakan, dengan settingan yang sederhana membuat plugin ini merupakan plugin cache yang paling mudah di gunakan.

5. WP Rocket

WP Rocket merupakan plugin Premium, plugin ini merupakan plugin cache terbaik, pengaturan yang mudah, dan fitur optimasi yang sangat lengkap membuat WP Rocket menjadi plugin caching premium yang di banggakan oleh banyak Blogger luar dan lokal.

Beberapa plugin diatas merupakan contoh saja, silahkan pilih dan gunakan plugin cache yang menurut kamu mudah di gunakan, karena setiap orang memiliki penilaian yang berbeda. Secara pribadi saya menggunakan WP Fastest Cache, Litespeed Cache dan WP Rocket untuk blog blog pribadi dan blog client yang saya kelola.

#2 Mengatasi Leverage Browser Caching Tanpa Plugin

Jika kamu tidak ingin menggunakan plugin, kita dapat mengatasi Leverage Browser Cache menggunakan cara manual, tentunya di perlukan beberapa settingan tambahan pada server atau hosting kita.

Dalam posting ini, kita akan membahas cara mengaktifkan browser cache untuk mengatasi permasalahan Leverage Browser Cache pada dua server yang paling populer, yaitu Apache dan Nginx.

Beberapa settingan yang akan kita lakukan pada server atau hosting adalah sebagai berikut:

1. Menambahkan Expires Headers – Expires Header ini berfungsi untuk memberi tahu browser kapan harus meminta versi baru resources dari server.
2. Mengubah Header Cache-Control – Header Cache-Control berfungsi untuk menyetel kebijakan cache-related policies.
3. Menetapkan header tag entitas (ETags) – Berfungsi untuk mengidentifikasi apakah source di server telah berubah atau memiliki versi baru dibandingkan dengan file lokal.

Mengatasi Leverage Browser Caching di Server Apache

# Mengedit File .htaccess

Sebelum melakukan perubahan pada file .htaccess pastikan telah membackup isi dari file .htaccess terlebih dahulu, jika sudah tambahkan kode berikut pada file .htaccess

#Expires Headers
ExpiresActive on
ExpiresDefault                              "access plus 1 month"
ExpiresByType text/cache-manifest           "access plus 0 seconds"
ExpiresByType text/html                     "access plus 0 seconds"
ExpiresByType text/xml                      "access plus 0 seconds"
ExpiresByType application/xml               "access plus 0 seconds"
ExpiresByType application/json              "access plus 0 seconds"
ExpiresByType application/rss+xml           "access plus 1 hour"
ExpiresByType application/atom+xml          "access plus 1 hour"
ExpiresByType image/x-icon                  "access plus 1 week"
ExpiresByType image/gif                     "access plus 4 months"
ExpiresByType image/png                     "access plus 4 months"
ExpiresByType image/jpeg                    "access plus 4 months"
ExpiresByType image/webp                    "access plus 4 months"
ExpiresByType video/ogg                     "access plus 4 months"
ExpiresByType audio/ogg                     "access plus 4 months"
ExpiresByType video/mp4                     "access plus 4 months"
ExpiresByType video/webm                    "access plus 4 months"
ExpiresByType text/x-component              "access plus 1 month"
ExpiresByType font/ttf                      "access plus 4 months"
ExpiresByType font/otf                      "access plus 4 months"
ExpiresByType font/woff                     "access plus 4 months"
ExpiresByType font/woff2                    "access plus 4 months"
ExpiresByType image/svg+xml                 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css                      "access plus 1 year"
ExpiresByType application/javascript        "access plus 1 year"
#Cache Policies
<ifModule mod_headers.c>
   <filesMatch "\.(ico|jpeg|jpg|png)$">
      Header set Cache-Control "public"
   </filesMatch>
   <filesMatch "\.(php)$">
      Header set Cache-Control "private"
   </filesMatch>
</ifModule>
#Merubah Entity Tags
FileETag None

Mengatasi Leverage Browser Caching di Server Nginx

# Mengedit File nginx.conf

Pada server yang menggunakan Nginx, kita dapat melakukan settingan untuk mengatasi Leverage Browser Cache dengan melakukan perubahan pada nginx.conf, umumnya file nginx.conf ini ada di path

 /usr/local/nginx/conf, /etc/nginx, atau /usr/local/etc/nginx

Tambahkan kode dibawah ini pada file nginx.conf

location ~* \.(ico|jpeg|jpg|png)$ {
    expires 30d;
}
location ~* \.(ico|jpeg|jpg|png)$ {
    expires 30d;
    add_header Cache-Control "public";
}

Kesimpulan

Dengan mengaktifkan Browser Cache, kita dapat mengatasi permasalahan Leverage Browser Caching saat kita melakukan tes kecepatan website wordpress kita, mengaktifkan browser cache juga dapat memperbaiki score kecepatan wordpress, yang perlu diingat adalah ketika kita mencoba mengatasi leverage browser cache menggunakan cara manual atau tanpa plugin, lakukan backup terlebih dahulu, untuk menjaga jika terjadi error pada server.

Semoga bermanfaat.