Halaman ini diterjemahkan oleh Cloud Translation API.

Menyalurkan aset statis dengan kebijakan cache yang efisien

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

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, atau 206.
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:

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 — Memeriksa header `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.