Bagaimana Cara Memanfaatkan Caching Peramban Di WordPress?

Diterbitkan: 2022-06-25

Dalam tutorial ini kita akan belajar bagaimana memanfaatkan cache browser di WordPress untuk mempercepat situs Anda.

Ada beberapa cara untuk mempercepat situs WordPress secara umum, namun selama analisis pengoptimalan kecepatan situs web, cache browser adalah masalah yang paling sering ditemukan.

Anda dapat menggunakan berbagai alat internet, termasuk Google PageSpeed ​​Insights, GTMetrix, dan Pingdom, untuk melacak dan menguji kecepatan situs web Anda. Mereka memberi Anda temuan yang tepat dan menunjukkan di mana situs web Anda perlu bekerja. Anda mungkin pernah melihat peringatan "Leverage Browser Caching" saat menilai kecepatan situs.

Anda juga dapat membaca: Melayani Aset Statis Dengan Kebijakan Cache yang Efisien

Daftar isi

Apa itu Caching Peramban Leverage?

Caching adalah lamanya waktu browser menyimpan sumber daya yang dapat di-cache dari situs web di sistem lokal mereka.

Gambar, JavaScript, CSS, dan sumber daya lainnya ada di antara mereka. Materi yang dapat disimpan dalam cache yang disimpan di mesin Anda diunggah kembali setiap kali seseorang melihat situs web. Dengan demikian, ada peningkatan nyata dalam kecepatan memuat situs web. Orang ingin menggunakan caching browser di WordPress karena alasan ini.

Bagaimana Cara Kerja Leverage Browser Caching di WordPress?

Ada banyak proses yang berjalan di latar belakang setiap kali pengguna memasuki domain tertentu.

Situs web WordPress Anda dibuat terlihat oleh segala sesuatu yang dikomunikasikan ke browser pengguna. Elemen situs web ini mencakup skrip, grafik, lembar gaya, konten, dan banyak lagi. Bila perlu, mereka harus ditransfer dari server situs web ke browser pengguna. Berikut adalah langkah-langkah dalam proses ini:

  1. Sebuah URL dimasukkan ke dalam browser pengunjung.
  2. Permintaan dibuat oleh browser ke server yang menghosting situs web Anda (permintaan HTTP).
  3. Pengguna menerima data setelah dirakit oleh server. Pengguna mulai mengalami perlambatan pada saat ini. Orang dapat meminimalkan ukuran skrip, mengoptimalkan ukuran gambar, dan tindakan lain untuk menghentikan kelambatan ini.
  4. Browser sekarang akhirnya dapat menampilkan situs web setelah data ditransfer. Ketika pengguna mengakses halaman yang berbeda, prosedur diulang. Performa rendah dapat terjadi karena server menerima sejumlah besar permintaan sekaligus. Oleh karena itu, orang harus mengoptimalkan situs web mereka untuk mempertahankan kecepatan mereka.
Manfaatkan Caching Browser Di WordPress

Baik browser web dan program perangkat lunak menggunakan konten yang di-cache. Itu disimpan sebentar di disk lokal Anda. Istilah "Web Cache" atau "HTTP Cache" mengacu pada data ini. Browser akan mengunggah data dari komputer Anda dan mengunduh konten situs web setiap kali Anda mengunjungi situs web yang sama.

Anda perlu menggunakan alat tertentu untuk menentukan apakah situs web WordPress Anda menggunakan cache browser secara efektif.

Perbedaan Antara Cache Browser dan Cache Server

Untuk mengurangi beban dan latensi pada server web, caching web sisi server (Untuk caching sisi Server kami selalu merekomendasikan LiteSpeed ​​Cache untuk WordPress) sering kali memerlukan penggunaan proxy web yang menyimpan respons web dari server web yang ada di depannya. Cache web di sisi klien juga dapat menyertakan cache berbasis browser, yang menyimpan salinan cache dari konten web yang diakses sebelumnya.

Prosedur ini memerlukan penggunaan server web untuk menghasilkan halaman web yang di-cache untuk situs web Anda. Tindakan yang disebutkan di atas adalah contoh caching halaman web, yang terutama di sisi server.

Anda dapat meningkatkan sistem caching server dengan beberapa cara berbeda. Pilihan terbaik adalah memperbarui header Apache. Tahap selanjutnya adalah menggunakan plugin WordPress, dan kemudian CDN akan ditambahkan.

Metode 1: Manfaatkan Caching Browser Secara Manual di WordPress

Catatan: Metode ini hanya berfungsi dengan LiteSpeed ​​Enterprise atau Apache.

Dengan memasukkan beberapa kode dalam file .htaccess, Anda dapat secara manual memanfaatkan caching browser di WordPress. Untuk tiga tujuan berbeda, Anda sebenarnya perlu menambahkan tiga bit kode:

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

Anda harus memiliki akses ke file situs web Anda untuk menambahkan kode ini, yang dapat Anda selesaikan dengan masuk ke akun hosting atau CyberPanel Anda.

Buka dasbor CyberPanel Anda

Klik pada WordPress -> Daftar WordPress dari menu sebelah kiri

Anda akan masuk ke Daftar Website WordPress . Dari sini, Klik Judul Situs WordPress Anda

Ini adalah Manajer WordPress CyberPanel Anda. Klik pada Manajer File.

Di public_html , Anda akan menemukan . htaccess . Perhatikan bahwa aturan htaccess hanya didukung oleh LiteSpeed ​​Enterprise. Ini tidak didukung oleh Kecepatan OpenLite. Klik kanan padanya dan klik CodeMirror

Tambahkan kode berikut di akhir file . htaccess file dengan menyalin dan menempelkannya. Jangan memodifikasi file dengan cara lain.

 #Customize expires cache start - adjust the period according to your needs <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> #Expires cache end

Kode yang disebutkan di atas menginstruksikan browser untuk mengirimkan salinan cache dari sumber daya statis daripada mengunduh yang baru.

Waktu penyegaran/kedaluwarsa juga termasuk dalam pengaturan:

HTML membutuhkan waktu 600 detik.
JavaScript dan CSS selama satu bulan
Untuk gambar, setahun

Pengunjung tidak perlu mengunduh sumber daya tertentu terlalu sering berkat tanggal kedaluwarsanya. Jika perlu, Anda dapat dengan cepat mengubah waktu kedaluwarsa.

Untuk menetapkan kebijakan cache browser tentang cara resource di-cache, di mana cache, dan usia maksimum sebelum kedaluwarsa, kita perlu menyertakan header Cache Control. Kami tidak perlu mengulang waktu kadaluarsa seperti yang telah kami sebutkan sebelumnya.

kode berikut, lalu rekatkan:

 # BEGIN 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>

E-tag akan dinonaktifkan sehingga browser harus menggunakan header yang kedaluwarsa dan kontrol cache sebagai ganti verifikasi file. Inilah kuncinya:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Setelah Anda selesai, klik Simpan .

Metode 2: Manfaatkan Caching Browser di WordPress Menggunakan Plugin

Satu kesalahan dapat merusak situs web Anda sepenuhnya, oleh karena itu mengedit file .htaccess bisa sangat berbahaya. Dengan demikian, Anda dapat menggunakan plugin seperti W3 Total Cache jika Anda tidak ingin mengambil risiko yang tidak perlu.

Plugin W3 Total Cache

Berikut cara menggunakan W3 Total Cache, salah satu plugin terbaik untuk tujuan tersebut, untuk memanfaatkan caching browser.

Masuk ke Dasbor WordPress Anda

Klik Plugin -> Tambah Baru dari menu sebelah kiri

Cari W3 Total cache . Sekarang Instal dan aktifkan plugin ini

Tab Performance akan muncul di menu sebelah kiri. Klik Performa -> Pengaturan Umum dari menu sisi kiri

Gulir ke bawah ke Cache Browser dan pastikan mengaktifkan dan menyimpan perubahan

Sekarang Klik Performance -> Browser Cache dari menu sebelah kiri

Pastikan bahwa

  1. Setel tajuk kedaluwarsa
  2. Setel kontrol cache
  3. Setel tag entitas

diaktifkan. Simpan semua perubahan.

Plugin Cache LiteSpeed

CyberPanel memberi setiap pengguna LiteSpeed ​​Cache secara default dengan setiap penerapan situs WordPress. Jika Anda tidak menggunakan CyberPanel, Anda dapat mengunduhnya dari sini.

Dengan hanya mengaktifkan fitur, plugin caching LiteSpeed ​​Cache memungkinkan Anda untuk mengeksploitasi caching browser.

Masuk ke Dasbor WordPress Anda

Klik LiteSpeed ​​Cache -> Cache dari menu sebelah kiri

Klik pada tab Browser dari bilah atas

Pastikan Cache Browser diaktifkan dan klik Simpan Perubahan

Kesimpulan

Ingatlah bahwa terkadang setelah memasang plugin, Anda tidak akan langsung melihat perubahan yang Anda buat. File CSS/Stylesheet yang harus disalahkan atas keterlambatan ini. Anda tidak akan dapat melihat perubahan yang Anda buat karena cache browser yang sudah Anda simpan di mesin Anda. Disarankan untuk menggunakan fitur Penyamaran browser Anda untuk melihat situs web agar dapat melihatnya dengan benar setelah beberapa kali modifikasi. Anda tidak akan menggunakan sumber daya cache jika menggunakan fungsi ini, dan Anda seharusnya dapat melihat dengan jelas perubahannya.

Pendekatan yang Anda pilih untuk memanfaatkan cache browser pada akhirnya tidak relevan. Mengamatinya dalam tindakan adalah satu-satunya hal yang penting. Metode yang Anda gunakan untuk sampai ke sana tidak relevan selama Leverage Browser Caching di WordPress berfungsi sebagaimana dimaksud. Tidak ada pendekatan yang benar atau salah; hasilnya akan sama terlepas dari pilihan Anda. Leverage Browser Caching akan meningkatkan waktu pemuatan apakah Anda memutuskan untuk membuat perubahan pada file .htaccess atau menggunakan plugin.