Bagaimana cara kerja cache browser?

Diterbitkan: 2017-05-04

Cache browser adalah mekanisme yang digunakan oleh browser untuk menyimpan sumber daya halaman web secara lokal. Ini menambah peningkatan kinerja, meminimalkan konsumsi bandwidth dan secara keseluruhan menciptakan pengalaman yang lebih tajam. Pada artikel ini, kami menjelaskan cara kerja cache browser dan cara menerapkannya di situs web Anda.

Apa itu cache browser?

Cache adalah komponen perangkat lunak atau perangkat keras yang digunakan untuk menyimpan nilai sementara untuk akses yang lebih cepat di masa mendatang. Cache browser adalah database kecil file yang berisi sumber halaman web yang diunduh, seperti gambar, video, CSS, Javascript, dan sebagainya. Ide dasar di baliknya adalah sebagai berikut:

Browser meminta beberapa konten dari server web. Jika konten tidak ada dalam cache browser, maka konten tersebut diambil langsung dari server web. Jika konten sebelumnya di-cache, browser melewati server dan memuat konten langsung dari cache-nya.

Konten dianggap basi tergantung pada apakah konten yang di-cache telah kedaluwarsa atau belum. Segar, di sisi lain, berarti bahwa konten belum melewati tanggal kedaluwarsa dan dapat disajikan langsung dari cache browser tanpa melibatkan server.

Istilah validasi mengacu pada konten yang perlu diperiksa terhadap versi terbaru yang dimiliki server. Singkatnya, untuk menentukan apakah konten itu basi atau tidak. Pembatalan terjadi ketika konten telah dihapus dari cache sebelum tanggal kedaluwarsa berlalu. Ini dapat dipaksakan oleh server, jika konten telah berubah, dan browser harus memiliki versi terbaru agar tidak menimbulkan masalah.

Cache browser dapat dimanfaatkan oleh pengembang web dan administrator melalui penggunaan header HTTP tertentu. Header ini menginstruksikan browser web kapan harus menyimpan sumber daya, kapan tidak, dan untuk berapa lama. Menggunakan header terkait cache HTTP seringkali bisa membuat frustasi karena ada cukup tumpang tindih dengan header di berbagai reinkarnasi dari protokol HTTP. Tambahkan ke campuran hal-hal seperti proxy web aneh di antaranya, browser lama, kebijakan dan implementasi caching yang bertentangan (misalnya plugin WordPress yang berbeda) dan itu dapat dengan cepat menjadi sakit kepala.

Header cache browser

Kumpulan aturan yang menentukan apa yang dapat di-cache atau tidak dan untuk berapa lama disebut kebijakan caching. Ini diimplementasikan oleh pemilik situs web melalui penggunaan header respons caching. Meskipun ini dapat dicapai dengan banyak cara berbeda, Anda mungkin harus memperhatikan diri Anda hanya dengan kontrol-Cache, di awal.

Kontrol-tembolok

Header Cache-control diperkenalkan di HTTP/1.1 dan dianggap sebagai implementasi paling modern. Ada beberapa nilai berbeda yang dapat Anda gunakan, tergantung pada bagaimana Anda ingin browser berperilaku. Membuatnya cukup serbaguna. Di bawah ini adalah daftar arahan Cache-Control:

Tanpa cache
Menginstruksikan browser web Anda untuk tidak langsung merujuk ke cache, tetapi untuk memvalidasi konten terhadap server. Jika masih segar, maka dapat disajikan dari cache.
Tidak ada toko
Memberi tahu browser untuk tidak menyimpan konten dalam cache dengan cara apa pun. Ini sebagian besar digunakan ketika berhadapan dengan data sensitif atau dengan data yang sering berubah.
Publik
Menandai konten sebagai publik, yang berarti dapat di-cache oleh browser dan pihak perantara mana pun (seperti proxy, dll).
Pribadi
Digunakan untuk menandai konten sebagai pribadi, artinya hanya dapat di-cache oleh browser, dan tidak oleh proxy perantara dan semacamnya. Ini biasanya mengacu pada data terkait pengguna.
Usia maksimal
Max-age menunjukkan waktu maksimum dalam detik bahwa konten dapat tetap berada di cache browser sebelum klien perlu memvalidasi ulang. Bertentangan dengan header Expires yang akan segera kita kunjungi, max-age menentukan nilai relatif dalam hitungan detik sejak konten di-cache, dan bukan tanggal kedaluwarsa mutlak.
S-maksimum
Ini mirip dengan max-age tetapi hanya digunakan untuk cache perantara.
Harus memvalidasi ulang
Memaksa browser untuk memvalidasi ulang konten setiap kali dibutuhkan, bukan hanya menyajikannya langsung dari cache browser.
Ini berguna jika terjadi gangguan jaringan.
Validasi ulang proxy
Mirip dengan must-revalidate, tetapi hanya berlaku untuk cache perantara.
tanpa transformasi
Menginstruksikan browser untuk tidak mengubah konten yang diterima dari server dengan cara apa pun (biasanya kompresi, dll).

Etag

Header respons Etag digunakan untuk mengidentifikasi sumber daya tertentu. Setiap kali sumber daya tertentu berubah, Etag baru dibuat. Dengan cara ini, bandwidth dihemat, karena server web tidak perlu memberikan respons penuh jika Etag tidak berubah. Akibatnya, header Etag diaktifkan secara default di Nginx dan Apache, dan nilai Etag dihasilkan secara otomatis, jadi Anda tidak perlu menentukan apa pun.

kedaluwarsa

Ini diperkenalkan di HTTP/1.0 dan menentukan tanggal tertentu di masa mendatang di mana konten akan dianggap basi. Ini secara efektif merupakan tanggal "terbaik sebelum" untuk konten. Misalnya, Kedaluwarsa: Kam, 25 Mei 2017 12:30:00 GMT

pragma

Ini adalah header HTTP/1.0 yang agak ketinggalan jaman yang sebagian besar digunakan untuk kompatibilitas mundur. Memasukkan Pragma: no-cache akan membuat browser Anda berperilaku mirip dengan Cache-Control: no-cache .

Bagaimana menerapkan kebijakan caching di situs web Anda

Ada dua cara untuk menerapkan kebijakan caching di situs web Anda. Yang pertama adalah menentukan header respons caching dalam konfigurasi server web. Yang kedua adalah melakukannya langsung di dalam PHP. Di bawah ini adalah contoh dari dua server web paling populer, Apache2 dan Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control "public" ; }

Seperti yang Anda lihat, itu cukup mudah. Pada contoh pertama, kami menggunakan direktif FileMatch Apache2 untuk mencocokkan dengan kumpulan tipe file tertentu (.ico, .pdf, dll) dan menjadikannya publik, dengan usia maksimum 84600 detik. Di bagian kedua, kami kembali mencocokkan jenis file tertentu menggunakan arahan lokasi nginx, dan menyertakan usia maksimal 365 hari. Kami juga mendefinisikannya sebagai "publik' menggunakan klausa add header.

PHP

Jika Anda ingin menambahkan header respons langsung ke kode Anda, cukup gunakan perintah header PHP.

<?php header("Cache-Control: no-cache"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); header("Cache-Control: max-age= 604800"); ?>

Cara menguji untuk melihat apakah itu berfungsi

Anda dapat dengan mudah menguji untuk melihat aturan cache browser Anda, dengan menggunakan, misalnya, konsol web Firefox atau Alat Pengembang Chrome:

Klik pada ikon hamburger di kanan atas.
Pilih Alat Lainnya > Alat Pengembang
Masukkan URL Anda ke bilah alamat dan tekan Enter.

Anda akan melihat daftar permintaan saat URL Anda dimuat. Pilih sumber daya dengan mengkliknya. Periksa header Respons di sebelah kanan, dan khususnya Kode Status. Itu mencetak 200 Kode HTTP tetapi menunjukkan dalam tanda kurung bahwa itu dari cache memori.

Ini berarti bahwa sumber daya dimuat secara otomatis dari penyimpanan cache lokal, alih-alih memintanya dari server.

Jika Anda memiliki klausa "harus-revalidasi" pada header Cache-Control Anda, kode statusnya adalah 304 (Tidak Dimodifikasi). Ini berarti browser Anda memvalidasi ulang sumber daya terhadap server, dan server menjawab bahwa konten tidak berubah, sehingga dapat disajikan dari cache browser.

Lanjutkan untuk menonaktifkan cache dengan mencentang kotak centang Nonaktifkan cache dan tekan Muat Ulang.

Dalam hal ini, Anda melihat bahwa Kode Status adalah 200 tanpa indikasi bahwa kode tersebut menggunakan cache. Browser meminta sumber daya dari server web, dan server web merespons dengan menyajikan kembali salinan baru.

Kesimpulan

Caching browser dan kebijakan caching bisa menjadi sangat rumit. Tetapi memulai bereksperimen dengan Cache-Control seperti yang telah kami tunjukkan sangatlah mudah. Sebagian besar waktu menerapkan kebijakan caching "generik" untuk aset statis sudah cukup untuk membuat perbedaan pada kinerja situs web Anda. Namun, itu menambahkan lapisan ekstra "kekhawatiran" di atas begitu banyak hal lainnya, dan kami percaya seharusnya tidak seperti itu. Ikuti kami di posting berikutnya, di mana kami akan menunjukkan bagaimana kami menerapkan cache browser di Pressidium yang membuat semua kekhawatiran itu hilang.