Cara mudah memperbaiki peringatan caching browser leverage di WordPress

Diterbitkan: 2021-08-18

Anda mungkin menemukan berbagai alat online untuk mengukur kinerja situs web. Masing-masing dari mereka menganalisis seberapa cepat bagian-bagian tertentu dari situs web Anda bekerja. Dan di antara banyak peringatan umum, sering ada kesalahan "Leverage Browser Caching". Ini menyangkut caching, sebagai fitur yang memungkinkan Anda untuk sementara menggunakan ruang di perangkat klien. Yang menghasilkan pemuatan keseluruhan yang lebih cepat dari situs web Anda dan halamannya. Dengan kata lain, Anda dapat dengan mudah Memperbaiki Peringatan Caching Peramban Leverage di WordPress untuk memastikan pengalaman pengguna yang lebih baik bagi pengunjung Anda .

Cara pasti untuk memperbaiki peringatan caching browser leverage di WordPress

Ada dua kasus ketika Anda akan menerima peringatan ini. Pertama, cache browser Anda tidak diaktifkan. Kedua, cache browser tidak dikonfigurasi dengan benar. Namun, di banyak alat kinerja online, kesalahan ini saat ini dilaporkan sebagai "Layani aset statis dengan kebijakan cache yang efisien" . Namun, peringatan apa pun yang Anda terima, berarti aturan caching browser Anda tidak ada. Jika Anda tidak percaya diri dalam memperbaiki masalah sendiri, ahli WP berpengalaman selalu dapat membantu Anda menyelesaikan masalah ini. Atau, jika ya, mari kita lihat cara memperbaiki peringatan “Leverage browser caching” di WordPress.

Daftar Isi:

  • Apa itu Cache Peramban?
    • Plugin W3 Total Cache
    • plugin CAOS
    • Plugin WP Rocket
  • Perbaiki peringatan Leverage Browser Caching dengan plugin
  • Perbaiki secara manual dengan kode

Apa itu Cache Peramban?

Sebelum kita melanjutkan dengan solusinya, ada baiknya untuk memahami apa arti dari jenis cache browser ini. Ini adalah metode yang digunakan situs web untuk menyimpan salinan halaman mereka secara lokal . Ini memungkinkan mereka untuk meningkatkan kecepatan pemuatan dengan mengurangi jumlah permintaan antara browser dan server. Oleh karena itu setelah mengunjungi kembali, browser akan memuat situs web lebih cepat tanpa perlu terhubung lagi ke server dan meminta sumber daya tambahan.

Peringatan “Serahkan aset statis dengan kebijakan cache yang efisien”.
Ini adalah peringatan yang biasanya Anda lihat di alat kinerja online.

Jenis file yang paling umum yang di-cache adalah:

  • lembar gaya
  • gambar-gambar
  • logo
  • dan elemen statis lainnya

Karena mereka mungkin tidak berubah sejak kunjungan terakhir, situs web Anda akan dimuat lebih cepat di browser pengunjung. Masalahnya adalah – semua yang di-cache harus memiliki periode kedaluwarsa yang ditetapkan . Untuk berjaga-jaga jika ada sesuatu yang diubah sementara itu, sehingga pengunjung dapat memuat versi situs web yang diperbarui.

Perbaiki peringatan caching browser leverage dengan plugin

Hasil dari pencarian plugin untuk plugin caching.
Anda dapat dengan mudah menemukan lusinan plugin caching di WordPress.

Cache Total W3

W3 Total Cache adalah salah satu plugin caching yang paling populer . Muncul dengan semua fitur yang dapat Anda harapkan dari plugin semacam itu. Secara keseluruhan, plugin ini secara langsung meningkatkan SEO dan seluruh pengalaman pengguna dengan meningkatkan kinerja situs web Anda. Ketika dikonfigurasi dengan benar, ini dapat memberi Anda peningkatan kinerja umum sekitar 10 kali lipat. Dengan keberadaan lebih dari satu dekade, banyak pengembang web, host web, dan penerbit menaruh kepercayaan mereka pada plugin ini.

plugin CAOS

Suite Pengoptimalan Analytics Lengkap dapat dengan mudah ditemukan di repositori plugin WordPress. Meskipun tidak terkenal sebagai solusi caching umum, plugin ini memecahkan masalah dengan Google Analytics . Terkadang, jika Anda menggunakan Google Analytics, hasil dari PageSpeed ​​Insights dan alat serupa akan dimiringkan. Sebagian besar karena Google telah menetapkan waktu kedaluwarsa cache yang terlalu singkat. Dengan plugin CAOS, Anda dapat menghosting analytics.js/gtag.js host Anda secara lokal dan terus memperbaruinya secara otomatis.

Plugin WP Rocket

Salah satu plugin cache terbaik untuk WordPress dalam daftar ini adalah WP Rocket. Sementara plugin lain mungkin sulit dikonfigurasi, WP Rocket cukup mudah. Ini cukup ramah pemula dan memungkinkan Anda untuk mengoptimalkan semuanya tanpa sepengetahuan sebelumnya. Pada dasarnya, Anda hanya perlu menginstal, mengaktifkannya, dan itu akan segera menggunakan konfigurasi .htaccess yang direkomendasikan. Sejauh ini, ini adalah cara termudah dan tercepat untuk memperbaiki peringatan caching browser leverage di WordPress dan membuat situs web Anda seramah mungkin.

Perbaiki secara manual dengan kode

Metode ini membutuhkan pengalaman tertentu , jadi ini bukan rekomendasi untuk pemula. Dalam kebanyakan kasus, plugin akan melakukan pekerjaan itu. Namun, jika, karena alasan apa pun, Anda tidak ingin menggunakan plugin, perbaiki masalah caching dengan menambahkan kode secara manual.

Langkah pertama, sebelum membuat perubahan apa pun, adalah mencadangkan situs web Anda.

Langkah selanjutnya bisa sedikit berbeda, tergantung pada server yang Anda gunakan.

Jika Anda menggunakan server Apache

Pada dasarnya, semuanya dimulai dengan mengedit file .htaccess Anda . Begitu masuk, Anda harus menambahkan kode untuk kontrol cache dan header kedaluwarsa. Cache-control adalah seperangkat instruksi tentang bagaimana caching harus ditangani. Sementara header kedaluwarsa memutuskan tentang periode konservasi sumber daya di browser.

  • Pertama, tambahkan kode berikut untuk cache-control :

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=80000, public"
</filesMatch>

Pada dasarnya, ini memungkinkan caching berbagai jenis file. Dan, atur agar umumnya kedaluwarsa setelah "usia maksimal" dalam hitungan detik. Setelah itu, browser akan memperbarui seluruh cache lagi.

  • Selanjutnya, Anda akan menambahkan kode yang akan menentukan header kedaluwarsa :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access 2 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 3 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 2 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/pdf "access 3 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 5 days"
</IfModule>

Baris-baris ini, pada dasarnya, menetapkan tanggal kedaluwarsa yang berbeda untuk jenis file yang berbeda, tergantung pada apa yang Anda butuhkan.

Jika Anda menggunakan server Nginx

Untuk Nginx, Anda harus membuat perubahan pada file konfigurasi server untuk memperbaiki masalah cache browser. Satu-satunya peringatan adalah Anda mungkin tidak memiliki akses ke file konfigurasi server Anda. Untuk ini, Anda harus menghubungi penyedia hosting Anda.

  • Namun, setelah Anda mendapatkan akses yang aman, Anda bebas menambahkan header kontrol-cache :

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control "public, no-transform"; }

Sama seperti di Apache, ini akan mengatur waktu kedaluwarsa seluruh cache.

  • Dan baris berikutnya akan mengatur header kedaluwarsa :

location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; }
location ~* \.(pdf|css|html|js|swf)$ { expires 4d; }

Anda dapat melihat bahwa di sini, gambar memiliki masa kadaluarsa yang lebih lama karena biasanya tidak berubah sesering file lainnya.

Ikon format file yang berbeda.
Anda dapat mengatur tanggal kedaluwarsa untuk jenis file apa pun.

Meskipun mereka mungkin tidak memberi Anda gambaran yang tepat tentang kinerja situs web Anda, alat kinerja online dapat mengarahkan Anda ke arah yang benar. Dan salah satu cara termudah untuk mulai melakukan perubahan adalah dengan memperbaiki peringatan “Leverage Browser Caching” di WordPress . Atau, seperti sekarang ini sering dianggap sebagai "Menyajikan aset statis dengan kebijakan cache yang efisien". Ini akan membuat situs web Anda memuat lebih cepat dan memberikan pengalaman pengguna yang lebih baik kepada pengunjung baru dan yang kembali. Apakah Anda memilih plugin atau ingin menambahkan kode secara manual, itu tidak masalah. Secara umum, penting agar situs web Anda berkinerja lebih baik.