Cara Memanfaatkan Caching Browser di WordPress (dengan Video)

Terakhir diperbarui - 8 Juli 2021

Jika Anda memiliki atau menjalankan situs web WordPress, Anda pasti ingin terus meningkatkan tampilan dan cara kerjanya. Namun, semakin banyak plugin, pembuat halaman, dan elemen konten yang Anda gunakan, semakin lambat situs web Anda.

Dan situs web yang memuat lambat adalah halangan besar bagi pengunjung, terlepas dari seberapa bagus tampilan situs web Anda atau betapa pentingnya pekerjaan yang dilakukannya.

Itulah sebabnya mengelola situs web WordPress mengharuskan Anda menggunakan setiap dan setiap ukuran kinerja situs web yang dapat Anda temukan. Dan ukuran penting yang layak diambil adalah memanfaatkan caching browser.

Pada artikel ini, Anda akan mempelajari apa artinya dan bagaimana Anda dapat memanfaatkan cache browser di WordPress.

Apa itu cache browser?

Setiap kali pengguna mengakses situs web Anda, sumber daya seperti gambar, JavaScript, CSS, dan lainnya perlu diunggah ke komputer mereka dari server. Ini berarti pengguna perlu memuat berulang kali sumber daya yang sama antara halaman berikutnya dan kunjungan situs.

Masukkan: Caching.

Caching menunjukkan periode waktu di mana browser secara lokal menyimpan sumber daya yang dapat di-cache yang tersedia di situs web. Saat pengguna meminta halaman web, informasi tersebut langsung diambil dari komputer mereka.

Dengan begitu, Anda dapat memanfaatkan caching browser di WordPress untuk memberikan kinerja situs web yang lebih cepat.

Anda dapat menggunakan alat seperti Google PageSpeed ​​Insights dan GTmetrix untuk menguji apakah situs web Anda sudah memanfaatkan cache browser.

Cukup tempel URL situs web Anda di bidang yang disediakan dan klik "Analisis". Alat ini akan memberikan skor pada situs web Anda, antara 0 hingga 100 untuk PageSpeed ​​dan nilai abjad untuk GTmetrix.

Alat ini juga akan memberi Anda saran untuk meningkatkan kinerja situs web Anda. Saran umum adalah memilih untuk memanfaatkan caching browser di WordPress. Jika Anda mendapatkan saran ini, berikut adalah dua cara untuk melakukannya.

Manfaatkan Caching Peramban Secara Manual di WordPress

Anda dapat secara manual memanfaatkan caching browser di WordPress dengan menambahkan sedikit kode ke file .htaccess. Bahkan, Anda perlu menambahkan tiga potong kode untuk tiga tujuan berbeda:

1. Tambahkan Tajuk Kedaluwarsa
2. Tambahkan Header Kontrol Cache
3. Matikan ETag

Untuk menambahkan kode ini, Anda perlu mengakses file situs web Anda, yang dapat Anda lakukan dengan masuk ke akun hosting atau cPanel Anda. Anda perlu menavigasi ke pengelola file dan opsi "Aktifkan File Tersembunyi" di pengaturan situs web.

Anda kemudian akan menemukan file .htaccess di folder public_html. Klik kanan file dan edit untuk menambahkan kode yang disediakan di bawah ini.

1. Tambahkan kode cache browser

Salin kode di bawah ini dan tempel di akhir konten file .htaccess. Jangan membuat perubahan lain dalam file.

 #Sesuaikan awal cache yang kedaluwarsa - sesuaikan periode sesuai dengan kebutuhan Anda
<IfModule mod_expires.c>
Ukuran FileETag MTime
AddOutputFilterByType DEFLATE teks/teks biasa/teks html/xml teks/aplikasi css/xml aplikasi/xhtml+xml aplikasi/rss+xml aplikasi/aplikasi javascript/x-javascript
KedaluwarsaAktif Aktif
ExpiresByType teks/html "akses 600 detik"
Aplikasi ExpiresByType/xhtml+xml "akses 600 detik"
ExpiresByType teks/css "akses 1 bulan"
ExpiresByType teks/javascript "akses 1 bulan"
ExpiresByType teks/x-javascript "akses 1 bulan"
Aplikasi ExpiresByType/javascript "akses 1 bulan"
Aplikasi ExpiresByType/x-javascript "akses 1 bulan"
Aplikasi ExpiresByType/x-shockwave-flash "akses 1 bulan"
Aplikasi ExpiresByType/pdf "akses 1 bulan"
Gambar ExpiresByType/ikon x "akses 1 tahun"
ExpiresByType image/jpg "akses 1 tahun"
ExpiresByType image/jpeg "akses 1 tahun"
Gambar ExpiresByType/png "akses 1 tahun"
ExpiresByType image/gif "akses 1 tahun"
ExpiresDefault "akses 1 bulan"

</JikaModul>
#Kedaluwarsa cache berakhir

Kode di atas memberi tahu browser untuk menyajikan versi halaman yang di-cache alih-alih mengunduh versi baru.

Pengaturan juga mencakup waktu penyegaran/kedaluwarsa berikut:

• 600 detik untuk HTML
• CSS dan JavaScript satu bulan
• Satu tahun untuk gambar

Periode kedaluwarsa ini memastikan pengunjung tidak perlu terlalu sering mengunduh sumber daya tertentu. Namun, Anda dapat dengan mudah mengedit waktu kedaluwarsa jika perlu.

2. Tambahkan header kontrol cache (Apache)

Kita perlu menambahkan header Kontrol Cache untuk menentukan kebijakan cache browser mengenai bagaimana sumber daya di-cache, di mana cache, dan usia maksimum sebelum kedaluwarsa. Namun, kami telah menentukan waktu kedaluwarsa di atas, jadi kami tidak perlu mengulanginya di sini.

Salin dan tempel kode berikut:

 # MULAI Header Kontrol Cache

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Tajuk menambahkan Kontrol Cache "publik"
</filesMatch>
<filesMatch "\.(css)$">
Tajuk menambahkan Kontrol Cache "publik"
</filesMatch>
<filesMatch "\.(js)$">
Header menambahkan Cache-Control "pribadi"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header menambahkan Cache-Control "pribadi, harus divalidasi ulang"
</filesMatch>
</JikaModul>
</JikaModul>

3. Matikan Etag

Kami akan menonaktifkan e-tag untuk memaksa browser mengandalkan kontrol cache dan header kedaluwarsa alih-alih memvalidasi file. Berikut kodenya:

 <IfModule mod_headers.c>
Tajuk tidak disetel ETag
</JikaModul>
FileETag Tidak Ada

Cache Browser untuk Server NGINX

Anda tidak akan dapat menemukan file .htaccess jika situs web Anda menggunakan NGINX. Dalam hal ini, buka /etc/nginx/sites-enabled/default dan rekatkan kode di bawah ini:

 server {
mendengarkan 80;
nama_server localhost;
lokasi / {
root /usr/share/nginx/html;
indeks index.html index.htm;
}
lokasi ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
berakhir 365 hari;
}
lokasi ~* \.(pdf)$ {
berakhir 30 hari;
}
}
Tambahkan Cache-Control Header (NGINX)
lokasi ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
berakhir 90 hari;
add_header Kontrol Tembolok "publik, tanpa transformasi";
}

Setelah mengedit NGINX, simpan file untuk memanfaatkan caching browser di server NGINX.

Manfaatkan Caching Browser di WordPress Menggunakan Plugin

Mengedit file .htaccess memang cukup berisiko, karena satu kesalahan saja dapat merusak seluruh situs web Anda. Jadi jika Anda tidak ingin risiko yang tidak perlu, Anda dapat menggunakan plugin seperti W3 Total Cache dan WP Fastest Cache .

Inilah cara Anda dapat memanfaatkan caching browser menggunakan plugin W3 Total Cache, salah satu yang terbaik untuk pekerjaan itu.

Setelah menginstal plugin, buka halaman pengaturannya. Di sini, pastikan Cache Browser diaktifkan. Selanjutnya, buka pengaturan cache browser dari bilah sisi. Dan pastikan header kedaluwarsa, header kontrol cache, dan opsi set e-tag diaktifkan.

Simpan pengaturan jika Anda telah membuat perubahan.

Dengan itu, Anda telah berhasil memanfaatkan cache browser di situs WordPress Anda. Anda dapat memastikannya diaktifkan dengan menggunakan alat Wawasan atau GTmetrix lagi.

Jika Anda lebih suka versi video, lihat video di bawah ini:

Bacaan lebih lanjut:

• Plugin Pengoptimalan Database WordPress Gratis Terbaik di tahun 2021
• Bagaimana Mengaktifkan Kompresi GZIP di Situs WordPress?