3 Cara Memperbaiki Leverage Browser Caching Pada WordPress

Leverage Browser Caching Pada WordPress
Leverage Browser Caching 100/100 (A)

Google PageSpeed ​​Insights adalah salah satu dari beberapa alat yang berguna untuk mengukur kecepatan suatu website. Namun, akan ada beberapa saran yang harus Anda perbaiki seperti peringatan ‘Leverage Browser Caching’, mungkin membingungkan bagi pemilik situs web jika ia tidak berpengalaman. Lalu bagaimana cara mengatasi peringatan Leverage Browser Caching?

Ketika Anda ingin sekali untuk memecahkan masalah ini, sebanarnya tidak terlalu sulit untuk dipahami meskipun Anda adalah seorang pemula. Anda dapat menerapkan 3 cara terbaik dibawah ini untuk pengembangan atau mengurangi waktu pemuatan halaman dan meningkatkan skor PageSpeed ​​Anda menjadi 100/100.

Apa itu Leverage Browser Caching

Untuk memahami peringatan Caching pada Browser, ada baiknya Anda mengetahui sedikit tentang Google PageSpeed ​​Insights. Jika Anda baru mengenal platform ini, kami sarankan untuk membaca panduan lengkapnya,

Peringatan Leverage Browser Cahcing adalah salah satu dari banyak ‘diagnostik’ Google PageSpeed ​​yang digunakan untuk kembali sebagai saran untuk meningkatkan skor Anda seperti yang berikut

Memperbaiki Leverage Browser Caching Pada WordPress
Sebelum perbaikan
Memperbaiki Leverage Browser Caching Pada WordPress
Sesudah perbaikan

Meskipun ada perubahan bahasa dan penampilan, solusi untuk peringatan ini tetap sama.

Google menyarankan untuk semua website agar menggunkan caching peramban untuk mengurangi waktu pemuatan halaman dan meningkatkan kinerja website tersebut. Singkatnya, caching adalah ketika browser pengguna menyimpan salinan statis halaman situs Anda. Kemudian, pada kunjungan berikutnya, konten ini dapat dimuat ulang lebih cepat karena browser tidak harus menghubungi server situs Anda untuk mengakses sumber daya yang diminta.

Namun, setiap sumber daya yang di-cache membutuhkan periode kedaluwarsa yang ditentukan. Ini memberi tahu browser ketika konten di situs Anda menjadi usang, sehingga dapat mengganti salinan yang di-cache dengan versi yang diperbarui.

Jika Anda melihat peringatan “Leverage Browser Caching” di hasil tes kinerja Anda, kemungkinan itu berarti satu dari dua hal:

  • Header Kontrol-Cache atau Kedaluwarsa hilang dari server situs Anda atau pihak ketiga.
  • Header yang diperlukan ada, tetapi periode kedaluwarsa sangat singkat dan karenanya tidak memiliki banyak dampak pada kinerja.

Solusi untuk peringatan ini mencakup memperbaiki satu atau kedua masalah ini.

Peringatan! Caching Peramban Leverage reading Jika membaca kata-kata itu membuat jantung Anda berdetak kencang, Anda ingin memeriksa panduan ini untuk memperbaiki pesan yang ditakuti itu.

anytime.co.id

Bagaimana cara memperbaiki peringatan levarge browser cahcing pada wordpress ( terdapat 3 cara mudah )

Ada beberapa cara berbeda untuk memperbaiki peringatan Caching Browser Leverage di WordPress, tergantung pada apa yang menyebabkannya. Berikut tiga solusi yang bisa Anda coba.

Tambahkan Cache-Control dan Expires Headers.

Ada dua tajuk yang terkait dengan caching peramban: Kontrol-Cache dan Berakhir. Setidaknya satu harus ada untuk mengaktifkan cache browser untuk situs Anda, karena ini adalah cara browser menentukan berapa lama mereka harus menyimpan sumber daya sebelum menyegarkan mereka.

Cara sederhana untuk menentukan apakah inilah yang menyebabkan peringatan Caching Browser Leverage adalah dengan melihat detail yang diberikan untuk setiap sumber daya. Di Google PageSpeed ​​Insights Versi 5, Anda akan melihat “Tidak Ada” yang terdaftar di Cache TTL sebagai gantinya:

pagespeed cache ttl mengatasi levarge browser cahcing

Sebagai referensi praktis, versi Google PageSpeed ​​Insights sebelumnya menunjukkan pesan “kedaluwarsa tidak ditentukan” ketika header tidak ada:

pagespeed cache ttl mengatasi levarge browser cahcing

Saat tajuk Kontrol-Cache mengaktifkan caching sisi klien dan menetapkan usia maksimum sumber daya, tajuk Kedaluwarsa digunakan untuk menentukan titik waktu saat sumber daya tidak lagi valid.

Anda tidak perlu menambahkan keduanya, karena ini bisa berlebihan. Cache-Control lebih baru dan biasanya merupakan metode yang disarankan. Namun, beberapa alat kinerja web, seperti GTmetrix, masih memeriksa header Kedaluwarsa.

Cara Menambahkan Header Kontrol Cache di Nginx

Untuk menambahkan header Kontrol-Cache di Nginx, Anda dapat menambahkan berikut ini ke file konfigurasi server Anda:

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

Ini memberi tahu server Anda bahwa jenis file yang ditentukan tidak akan berubah selama setidaknya 30 hari. Ini akan menyimpan file yang relevan disimpan untuk jangka waktu tertentu sebelum menyegarkannya.

Cara Menambahkan Header Kontrol Cache di Apache

Jika Anda memiliki server Apache, Anda dapat menambahkan kode berikut ke file .htaccess Anda:

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

Cuplikan ini harus ditambahkan sebelum “#BEGIN WordPress” atau setelah “#END WordPress”. Dalam hal ini, cache diatur untuk kedaluwarsa setelah 84.600 detik.

Bagaimana cara menambahkan Expires Headers  di Nginx.

Anda dapat menambahkan header Kedaluwarsa di Nginx dengan menambahkan berikut ini ke blok server Anda. Dalam contoh ini, Anda dapat melihat cara menentukan waktu kedaluwarsa yang berbeda berdasarkan jenis file:

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Cara Menambahkan Expires Headers  di Apache.

Anda bisa menambahkan header Kedaluwarsa di Apache dengan menambahkan berikut ini ke file .htaccess Anda:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "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 image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Anda kemudian dapat memeriksa tajuk dengan menjalankan situs Anda melalui Google PageSpeed ​​Insights lagi dan melihat apakah peringatan tetap ada.