Jika Anda pernah menjalankan situs web WordPress Anda melalui Google PageSpeed Insights atau Pingdom, maka Anda mungkin telah melihat peringatan caching peramban leverage yang hebat tersebut. Maka Anda tepat apabila membaca artikel ini sekarang. Hari ini kita akan berbicara tentang apa arti peringatan yang dimaksud diatas, bagaimana pengaruhnya terhadap Anda dan opsi apa yang Anda miliki ketika sampai pada halaman WordPress Anda.
Apa itu peringatan “Leverage Browser Caching”?
Peringatan ” Leverage Browser Caching “, ditampilkan di bawah dalam tangkapan layar, merujuk ke cache browser Anda. Setiap kali Anda mengunjungi situs web, situs itu mengunduh aset seperti HTML, CSS, JavaScript, dan gambar ke dalam cache lokal browser Anda. Dengan begitu, dia tidak harus mengambil ini setiap kali dia melihat halaman. Peringatan itu sendiri dikembalikan jika server web atau server pihak ketiga tidak memiliki header cache HTTP yang benar atau header mungkin ada, tetapi waktu cache diatur itu terlalu pendek.
Anda juga dapat melihat peringatan ini di tes kecepatan halaman web ” think with Google, ” yang didasarkan pada Google PageSpeed Insights. Ini dirancang oleh Google lebih sebagai alat pemasaran, tetapi ini berarti bahwa banyak pengguna sekarang hanya meneruskan kesalahan ini ke webmaster mereka. Jadi pengembang dan perancang WordPress dapat mencari cara untuk memperbaikinya dengan cepat untuk meyakinkan para pengguna mereka.
Cara Memperbaiki pesan “Leverage Browser Caching” di WordPress
Ketika Anda ingin memperbaiki Peringatan Caching Browser Leverage, ada beberapa skenario berbeda yang umumnya ditemui oleh pengguna WordPress. Jelas, yang paling umum adalah bahwa server web tidak dikonfigurasi dengan benar. Penyebab yang kedua adalah bahwa skrip Google Analytics memberi kita peringatan. Dan yang ketiga adalah skrip pihak ketiga lainnya yang mengembalikan peringatan. Di bawah ini Anda dapat melihat opsi mana yang bisa Anda terapkan.
1. Gunakan cache browser di server
Alasan pertama dan paling umum mengapa peringatan caching browser muncul adalah bahwa server web tidak memiliki tajuk yang sesuai. Pada tangkapan layar di bagian bawah Google PageSpeed Insights, kita dapat melihat alasan bahwa kedaluwarsa tidak ditentukan . Ketika datang ke caching, ada dua metode utama yang digunakan, header kontrol cache dan header Expires . Sementara header kontrol cache memungkinkan caching sisi klien dan menetapkan usia maksimum sumber daya, header Expires digunakan untuk mengatur waktu tertentu ketika sumber daya tidak lagi valid.
Jadi mari kita lihat bagaimana Anda dapat menambahkan header ini ke server web Anda.
Catatan: Anda tidak harus menambahkan kedua tajuk karena ini agak berlebihan. Kontrol cache yang lebih baru dan biasanya itu metode yang disarankan, tetapi beberapa alat kinerja web seperti GTmetrix masih memeriksa header Kedaluwarsa. Ini semua adalah contoh, Anda dapat mengubah jenis file, waktu kedaluwarsa, dll sesuai dengan kebutuhan Anda.
Tambahkan header kontrol cache di nginx
Anda dapat menambahkan header kontrol cache di Nginx dengan menambahkan kode dibawah ini ke lokasi server atau blok konfigurasi server Anda.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
Jadi apa sebenarnya yang dilakukan oleh kode di atas? Pada dasarnya, memberi tahu server bahwa jenis file tidak akan berubah selama setidaknya satu bulan. Jadi daripada harus mengunduh sumber daya setiap saat, itu akan di-cache di komputer Anda. Dengan cara ini, lebih cepat bagi pengunjung yang kembali.
Tambahkan Expires Header di Nginx
Anda dapat menambahkan header Kedaluwarsa di Nginx dengan menambahkan kode dibawah ini ke blok server Anda. Dalam contoh ini, Anda akan melihat bagaimana Anda dapat mengatur waktu kedaluwarsa yang berbeda tergantung pada jenis file.
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Tambahkan header kontrol cache di Apache
Anda dapat menambahkan header kontrol cache di Apache dengan menambahkan kode dibawah ini ke file .htaccess Anda. Cuplikan kode dapat ditambahkan di bagian atas atau bawah file (sebelum # BEGIN WordPress atau setelah # END WordPress).
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
Tambahkan header Kedaluwarsa di Apache
Anda dapat menambahkan header Kedaluwarsa di Apache dengan menambahkan kode berikut ini ke file .htaccess Anda.
## EXPIRES HEADER CACHING ##
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”
## EXPIRES HEADER CACHING ##
2. Penggunaan caching browser dan Google Analytics
Muncul pesan caching browser yang paling umum kedua sebenarnya dari Google Analytics. Karena skrip Google sendiri. Masalahnya adalah mereka menetapkan waktu cache 2 jam yang rendah untuk aset mereka, seperti yang ditunjukkan pada gambar di bawah. Anda kemungkinan besar melakukan ini. Jika karena alasan tertentu Anda ingin mengubah sesuatu pada akhirnya, Anda ingin semua pengguna mendapatkan perubahan sesegera mungkin. Namun, ada cara untuk menyiasatinya dengan meng-hosting skrip Google Analytics di server Anda sendiri. Harap perhatikan, bagaimanapun, bahwa Google tidak mendukung ini.
Ada plugin kecil gratisan yang disebut Complete Analytics Optimization Suite , dibuat dan dikembangkan oleh Daan van den Bergh, yang memungkinkan Anda meng-host Google Analytics secara lokal di situs web WordPress Anda.
Anda dapat mengunduh Suite Optimasi Analisis Lengkap dari repositori WordPress atau dengan mencarinya di bawah plugin “Tambah Baru” di Dasbor WordPress. Plugin ini memungkinkan Anda untuk meng-host file JavaScript Google Analytics Anda (analytics.js) secara lokal dan memperbaruinya dengan wp_cron (). Fitur lain termasuk kemampuan untuk dengan mudah menganonimkan alamat IP pengunjung Anda, menetapkan rasio pentalan khusus, dan menempatkan skrip (header atau footer).
Beberapa manfaat tambahan dari hosting skrip Analytics Anda secara lokal adalah Anda mengurangi permintaan HTTP eksternal Anda ke Google dari 2 menjadi 1 dan sekarang memiliki kontrol penuh atas caching file . Ini berarti bahwa Anda dapat menggunakan header cache seperti yang ditunjukkan di atas.
Cukup instal plugin, masukkan ID pelacakan Google Analytics Anda, dan plugin akan menambahkan kode pelacakan yang diperlukan untuk Google Analytics ke situs web WordPress Anda, unduh file analytics.js, simpan ke server, dan perbarui dengan skrip terjadwal di wp_cron (). Kami menyarankan Anda juga mengaturnya untuk memuat di footer.
Catatan: Plugin ini tidak berfungsi dengan plugin WordPress Google Analytics lainnya.
3. Bagaimana dengan skrip pihak ketiga lainnya?
Jika Anda menjalankan bisnis di situs web WordPress Anda, kemungkinan besar Anda akan memiliki skrip pihak ketiga tambahan yang akan dijalankan untuk melacak konversi, uji A / B , dan sebagainya. Ini dapat mencakup skrip seperti Pixel Facebook , Twitter, CrazyEgg, Hotjar dll. Karena Anda tidak dapat meng-host mereka secara lokal, sayangnya, Anda tidak dapat berbuat banyak pada saat ini karena Anda tidak memiliki kendali atas caching aset pihak ketiga ini. Tetapi untuk banyak situs web dan blogger yang lebih kecil, Anda kemungkinan besar bisa menyingkirkan peringatan caching browser leverage ini dengan mengikuti rekomendasi di atas.
Ringkasan
Anda pasti memiliki beberapa opsi yang tersedia jika Anda mencoba untuk memperbaiki peringatan yang menjengkelkan ini “Leverage Browser Caching” di halaman WordPress Anda. Bagi kebanyakan orang, Anda mungkin dapat dengan mudah memperbaikinya. Ingatlah bahwa alat kinerja web ini hanya boleh digunakan sebagai pedoman. Anda tidak harus memperbaiki setiap pesan kesalahan kecil. Tetapi memperbaiki beberapa peringatan biasanya menghasilkan halaman WordPress yang lebih cepat.
Demikianlah pembahasan tentang pesan peringatan “Leverage Browser Caching” yang bisa kami sampaikan solusinya buat Anda. Semoga dengan adanya pembahasan ini bisa membantu Anda. Terima kasih!
