Halaman ini diterjemahkan oleh Cloud Translation API.

Menyalurkan aset statis dengan kebijakan cache yang efisien

Penyimpanan dalam cache HTTP dapat mempercepat waktu pemuatan halaman pada kunjungan berulang.

Saat browser meminta resource, server yang menyediakan resource dapat memberi tahu browser berapa lama resource harus disimpan sementara atau di-cache. Untuk permintaan berikutnya bagi resource tersebut, browser akan menggunakan salinan lokalnya, bukan mendapatkannya dari jaringan.

Cara audit kebijakan cache Lighthouse gagal

Lighthouse menandai semua resource statis yang tidak di-cache:

Screenshot audit kebijakan cache yang efisien untuk Menayangkan aset statis Lighthouse

Lighthouse menganggap resource dapat di-cache jika semua kondisi berikut terpenuhi:

Resource adalah font, gambar, file media, skrip, atau sheet gaya.
Resource memiliki kode status HTTP 200, 203, atau 206.
Resource tidak memiliki kebijakan tidak menyimpan cache secara eksplisit.

Jika 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	Estimasi data yang akan disimpan pengguna jika resource yang ditandai telah di-cache

Cara meng-cache resource statis menggunakan caching 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 disimpan dalam 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 dalam waktu lama, seperti satu tahun atau lebih.

Gunakan no-cache jika resource berubah dan keaktualannya penting, tetapi Anda tetap ingin memperoleh beberapa manfaat kecepatan penyimpanan cache. Browser masih meng-cache resource yang ditetapkan ke no-cache, tetapi memeriksa server terlebih dahulu untuk memastikan bahwa resource tersebut masih terbaru.

Durasi cache yang lebih lama tidak selalu lebih baik. Pada akhirnya, Andalah yang memutuskan durasi cache yang optimal untuk resource Anda.

Ada banyak perintah untuk menyesuaikan cara browser menyimpan berbagai resource ke dalam cache. Pelajari lebih lanjut cara menyimpan resource dalam cache di Cache HTTP: panduan pertahanan pertama Anda dan codelab Mengonfigurasi perilaku penyimpanan dalam cache HTTP.

Cara memverifikasi respons yang di-cache di Chrome DevTools

Untuk melihat resource yang diperoleh browser dari cache-nya, buka tab Jaringan di Chrome DevTools:

Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools.
Klik tab Jaringan.

Kolom Ukuran di Chrome DevTools dapat membantu Anda memverifikasi bahwa resource telah di-cache:

Kolom Ukuran.

Chrome menayangkan resource yang paling banyak diminta dari cache memori, yang sangat cepat, tetapi dihapus saat browser ditutup.

Untuk memverifikasi bahwa header Cache-Control resource ditetapkan seperti yang diharapkan, periksa data header HTTP-nya:

Klik URL permintaan, di kolom Name pada tabel Requests.
Klik tab Header.

Memeriksa header Cache-Control melalui tab Headers — Memeriksa header `Cache-Control` melalui tab **Header**.

Panduan khusus stack

Drupal

Tetapkan Browser and proxy cache maximum age di halaman Administration » Configuration » Development. Baca Cache Drupal dan mengoptimalkan performa.