Manfaatkan Caching Browser di WordPress untuk Mengoptimalkan Waktu Muat Halaman

Pengguna situs web WordPress selalu mencari sesuatu di luar kotak dan dengan bertujuan untuk mencapai 90+ ​​tolok ukur skor Google PageSpeed ​​Insights itu sangat mungkin. Secara umum, ada beberapa teknik untuk mempercepat situs WordPress tetapi di antara semuanya, cache browser adalah masalah yang paling sering ditemukan selama analisis pengoptimalan kecepatan situs web.

Untuk memantau dan menguji kinerja situs web Anda, Anda dapat menggunakan sejumlah alat online seperti Google PageSpeed ​​Insights, GTMetrix, dan Pingdom. Mereka memberikan hasil yang akurat dan membantu Anda memahami di mana situs web Anda membutuhkan perbaikan. Saat menguji kinerja situs, Anda mungkin telah menerima pemberitahuan peringatan "Leverage Browser Caching".

Hari ini, kita akan membahas bagaimana Anda dapat mengatasi masalah ini. Jadi, jangan buang waktu dan pelajari.

Apa Itu Cache Browser dan Bagaimana Cara Kerjanya?

Setiap kali seseorang mengunjungi situs web Anda, browser mengirimkan permintaan untuk memuat aset seperti HTML, Skrip, Gambar, CSS, dll. dari server. Server kemudian menanggapi permintaan browser. Bergantung pada ukuran aset yang diminta dan waktu proses server, respons mungkin memerlukan sedikit waktu untuk merespons. Ini pada akhirnya menghasilkan peningkatan beban di server dan memperlambat situs web di sisi pengguna.

Dalam situasi ini, cache browser berfungsi paling baik. Ini menyimpan konten statis di browser pengguna, pertama kali pengunjung mengunjungi situs web. Jika situs web Anda tidak dikonfigurasi dengan benar dengan cache browser dan Anda menguji kecepatan situs web Anda menggunakan salah satu alat pengujian kinerja yang disebutkan di atas, alat tersebut pasti akan menampilkan pesan peringatan untuk memanfaatkan cache browser.

Menurut Google, respons server harus menyertakan dua tag di bawah ini di header:

Cache-Control mendefinisikan bagaimana, dan untuk berapa lama respons individu dapat di-cache oleh browser dan cache perantara lainnya.

ETag menyediakan token validasi ulang yang secara otomatis dikirim oleh browser untuk memeriksa apakah sumber daya telah berubah sejak terakhir kali diminta.

Apa itu Caching Peramban Leverage?

Dengan kata sederhana, leverage browser caching membantu mengurangi permintaan HTTP untuk memuat halaman lebih cepat dan juga meningkatkan waktu respons server.

Mari kita lihat contoh langsung. Saya menguji situs web saya menggunakan Think with Google dan inilah hasilnya.

Mari kita uji dari alat Google PageSpeed ​​Insights.

Oke jadi, Anda bisa melihat kinerja website saya secara keseluruhan cukup bagus. Tapi, ada ruang untuk memperbaikinya. Ini menunjukkan bahwa URL internal saya dapat di-cache.

Perbaiki Peringatan "Leverage Browser Caching"

Untuk memperbaiki peringatan "Leverage Browser Caching", Anda harus melakukan dua langkah berikut.

1. Ubah header permintaan untuk menggunakan cache
2. Optimalkan kebijakan caching

1. Ubah Header Permintaan untuk Menggunakan Cache

Salah satu cara untuk meningkatkan kecepatan dan respons situs web Anda adalah dengan mengubah header permintaan untuk menggunakan cache. Kami akan menambahkan beberapa baris kode ke file .htaccess WordPress kami.

Catatan: .htaccess adalah ruang kendali sebuah situs web. Jika tidak dikonfigurasi dengan benar, ini dapat merusak situs lengkap saat Anda melakukannya! Pelajari cara melindungi WordPress Anda dengan file .htaccess .

Untuk memanfaatkan caching browser di WordPress, akses direktori utama instalasi WordPress Anda, cari file .htaccess dan buka dengan editor kode apa pun. Cukup, rekatkan baris yang disebutkan di bawah ini di bagian atas file .htaccess WordPress.

 ## KEDALUWARSA CACHING ##

<IfModule mod_expires.c>

KedaluwarsaAktif Aktif
ExpiresByType image/jpg "akses 1 tahun"
ExpiresByType image/jpeg "akses 1 tahun"
ExpiresByType image/gif "akses 1 tahun"
Gambar ExpiresByType/png "akses 1 tahun"
ExpiresByType teks/css "akses 1 bulan"
ExpiresByType teks/html "akses 1 bulan"
Aplikasi ExpiresByType/pdf "akses 1 bulan"
ExpiresByType teks/x-javascript "akses 1 bulan"
Aplikasi ExpiresByType/x-shockwave-flash "akses 1 bulan"
Gambar ExpiresByType/ikon x "akses 1 tahun"
ExpiresDefault "akses 1 bulan"

</JikaModul>

## KEDALUWARSA CACHING ##

2. Optimalkan Kebijakan Caching

Langkah kedua untuk mempercepat waktu respons di situs web Anda adalah dengan Mengoptimalkan Kebijakan Caching. Kode di atas menjelaskan jenis file dan kedaluwarsanya. Terserah Anda, berapa lama Anda ingin menyimpan konten statis tertentu di cache browser pengguna. Jika konten statis Anda seperti gambar bersifat jangka panjang. Saya sarankan Anda mengaturnya selama setahun. Namun, konten yang Anda curigai dapat diubah dalam waktu dekat, disarankan agar Anda mengatur tanggal kedaluwarsa setidaknya satu bulan.

Kontrol-Tembolok

Jika metode di atas gagal berfungsi di server Anda, kami memiliki alternatif lain yang dapat membantu Anda dengan kontrol cache untuk mengatur kedaluwarsa caching. Yang harus Anda lakukan adalah menyalin dan menempelkan baris berikut di bagian atas file .htaccess Anda.

 # 1 Bulan untuk sebagian besar aset statis

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header mengatur Cache-Control "max-age=2592000, publik"

</fileMatch>

Sama seperti langkah sebelumnya, kode di atas menjelaskan kebijakan kedaluwarsa dan caching dari berbagai jenis file.

Catatan: Ini adalah nilai minimum yang dapat menghilangkan peringatan. Jika kedaluwarsa kurang dari ini, Anda mungkin masih melihat peringatan browser leverage, menyarankan untuk meningkatkan kedaluwarsa.

Setelah mengatur file .htaccess dengan benar, sekarang kita akan mengujinya. Jadi, Mari kita uji!

Dan peringatan "leverage browser caching" telah diperbaiki.

WordPress Leverage Browser Caching untuk Google Analytics

Jika Anda menggunakan plugin WordPress apa pun untuk Google Analytics, Anda mungkin masih mendapatkan peringatan caching browser leverage, tidak masalah Anda mengatur semuanya dengan benar.

Itu karena Google Analytics menetapkan waktu kedaluwarsa default hanya dua jam untuk memastikan Anda mendapatkan pembaruan secepat mungkin.

Ada dua cara untuk memperbaiki peringatan cache browser leverage untuk Google Analytics.

1. Lokal : Anda dapat membuat salinan lokal analytics.js dan/atau ga.js (file apa pun yang Anda gunakan dengan cache browser leverage). Harap dicatat bahwa Google tidak merekomendasikan metode ini.
2. Plugin : Gunakan plugin WordPress Complete Analytics Optimization Suite (CAOS) yang menghosting file Google Analytics Anda secara lokal dan gunakan wp_cron() untuk terus memperbaruinya.

Masih Melihat Peringatan Cache Browser Leverage?

Setelah mengatur semuanya dengan benar, Anda mungkin masih melihat Google menyarankan untuk memanfaatkan cache browser, seperti gambar di bawah ini.

Seperti yang Anda lihat, file di atas adalah integrasi pihak ketiga. Ini tidak ada di server kami. Tidak ada yang bisa kita lakukan dengan mereka kecuali menghapusnya. Semua integrasi pihak ketiga dapat menyebabkan peringatan ini di alat pengujian kecepatan.

Saya Pelanggan Cloudways, Apa Keuntungannya Bagi Saya?

Jika Anda adalah pelanggan hosting WordPress yang dioptimalkan Cloudways, maka Anda harus mengesampingkan kekhawatiran Anda tentang peringatan cache browser leverage WordPress yang muncul di alat pengujian kecepatan online. Karena Cloudways menangani masalah ini dengan sendirinya. Anda dapat mengubah waktu kedaluwarsa hanya dengan menavigasi ke Server → Pengaturan & Paket → Lanjutan , gulir ke bawah sedikit dan cari NGINX – Static Cache Expiry . Nilai default adalah 43200 menit, yang setara dengan 30 hari.

Manfaatkan Cache Browser dengan W3 Total Cache

Metode yang disebutkan di atas adalah cara manual untuk menghapus peringatan cache browser leverage. Jika Anda menggunakan plugin caching seperti W3 Total Cache , Anda perlu mengaktifkan cache browser dengan membuka Performance → General Settings .

Kemudian arahkan ke Browser Cache dan tandai di bawah lima kotak centang.

Gulir ke bawah sedikit untuk mengatur waktu kedaluwarsa untuk file CSS & JSS. Nilai default adalah 31536000 yang setara dengan 365 hari. Anda dapat mengubah ini ke kerangka waktu yang Anda butuhkan.

Gulir ke bawah sedikit lagi untuk mengatur waktu kedaluwarsa untuk HTML & XML.

Untuk mengubah nilai default untuk Media & File Lain, gulir ke bawah sedikit dan atur kedaluwarsa. Nilai default adalah 31536000, yang setara dengan 365 hari.

Pikiran Akhir

Leverage Browser Caching membantu dalam meningkatkan skor pengujian kinerja web. Ingat, pengaturan ini hanya untuk membangun pedoman dasar dan pemahaman di antara pengguna WordPress. Selain itu, ada sejumlah teknik yang dapat membantu individu untuk mencapai situs web yang lebih cepat dalam waktu singkat, di mana yang paling penting adalah memilih hosting WordPress tercepat.

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di bagian komentar di bawah. Saya akan senang untuk menjawab.