Penyimpanan cache HTTP dapat mempercepat waktu muat halaman pada kunjungan berulang.
Saat browser meminta resource, server yang menyediakan resource dapat memberi tahu browser berapa lama resource tersebut harus disimpan atau di-cache untuk sementara. Untuk setiap permintaan berikutnya untuk resource tersebut, browser akan menggunakan salinan lokalnya, bukan mendapatkannya dari jaringan.
Kegagalan audit kebijakan cache Lighthouse
Lighthouse menandai semua resource statis yang tidak di-cache:
![Screenshot aset statis Lighthouse Serve dengan audit kebijakan cache yang efisien](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/a-screenshot-the-lightho-d4eb993831c72.png?authuser=19&hl=id)
Lighthouse menganggap resource dapat di-cache jika semua kondisi berikut terpenuhi:
- Resource berupa font, gambar, file media, skrip, atau stylesheet.
- Resource ini memiliki kode status HTTP
200
,203
, atau206
. - Resource ini tidak memiliki kebijakan tanpa cache yang eksplisit.
Saat sebuah halaman gagal dalam audit, Lighthouse akan mencantumkan hasilnya dalam tabel dengan tiga kolom:
URL | Lokasi resource yang dapat di-cache |
TTL Cache | Durasi cache resource saat ini |
Ukuran Transfer | Perkiraan data yang akan disimpan pengguna Anda jika resource yang ditandai telah di-cache |
Cara meng-cache resource statis menggunakan cache HTTP
Konfigurasikan server Anda untuk menampilkan header respons HTTP Cache-Control
:
Cache-Control: max-age=31536000
Perintah max-age
memberi tahu browser berapa lama resource harus di-cache dalam hitungan detik.
Contoh ini menetapkan durasi ke 31536000
, yang sesuai dengan 1 tahun:
60 detik × 60 menit × 24 jam × 365 hari = 31536000 detik.
Anda harus meng-cache aset statis yang tidak dapat diubah untuk waktu yang lama, seperti satu tahun atau lebih.
Gunakan no-cache
jika resource berubah dan keaktualan penting,
tetapi Anda tetap ingin mendapatkan beberapa manfaat kecepatan dari caching.
Browser masih menyimpan cache resource yang disetel ke no-cache
,
tetapi memeriksa dengan server terlebih dahulu untuk memastikan bahwa resource masih berlaku.
Durasi cache yang lebih lama tidak selalu lebih baik. Pada akhirnya, Anda bebas menentukan durasi cache yang optimal untuk resource Anda.
Ada banyak perintah untuk menyesuaikan cara browser melakukan cache pada berbagai sumber daya. Pelajari lebih lanjut cara meng-cache resource di Cache HTTP: panduan baris pertahanan pertama Anda dan Mengonfigurasi codelab perilaku caching HTTP.
Cara memverifikasi respons yang di-cache di Chrome DevTools
Untuk melihat resource mana yang didapatkan browser dari cache-nya, buka tab Jaringan di Chrome DevTools:
[komentar]: <> (Daftar berikut adalah kode singkat dari web.dev, tapi tidak diterjemahkan dari bahasa Inggris untuk bahasa apa pun.)
1. Tekan Control+Shift+J
(atau Command+Option+J
di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
Kolom Size di Chrome DevTools dapat membantu Anda memverifikasi bahwa resource telah di-cache:
![Kolom Ukuran.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/the-size-column-4c3e86c3d8b8f.png?authuser=19&hl=id)
Chrome menyalurkan resource yang paling banyak diminta dari cache memori, yang sangat cepat, tetapi akan dihapus saat browser ditutup.
Untuk memastikan bahwa header Cache-Control
resource telah ditetapkan seperti yang diharapkan, periksa data header HTTP-nya:
- Klik URL permintaan, di bawah kolom Nama pada tabel Permintaan.
- Klik tab Header.
![Memeriksa header Cache-Control melalui tab Header](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-long-cache-ttl/image/inspecting-cache-control-881e2975bf9d3.png?authuser=19&hl=id)
Cache-Control
melalui tab Headers.
Panduan khusus stack
Drupal
Tetapkan Browser and proxy cache maximum age di halaman Administration > Configuration > Development. Lihat Referensi performa Drupal.
Joomla
Lihat Cache.
WordPress
Lihat Pembuatan Cache Browser.