Akhir-akhir ini saya melakukan tendangan mengutak-atik web. cara mempercepat javascript, file gzip dengan server Anda, dan mengetahui cara mengatur 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
- Peramban. yo. Anda mendapat indeks. html?
- Server. (Mencarinya…)
- Memutuskan. Benar-benar, bung. Ada di sini
- 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
- Peramban. Hei, beri aku logo. png, tetapi hanya jika telah dimodifikasi sejak 16 Maret 2007
- Server. (Memeriksa tanggal modifikasi)
- Server. Hei, kamu beruntung. Itu tidak diubah sejak tanggal itu. Anda memiliki versi terbaru
- 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
- Peramban. Bisakah saya mendapatkan logo. png, jika tidak ada yang cocok dengan tag "ead145f"?
- Server. (Memeriksa sidik jari pada logo. png)
- Server. Anda beruntung. Versi di sini adalah "ead145f". Itu tidak dimodifikasi
- 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;
- Peramban. Self apakah sebelum expired date 20 Maret 2007?
- 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 <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> ExpiresDefault A31536000 </FilesMatch> # 1 WEEK - possible to be changed, unlikely <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> ExpiresDefault A604800 </FilesMatch> # 3 HOUR - core content, changes quickly <FilesMatch "\.(txt|xml|js|css)$"> ExpiresDefault A10800 </FilesMatch>Sekali lagi, jika Anda tahu konten tertentu (seperti javascript) tidak akan sering berubah, buat file "js" kedaluwarsa setelah seminggu
Menggunakan header usia maksimal
# 1 YEAR <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> Header set Cache-Control "max-age=31536000, public" </FilesMatch> # 1 WEEK <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> # 3 HOUR <FilesMatch "\.(txt|xml|js|css)$"> Header set Cache-Control "max-age=10800" </FilesMatch> # NEVER CACHE - notice the extra directives <FilesMatch "\.(html|htm|php|cgi|pl)$"> Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate" </FilesMatch> _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