Cara me-cache halaman html

Akhir-akhir ini saya melakukan tendangan mengutak-atik web. cara mempercepat javascript, file gzip dengan server Anda, dan mengetahui cara menyiapkan caching. Tapi alasannya sederhana. kinerja situs adalah fitur

Untuk situs web, kecepatan mungkin merupakan fitur #1. Pengguna benci menunggu, kami merasa frustrasi dengan buffering video dan halaman yang muncul bersamaan saat gambar dimuat dengan lambat. Ini pengalaman pengguna yang menggelegar (alias buruk). Waktu yang diinvestasikan dalam pengoptimalan situs sangat berharga, jadi mari selami

Apa itu Caching?

Caching adalah contoh bagus dari tradeoff ruang-waktu di mana-mana dalam pemrograman. Anda dapat menghemat waktu dengan menggunakan ruang untuk menyimpan hasil

Dalam hal situs web, browser dapat menyimpan salinan gambar, stylesheet, javascript, atau seluruh halaman. Lain kali pengguna membutuhkan sumber daya tersebut (seperti skrip atau logo yang muncul di setiap halaman), browser tidak perlu mengunduhnya lagi. Lebih sedikit unduhan berarti situs yang lebih cepat dan lebih menyenangkan

Berikut penyegaran cepat tentang cara browser web mendapatkan halaman dari server

1. Peramban. yo. Anda mendapat indeks. html?
2. Server. (Mencarinya…)
3. Memutuskan. Benar-benar, bung. Ada di sini
4. Peramban. Itu rad, saya mengunduhnya sekarang dan menunjukkan kepada pengguna

(Protokol HTTP sebenarnya mungkin memiliki sedikit perbedaan. )

Rahasia Jelek Caching. Itu Menjadi Basi

Caching tampaknya menyenangkan dan mudah. Browser menyimpan salinan file (seperti gambar logo) dan menggunakan salinan yang disimpan dalam cache (disimpan) ini di setiap halaman yang memerlukan logo. Ini menghindari keharusan mengunduh gambar lagi dan sempurna, bukan?

Salah. Apa yang terjadi ketika logo perusahaan berubah? . com menjadi Nil. com?

Kami punya masalah. Logo baru yang mengkilap harus sesuai dengan situs baru yang mengkilap, tembolok terkutuk

Jadi meskipun browser memiliki logo, tidak tahu apakah gambar tersebut dapat digunakan. Lagi pula, file mungkin telah berubah di server dan mungkin ada versi yang diperbarui

Jadi mengapa repot-repot melakukan caching jika kita tidak yakin apakah file tersebut bagus?

Metode Caching 1. Terakhir diubah

Salah satu perbaikannya adalah agar server memberi tahu browser versi file apa yang dikirimnya. Server dapat mengembalikan tanggal Last-modified bersama dengan file (sebut saja logo. png), seperti ini

Last-modified: Fri, 16 Mar 2007 04:00:25 GMT
File Contents (could be an image, HTML, CSS, Javascript...)`

Sekarang browser mengetahui bahwa file yang didapatnya (logo. png) dibuat pada 16 Maret 2007. Lain kali browser membutuhkan logo. png, dapat melakukan pemeriksaan khusus dengan server

1. Peramban. Hei, beri aku logo. png, tetapi hanya jika telah dimodifikasi sejak 16 Maret 2007
2. Server. (Memeriksa tanggal modifikasi)
3. Server. Hei, kamu beruntung. Itu tidak diubah sejak tanggal itu. Anda memiliki versi terbaru
4. Peramban. Besar. Saya akan menunjukkan kepada pengguna versi yang di-cache

Mengirim pesan pendek "Tidak Dimodifikasi" jauh lebih cepat daripada harus mengunduh file lagi, terutama untuk file javascript atau gambar raksasa. Caching menghemat hari (err… bandwidth)

Metode Caching 2. ETag

Membandingkan versi dengan waktu modifikasi umumnya berhasil, tetapi bisa menimbulkan masalah. Bagaimana jika jam server awalnya salah dan kemudian diperbaiki?

ETag untuk menyelamatkan. ETag adalah pengidentifikasi unik yang diberikan ke setiap file. Ini seperti hash atau sidik jari. setiap file mendapatkan sidik jari unik, dan jika Anda mengubah file (bahkan satu byte), sidik jarinya juga berubah

Alih-alih mengirimkan kembali waktu modifikasi, server dapat mengirim kembali ETag (sidik jari)

ETag: ead145f
File Contents (could be an image, HTML, CSS, Javascript...)

ETag dapat berupa string apa pun yang mengidentifikasi file secara unik. Lain kali browser membutuhkan logo. png, dapat memiliki percakapan seperti ini

1. Peramban. Bisakah saya mendapatkan logo. png, jika tidak ada yang cocok dengan tag "ead145f"?
2. Server. (Memeriksa sidik jari pada logo. png)
3. Server. Anda beruntung. Versi di sini adalah "ead145f". Itu tidak dimodifikasi
4. Peramban. Skor. Saya akan menunjukkan kepada pengguna versi cache saya

Sama seperti modifikasi terakhir, ETag memecahkan masalah membandingkan versi file, kecuali bahwa "jika-tidak ada yang cocok" sedikit lebih sulit untuk dikerjakan menjadi kalimat daripada "jika-dimodifikasi-sejak". Tapi itu masalahku, bukan masalahmu. ETag berfungsi dengan baik

Metode Caching3. Berakhir

Caching file dan memeriksa dengan server bagus, kecuali untuk satu hal. kami masih memeriksa dengan server. Ini seperti menganalisis susu Anda setiap kali Anda membuat sereal untuk melihat apakah aman untuk diminum. Tentu, ini lebih baik daripada membeli satu galon baru setiap kali, tapi itu tidak terlalu bagus

Dan bagaimana kita menangani situasi susu ini?

Jika kita tahu kapan susu (logo. png) kedaluwarsa, kami tetap menggunakannya hingga tanggal tersebut (dan mungkin beberapa hari lagi, jika Anda seorang mahasiswa). Setelah kedaluwarsa, kami menghubungi server untuk mendapatkan salinan baru, dengan tanggal kedaluwarsa yang baru. Headernya terlihat seperti ini

Expires: Tue, 20 Mar 2007 04:00:25 GMT
File Contents (could be an image, HTML, CSS, Javascript...)

Sementara itu, kami bahkan menghindari berbicara dengan server jika kami berada dalam periode kedaluwarsa

Tidak ada percakapan di sini;

1. Peramban. Self apakah sebelum expired date 20 Maret 2007?
2. Peramban. Sungguh, saya akan menunjukkan kepada pengguna versi yang di-cache

Dan begitulah. Server web tidak perlu melakukan apa pun. Pengguna melihat file secara instan

Metode Caching 4. Usia Maks

Oh, kita belum selesai. Kedaluwarsa memang bagus, tetapi harus dihitung untuk setiap tanggal. Header max-age memungkinkan kita mengatakan "File ini kedaluwarsa 1 minggu dari hari ini", yang lebih sederhana daripada menetapkan tanggal eksplisit

Max-Age diukur dalam hitungan detik. Berikut beberapa konversi detik cepat

• 1 hari dalam detik = 86400
• 1 minggu dalam hitungan detik = 604800
• 1 bulan dalam hitungan detik = 2629000
• 1 tahun dalam hitungan detik = 31536000 (efektif tak terbatas pada waktu internet)

Tajuk Bonus. Publik dan Swasta

Header cache tidak pernah berhenti. Terkadang server perlu mengontrol kapan sumber daya tertentu di-cache

• Cache-control: public_ berarti versi cache dapat disimpan oleh proxy dan server perantara lainnya, di mana semua orang dapat melihatnya
• Cache-control: private_ berarti file berbeda untuk pengguna yang berbeda (seperti beranda pribadi mereka). Peramban pribadi pengguna dapat menyimpannya, tetapi bukan proxy publik

• ETag: ead145f
  File Contents (could be an image, HTML, CSS, Javascript...)
  

  _0 berarti file tidak boleh di-cache. Ini berguna untuk hal-hal seperti hasil penelusuran yang URL-nya tampak sama tetapi kontennya dapat berubah

Namun, berhati-hatilah karena beberapa arahan cache hanya berfungsi pada HTTP 1 yang lebih baru. 1 browser. Jika Anda melakukan caching khusus pada halaman yang diautentikasi, baca lebih lanjut tentang caching

Oke, Saya Terjual. Aktifkan Caching

Pertama, pastikan Apache telah mengaktifkan mod_headers dan mod_expires

.. list your current modules...
apachectl -t -D DUMP_MODULES

.. enable headers and expires if not in the list above...
a2enmod headers
a2enmod expires

Format umum untuk mengatur header adalah

• Jenis file yang cocok
• Header / Kedaluwarsa untuk diatur

Tip umum. semakin sedikit perubahan sumber daya (gambar, pdf, dll. ) semakin lama Anda harus menyimpannya. Jika tidak pernah berubah (setiap versi memiliki URL yang berbeda) maka simpan dalam cache selama mungkin (mis. e. tahun)

Satu teknik. Memiliki file loader (index. html) yang tidak di-cache, tetapi mengetahui lokasi item yang di-cache secara permanen. Pengguna akan selalu mendapatkan file loader, tetapi mungkin telah meng-cache sumber daya yang ditunjuknya

Pengaturan konfigurasi berikut didasarkan pada yang ada di AskApache

Kalkulator Detik

Semua waktu diberikan dalam hitungan detik (A0 = Akses + 0 detik)

Menggunakan Expires Header

ExpiresActive On
ExpiresDefault A0

# 1 YEAR - doesn't change often

ExpiresDefault A31536000


# 1 WEEK - possible to be changed, unlikely

ExpiresDefault A604800


# 3 HOUR - core content, changes quickly

ExpiresDefault A10800

Sekali lagi, jika Anda tahu konten tertentu (seperti javascript) tidak akan sering berubah, biarkan file "js" kedaluwarsa setelah seminggu

Menggunakan header usia maksimal

# 1 YEAR

Header set Cache-Control "max-age=31536000, public"


# 1 WEEK

Header set Cache-Control "max-age=604800, public"


# 3 HOUR

Header set Cache-Control "max-age=10800"


# NEVER CACHE - notice the extra directives

Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Langkah terakhir. Periksa Caching Anda

Untuk melihat apakah file Anda di-cache, lakukan hal berikut

• On line. Periksa situs Anda di Redbot (Anda akan melihat header dikembalikan, dan ringkasan cache di samping)
• Di Firefox. Gunakan FireBug atau Live HTTP Header untuk melihat respons HTTP (304 Tidak Dimodifikasi, Kontrol-Cache, dll. ). Secara khusus, saya akan memuat halaman dan menggunakan Header HTTP Langsung untuk memastikan tidak ada paket yang dikirim untuk memuat gambar, logo, dan file cache lainnya. Jika Anda menekan ctrl+refresh, browser akan memaksa memuat ulang semua file
• Di Chrome. Buka Alat Pengembang > tab Jaringan. Di kolom ukuran, Anda akan melihat "cache memori" atau "cache disk", bukan ukuran unduhan. (Pastikan "nonaktifkan cache" tidak diaktifkan. )
  

Baca lebih lanjut tentang caching, atau kolom header HTTP. Caching tidak membantu dengan unduhan awal (untuk itulah gzip), tetapi itu membuat kunjungan situs di masa mendatang lebih cepat

Ingat. Membuat URL unik adalah cara termudah untuk menyimpan cache. Bersenang-senang merampingkan situs Anda

Dapatkah saya meng-cache HTML?

Haruskah Anda melakukan cache halaman HTML?

Bagaimana cara menambahkan cache

Bagaimana cara men-cache halaman web?