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 sumber daya dapat memberi tahu browser berapa lama resource harus disimpan sementara atau di-cache. Untuk permintaan berikutnya bagi resource tersebut, {i>browser<i} menggunakan salinan lokalnya daripada mendapatkannya dari jaringan.

Cara audit kebijakan cache Lighthouse gagal

Mercusuar 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 tersebut adalah font, gambar, file media, skrip, atau stylesheet.
Resource memiliki kode status HTTP 200, 203, atau 206.
Resource ini tidak memiliki kebijakan no-cache yang eksplisit.

Saat sebuah laman gagal dalam audit, Lighthouse 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 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 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 dalam waktu yang lama, misalnya satu tahun atau lebih.

Gunakan no-cache jika resource berubah dan keaktualannya penting, tetapi Anda perlu mendapatkan beberapa manfaat kecepatan {i>caching<i}. Browser masih menyimpan cache resource yang disetel ke no-cache tetapi memeriksa dengan server terlebih dahulu untuk memastikan bahwa sumber daya masih terkini.

Durasi cache yang lebih lama tidak selalu lebih baik. Pada akhirnya, terserah Anda untuk memutuskan berapa durasi {i>cache<i} optimal untuk sumber daya Anda.

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

Cara memverifikasi respons yang di-cache di Chrome DevTools

Untuk melihat sumber daya mana yang diperoleh browser dari {i>cache-<i}-nya, buka tab Jaringan di Chrome DevTools:

[komentar]: <> (Daftar berikut adalah kode singkat dari web.dev, tetapi 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, namun akan dihapus saat browser ditutup.

Untuk memastikan header Cache-Control resource disetel seperti yang diharapkan, memeriksa data header HTTP-nya:

Klik URL permintaan, di bagian kolom Nama pada tabel Permintaan.
Klik tab Header.

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

Panduan khusus stack

Drupal

Tetapkan Usia maksimum cache browser dan proxy di Administrasi > Konfigurasi > Development. Lihat Referensi performa Drupal.