Cara Memperbaiki Leverage Browser Caching di WordPress pada tahun 2021

Cara Memperbaiki Leverage Browser Caching di WordPress

pengantar

Apakah loading website Anda lambat? Apakah Anda mencari solusi efektif untuk mengatasi peringatan caching browser leverage di WordPress ? Kecepatan halaman adalah aspek penting dari pengalaman pengguna. Dalam posting ini, saya akan membagikan poin dasar hingga lanjutan tentang Cara Memperbaiki Leverage Browser Caching di WordPress. Jadi jika Anda juga menghadapi masalah ini maka harus membaca posting lengkap untuk pemahaman yang lebih baik.

Waktu yang dibutuhkan untuk memuat halaman yang diminta di browser pengguna sangat memengaruhi fakta bahwa pengguna itu sendiri tetap berada di situs Anda, misalnya, untuk menyelesaikan penjualan. Waktu buka halaman tergantung pada beberapa faktor: cache browser adalah salah satunya.

Kami pertama-tama akan mengeksplorasi apa itu Leverage Browser Caching dan bagaimana hal itu dapat membantu mempercepat situs web Anda. Jadi, kita akan melihat cara mengevaluasi apakah situs WordPress membutuhkan cache browser. Terakhir, kita akan melihat beberapa cara untuk mengatasi peringatan caching browser leverage di WordPress, dengan dan tanpa menggunakan plugin.

Apa itu caching browser leverage?

Cache adalah ruang penyimpanan sementara. Saat pengunjung meminta halaman di situs web Anda, server mengumpulkan informasi yang diperlukan dari database, mengaturnya ke dalam dokumen HTML, dan memberikannya ke browser. Peramban menganalisis dokumen ini dan mengunduh semua sumber daya yang relevan untuk melihat halaman.

Caching adalah proses penyimpanan sebagian muatan halaman dalam cache untuk mempercepat pemuatan halaman di masa mendatang. Cache dapat hadir di server atau perangkat pengunjung.

Di cache server, Anda dapat menyimpan kueri database dan respons HTML statis untuk halaman yang diminta.

Caching browser leverage adalah proses pemanfaatan penyimpanan sementara pada perangkat pengunjung untuk menyimpan sumber daya seperti lembar gaya, skrip, dan gambar untuk jangka waktu tertentu.

Kunjungan berikutnya ke halaman menyebabkan browser mengunduh sumber daya yang sama berulang kali, setiap kali pengguna meminta halaman tersebut. Karena sumber daya statis ini menghasilkan sejumlah besar muatan untuk situs WordPress, cache browser mengurangi waktu pemuatan halaman.

Apakah cache browser diperlukan?

Pemeriksaan situs web pada distribusi ukuran sumber daya muatan Anda biasanya mengungkapkan seberapa besar sumber daya Anda dan berapa banyak permintaan yang harus dikirim browser untuk mengunduhnya sebelum menampilkan halaman Anda. Jika Anda melihat bahwa sebagian besar halaman web Anda terdiri dari file statis, Anda harus mempertimbangkan untuk menyimpan cache browser Anda untuk meningkatkan kecepatan halaman.

Cara yang lebih alami untuk menentukan apakah cache browser diperlukan adalah dengan menggunakan alat uji kecepatan halaman seperti GTmetrix. Cukup masukkan URL situs web Anda untuk memulai pengujian mendetail. Hasil pengujian akan menunjukkan kepada Anda cara mempercepat situs web Anda. Seperti yang Anda lihat, peringatan umum di bagian hasil adalah caching browser leverage.

Atau, Anda dapat menggunakan Think with Google, alat uji kecepatan halaman untuk mengevaluasi situs web Anda di perangkat seluler. Rekomendasi utama alat ini adalah memanfaatkan caching browser untuk situs web Anda.

PageSpeed ​​​​Insights, alat Google lain untuk menguji kecepatan halaman situs web Anda, mungkin menyarankan agar Anda membuat kebijakan cache yang efektif untuk meningkatkan kecepatan halaman. Cache browser adalah bagian penting dari kebijakan cache yang efektif.

Selesaikan peringatan caching browser leverage di WordPress tanpa plugin

Jika Anda tidak ingin menggunakan plugin, Anda dapat mengubah pengaturan server web untuk memperbaiki cache browser leverage. Dalam hal ini, server web akan menginstruksikan browser pengunjung untuk menyimpan sumber daya tertentu di cache browser. Browser akan menyimpan file-file ini secara lokal untuk jangka waktu tertentu dan akan menggunakannya selama kunjungan berikutnya ke halaman tersebut.

Menyiapkan server web untuk menginstruksikan browser pengunjung untuk memulai caching bervariasi dari server ke server. Dalam posting ini, kami akan menunjukkan cara mengaktifkan cache browser di dua server web paling populer: Apache dan Nginx.

Anda dapat memperbaiki cache browser leverage dengan mengikuti langkah-langkah berikut:

1. Menambahkan Header Kedaluwarsa: Header ini memberi tahu browser kapan harus meminta versi baru sumber daya dari server.
2. Ubah header pemeriksaan cache: Anda dapat menggunakan header ini untuk menetapkan kriteria cache.
3. Pengaturan header entitas-tag (ETags): dimungkinkan untuk mengidentifikasi apakah sumber daya di server telah berubah dibandingkan dengan file lokal.

Perbaiki caching browser leverage di Apache

1. Buat atau edit file .htaccess

Pada server Apache, Anda dapat mengatur semua parameter yang diperlukan dalam file .htaccess. File ini memungkinkan Anda untuk mengkonfigurasi pengaturan Apache secara manual. Ini adalah file teks sederhana yang menyimpan parameter Apache dan mengatur izin dan konfigurasi untuk direktori tempat ia berada.

Baca Selengkapnya: Daftar Periksa SEO On-Page: 10 Tips Optimasi yang Dapat Ditindaklanjuti untuk Peringkat Lebih Baik

Jika Anda meletakkan file .htaccess di direktori utama situs web Anda, aturannya akan diterapkan ke semua halaman situs Anda. Anda juga dapat menempatkan file .htaccess lain di salah satu subdirektori Anda untuk mengatur izin khusus untuk lokasi itu saja. Perhatikan bahwa file .htaccess tingkat rendah menggantikan pengaturan file .htaccess di direktori root.

Jika Anda memiliki akses terminal ke server, Anda dapat login dari jarak jauh untuk membuat file .htaccess di lokasi yang sesuai (untuk aturan caching browser tingkat situs, ini harus folder root).

Atau, jika Anda menggunakan pengelola file cPanel, pindah ke lokasi yang diperlukan, dan buat file .htaccess .

Jika Anda sudah memiliki file .htaccess , Anda cukup menambahkan aturan caching browser baru.

2. Tambahkan Header Kedaluwarsa

Pengaturan pertama dalam file .htaccess adalah mengaktifkan fungsi header kedaluwarsa. Tambahkan baris berikut ke file:

KedaluwarsaAktif Aktif

Setelah itu, Anda dapat mengatur periode untuk file teks yang berbeda menggunakan sintaks yang ditunjukkan di bawah ini:

Teks ExpiresByType / CSS "akses 1 bulan"

Teks ExpiresByType / HTML "akses 1 bulan"

Untuk menyetel waktu kedaluwarsa untuk gambar, gunakan gambar alih-alih garis miring teks dan ekstensi gambar.

Gambar ExpiresByType / jpeg "akses 1 bulan"

Gambar ExpiresByType / svg "akses 1 bulan"

Untuk mengatur tenggat waktu aplikasi, gunakan aplikasi dan tentukan ekstensi file.

Aplikasi ExpiresByType / pdf "akses 1 bulan"

Untuk semua file lain yang tidak tercakup oleh pengaturan tertentu, gunakan definisi ExpiresDefault:

ExpiresDefault "akses 1 bulan."

3. Tentukan kebijakan cache

Selanjutnya, Anda perlu menentukan kriteria cache menggunakan pengaturan Cache Check.

Ada tiga bagian utama dari kebijakan cache:

• bagaimana sumber daya di-cache
• lokasi caching
• waktu sebelum sumber daya berakhir

Cache publik menunjukkan kepada browser bahwa sumber daya dapat di-cache di mana saja. Sebaliknya, cache pribadi memungkinkan penyimpanan hanya pada perangkat klien.

Misalnya, halaman profil pengguna yang masuk hanya boleh di-cache di perangkat klien.

Sebaliknya, beranda blog juga dapat di-cache di CDN. Anda dapat mengatur kebijakan cache publik dengan menambahkan aturan berikut:

<IfModule mod_headers.c>

Set Header Kontrol Cache Publik

</ JikaModul>

Anda juga dapat menentukan kriteria yang berbeda untuk berbagai jenis file dengan menambahkan filter berikut ke modul header:

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

Set Header Kontrol Cache Publik

</ FilesMatch>

<filesMatch “\. (php) $”>

Set Header Kontrol Cache Pribadi

</ FilesMatch>

</ JikaModul>

Kode di atas menetapkan bahwa browser dapat menyimpan file gambar di mana saja, tetapi file PHP harus disimpan di perangkat klien.

Anda juga dapat menambahkan konfigurasi Kedaluwarsa ke setiap aturan kecocokan file. Waktu kedaluwarsa harus ditentukan dalam detik. Dengan menyetelnya ke nol, browser harus meminta file setiap kali halaman dimuat:

Kumpulan tajuk Kedaluwarsa 0

4. Nonaktifkan Tag Entitas di Apache

Terakhir, perlu untuk menonaktifkan Tag Entitas menggunakan kode berikut:

FileETag Tidak Ada

Menonaktifkan ETag mengharuskan browser mengandalkan kriteria cache dan menghindari validasi ulang file setiap kali halaman dimuat.

Simpan file .htaccess dan mulai ulang Apache agar perubahan diterapkan.

Memecahkan Leverage Browser Caching di Nginx

Di Nginx, Anda dapat menemukan file konfigurasi nginx.conf di /etc/nginx/site-enabled/lokasi default.

Anda dapat menambahkan header Expires ke jenis file tertentu menggunakan kode berikut:

lokasi ~ * \. (ico | jpeg | jpg | png) $ {

berakhir 30 hari;

}

Anda juga dapat menambahkan header Cache-Control ke blok kode yang sama:

lokasi ~ * \. (ico | jpeg | jpg | png) $ {

berakhir 30 hari;

add_header Kontrol Cache "publik";

}

Simpan file konfigurasi dan mulai ulang Nginx agar perubahan diterapkan.

Selesaikan Leverage Browser Cache dengan plugin

Jika Anda menggunakan plugin caching untuk WordPress, plugin tersebut mungkin sudah memiliki dukungan untuk caching browser.

Sekarang mari kita lihat bagaimana memecahkan cache browser leverage dengan beberapa plugin cache yang paling terkenal.

1. Roket WP

WP Rocket adalah salah satu plugin tercepat dan paling direkomendasikan untuk WordPress yang dapat mengelola semua optimasi kecepatan hanya dengan beberapa klik. WP Rocket tidak hanya memungkinkan Anda untuk memecahkan caching browser leverage tetapi akan memungkinkan Anda untuk mengoptimalkan situs Anda menggunakan berbagai teknik seperti:

• kompresi file statis (GZip) – untuk mengurangi ukuran data total (baca posting lengkap tentang cara mengaktifkan kompresi GZip di WordPress)
• aktifkan cache file (termasuk cache preloading) – untuk mengurangi tekanan pada server (dan memulihkan salinan pra-pindai setiap halaman)
• Pengoptimalan Font Google – untuk memastikan font yang lebih besar dimuat dengan cepat,
• Pemuatan lambat – sehingga gambar hanya dikenakan biaya saat pengguna menggulir ke bawah ke bagian halaman di mana gambar diperlukan
• Minifikasi dan Kombinasi – pengurangan ukuran dan kombinasi sumber daya teks untuk mengirimkannya lebih cepat ke pengguna akhir
• Tunda pemuatan JS – sehingga halaman muncul dengan cepat alih-alih menunggu semua sumber daya untuk diunduh.
• Integrasikan dan aktifkan jaringan CDN – sehingga gambar yang lebih berat dikirimkan lebih cepat
• Prefetching DNS – untuk mengurangi waktu yang diperlukan untuk menyelesaikan asal konten pihak ketiga

Semua ini mungkin tampak tidak dapat dipahami oleh siapa saja yang tidak terlibat langsung dalam mengoptimalkan situs web. Namun, pada kenyataannya, ini semua adalah langkah-langkah yang perlu Anda ambil jika Anda ingin mempercepat WordPress.

Kami sangat merekomendasikan membaca ulasan WP Rocket kami,

2. Cache LiteSpeed

LiteSpeed ​​​​Cache adalah plugin caching yang memungkinkan Anda menyelesaikan caching browser leverage hanya dengan mengaktifkan fungsinya. Instal dan aktifkan plugin dan pergi ke pengaturan cache. Beralih ke tab Browser dan izinkan opsi Cache browser .

Dimungkinkan juga untuk mengatur waktu kedaluwarsa. Namun, perhatikan bahwa pengaturan ini berlaku untuk semua file yang di-cache di situs web.

3. WP Cache Tercepat

WP Fastest Cache adalah plugin cache WordPress lainnya dengan opsi penyesuaian sederhana. Versi gratis memungkinkan Anda untuk mengaktifkan cache browser. Buka halaman pengaturan dan pilih kotak centang untuk cache browser.

4. Tembolok Total W3

W3 Total Cache adalah plugin cache browser lain yang banyak digunakan. Ini memungkinkan Anda untuk menyesuaikan berbagai opsi caching. Setelah terinstal, buka bagian Cache Browser di halaman pengaturan.

Plugin ini memungkinkan Anda untuk mengatur izin untuk sejumlah kategori file, seperti gambar, skrip, dan lembar gaya. Untuk setiap grup, Anda dapat mengatur header Expires, Expires lifetimes, dan ETags.

Pertanyaan yang Sering Diajukan

Kesimpulan

Dalam posting ini, kami mengeksplorasi pentingnya kecepatan halaman dan mengapa Anda harus memperbaiki caching browser leverage di WordPress. Kami telah melihat alat uji kecepatan yang menunjukkan apakah situs WordPress Anda memerlukan cache browser. Selanjutnya, kita membahas cara mengkonfigurasi berbagai server web untuk mengaktifkan cache browser tanpa menggunakan plugin. Terakhir, kami melihat tiga plugin populer yang memungkinkan Anda memperbaiki caching browser leverage di WordPress.