Perbaiki Sajikan aset statis dengan kebijakan cache yang efisien
Google Wawasan PageSpeed adalah salah satu alat evaluasi kinerja situs web paling populer dari banyak saudara. Namun terkadang Insights memberikan beberapa rekomendasi yang dapat membingungkan bagi yang belum berpengalaman seperti: Sajikan aset statis dengan kebijakan cache yang efisien.
Menggali lebih dalam tentang ini, menyiapkan caching tidaklah sulit. Membuat beberapa perubahan kecil pada situs Anda akan meningkatkan kecepatan memuat halaman dan meningkatkan skor PageSpeed Anda. Pada artikel ini, saya akan memperkenalkan kebijakan cache dan beberapa tips untuk memperbaiki kesalahan ini di PageSpeed.
Apa itu Kebijakan Cache?
Kebijakan Cache adalah seperangkat aturan yang menentukan apakah suatu permintaan dapat menggunakan salinan sumber daya yang di-cache. Menggunakan aturan ini akan membantu browser untuk menggunakan sumber daya yang di-cache dengan benar pada kunjungan berikutnya.
Biasanya ketika browser membuat permintaan untuk sumber daya halaman web, server akan menyediakan browser dengan durasi sumber daya ini dalam cache. Pada kunjungan selanjutnya yang memerlukan sumber daya ini, browser akan menggunakan sumber daya yang di-cache alih-alih harus mengunduhnya dari server. Di dalamnya, cache sumber daya statis (cache statis) juga dikenal sebagai caching browser.
Saat menguji kinerja dengan Wawasan PageSpeed, Lighthouse akan melaporkan sumber daya yang perlu di-cache jika semua kondisi berikut terpenuhi:
- Sumber daya berupa gambar, file media, font, Javascript dan CSS.
- Tanggapan sumber daya dengan kode HTTP:
200,203atau206. - Sumber daya tanpa pengaturan
no-cache.
Memperbaiki Sajikan aset statis dengan kebijakan cache yang efisien
Di bagian ini, saya akan memandu Anda dalam menyajikan konten statis dengan kebijakan caching yang efektif sebagai berikut:
Menyiapkan Cache-Control dan Expires Header
Ada dua pengaturan penting untuk caching statis di header: Cache-Control Dan Expires
Yang pertama mengonfigurasi untuk memungkinkan browser meng-cache sumber daya, dan yang lainnya mengatur durasi cache.
Dalam nilai Cache-Control mungkin juga berisi nilai yang menentukan durasi cache sama dengan max-age. Nilai dari Expires akan menentukan kapan cache kedaluwarsa.
cache-control: public, max-age=604800
Bahkan, Anda hanya perlu menyetel nilai Header Cache-Control cukup. Namun, beberapa alat pengujian kinerja akan memeriksa header tambahan Expires. Jadi atur keduanya jika perlu.
Berikut adalah petunjuk untuk menyiapkan header Cache-Control dan Expries untuk NginX dan Apache:
Petunjuk untuk menyiapkan Header di NginX
Untuk mengatur tajuk Expires, silahkan tambahkan kode berikut ke server. File ini biasanya terletak di /etc/nginx/nginx.conf.
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 2d;
}
Untuk sumber daya gambar, multimedia, waktu yang disarankan adalah 365 hari dan 2 hari untuk file CSS, JS, HTML, dll.
Untuk membangun Cache-Control Untuk NginX, silakan gunakan kode di bawah ini:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Petunjuk untuk menyiapkan Header di Apache
Untuk server yang menjalankan Apache, kita dapat mengonfigurasi header Cache-Control dalam file .htaccess sebagai berikut:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"Nilai max-age diatur ke 84600 detik.
Dengan tajuk Kedaluwarsa, tambahkan berikut ini ke file .htaccess:
## 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 juga dapat merujuk ke konfigurasi caching Browser di .htaccess oleh Vietrick:
# BEGIN Browser Caching
<ifmodule mod_expires.c="">
ExpiresActive On
ExpiresDefault A0
<filesmatch "\.(txt|xml|js)$"="">
ExpiresDefault A31536000
</filesmatch>
<filesmatch "\.(css)$"="">
ExpiresDefault A31536000
</filesmatch>
<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$"="">
ExpiresDefault A31536000
</filesmatch>
<filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
ExpiresDefault A31536000
</filesmatch>
</ifmodule>
<ifmodule mod_headers.c="">
<filesmatch "\.(txt|xml|js)$"="">
Header set Cache-Control “max-age=31536000”
</filesmatch>
<filesmatch "\.(css)$"="">
Header set Cache-Control “max-age=31536000”
</filesmatch>
<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$"="">
Header set Cache-Control “max-age=31536000”
</filesmatch>
<filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
Header set Cache-Control “max-age=31536000”
</filesmatch>
</ifmodule>Batasi penggunaan skrip pihak ke-3 (Third-party)
Selain menyiapkan Kebijakan Cache untuk server Anda, harap batasi penggunaan sumber daya dari pihak ketiga. Alasan sederhananya adalah kami hanya dapat mengontrol Kebijakan Cache di server kami.
Contoh utama dalam hal ini adalah penggunaan Google Analytics. Meskipun GA diatur kedaluwarsa setelah 2 jam. Jika menggunakan kode sumber WordPress, Anda dapat mempertimbangkan untuk menggunakan plugin Host Google Analytics Secara Lokal.
Jika skrip pihak ketiga merupakan bagian penting dari situs Anda, solusinya adalah menempatkan sumber daya ini tetap di server Anda.
Periksa hasilnya
Setelah melakukan pengaturan pengiriman konten statis dengan caching. Anda dapat memeriksa dengan alat Chrome DevTools.
Di browser Chrome, Anda menekan tombol F12 untuk membuka DevTools. Kemudian beralih ke tab Jaringanjangan lupa hapus centang pada kotak Nonaktifkan tembolok. Kemudian segarkan atau F5 untuk memuat ulang halaman beberapa kali dan lacak hasilnya di kolom Ukuran.
Jika Anda menggunakan FireFox, Anda dapat menyalakannya Pengembangan Web > Jaringan atau tekan kombinasi tombol Ctrl + Shift + E. Hapus centang pada kotak Nonaktifkan Cachedan pantau nilai di kolom Ditransfer.
Menyimpulkan
Hanya dengan beberapa langkah sederhana, Anda telah menyiapkan kebijakan distribusi cache secara efektif. Trik ini akan membantu mempercepat pemuatan halaman dengan pengunjung reguler ke situs Anda. Untuk memperbaiki Sajikan aset statis dengan kesalahan kebijakan cache yang efisien di PageSpeed Insights, harap:
- Tambahkan header Cache-Control dan Expires.
- Batasi penggunaan script dari pihak ke-3 (third-party)
Jika Anda memiliki trik bagus tentang Kebijakan Cache untuk dibagikan di komentar untuk semua orang.
