cache di booster kinerja BBC

Sep 12, 2025

Bagaimana caranya

A cached image of the BBC homepage featuring a selection of news headlines

Tahun lalu selama sesi pengujian pengguna untuk aplikasi BBC News, salah satu pengguna membuat komentar yang benar-benar terjebak dengan saya. Mereka menyatakan: "Saya suka mengalir". Saya tidak berpikir ada ringkasan yang lebih baik dari sarana kinerja bagi pengguna kami. Pada aplikasi atau situs web yang cepat, pengguna dapat mengalir, berinteraksi, dan terlibat dengan konten.

Pengalaman yang mengalir juga bagus untuk pemilik situs. Pengalaman yang mengalir cepat membantu pengguna mencapai tujuan mereka dan pada gilirannya kami mencapai tujuan organisasi kami. Amazon dan lainnya telah menunjukkan hubungan kuat antara kinerja dan aktivitas pengguna: karena menunggu halaman turun, jumlah waktu dan uang yang dihabiskan pengguna naik.

Baca selengkapnya: Ulasan NordVPN

Potong jarak dengan cache

Cache dibuat ketika sejumlah kecil sesuatu disimpan lebih dekat ke tempat yang dibutuhkan, biasanya untuk mencegah pengerjaan ulang. Misalnya, jika saya makan skittles, saya cenderung menuangkan sedikit ke tangan saya dan kemudian makan dari sana. Akibatnya, saya menciptakan cache skittles di tangan saya karena lebih cepat untuk memakannya dengan cara itu daripada kembali ke paket.

Pola yang sama ini digunakan dalam teknologi. Ada tiga cache yang harus kita pertimbangkan:

Cache Server: Data Cached di server, seperti hasil kueri basis data
Cache Jaringan: Caches yang dibangun ke dalam jaringan, kadang-kadang oleh operator situs (dikenal sebagai cache proxy terbalik), tetapi lebih sering oleh ISP atau penyedia jejaring lainnya
Cache Browser: Browser menyimpan file pada hard drive pengguna untuk digunakan kembali oleh pengguna

Caching dapat membuat peningkatan kinerja yang sangat besar; Di BBC saya telah melihat caching meningkatkan kinerja lebih dari 20 kali dalam kode produksi. Ini bermanfaat bagi operator situs juga. Dengan caching, lebih banyak pengguna dapat didukung oleh perangkat keras yang sama. Ini mengurangi biaya dalam perangkat keras per pengguna dan karenanya mengurangi biaya operasi situs web.

Desain dengan cache dalam pikiran

Agar efektif, kami ingin menggunakan data yang di-cache sebanyak mungkin. Untuk memperpanjang analogi skittles, jika saya ingin skitel biru tetapi saya tidak memiliki skittle biru di tangan saya (alias cache saya), saya harus kembali ke paket. Ini dikenal sebagai 'Hit Rate'. Ini 'hit' ketika item dalam cache dan 'miss' ketika tidak. Kami ingin tarif hit tinggi sehingga cache mengambil sebagian besar beban.

Salah satu metode paling sederhana untuk meningkatkan tarif hit adalah mengurangi variasi. Peregangan analogi skittles saya sedikit, bayangkan jika semua skittles berwarna merah. Dengan begitu, setiap skitit di tanganku akan menjadi hit cache; Saya tidak perlu kembali ke paket. Menerapkan ini ke Web, jika kita dapat memberikan halaman yang sama ke sebanyak mungkin pengguna, cache menjadi lebih efektif karena lebih banyak permintaan akan mengenai cache.

Cache HTML untuk waktu yang singkat

A 30-second cache of the BBC News homepage displaying regularly updated content — Homepage Berita menggunakan header cache usia max 30 detik untuk mendapatkan konten di depan pengguna dengan cepat tanpa terlalu banyak beban

Jadi itulah teorinya. Mari kita praktis. Mari kita mulai dengan melihat caching permintaan untuk HTML. Caching dari semua jenis file dikontrol menggunakan header HTTP. Header adalah meta data (data tentang data) yang dikirim dari server ke browser dan terlihat oleh semua perangkat keras jaringan di antaranya. Untuk memberi tahu dunia ini memiliki izin untuk men-cache halaman kami dan untuk berbagi cache di antara pengguna, kami mengatur header berikut:

Cache-Control: public, max-age=30

Di sini, kami juga telah menetapkan batas waktu: jumlah waktu maksimum cache harus menggunakan kembali halaman ini, dalam hitungan detik. Untuk contoh ini, saya telah mengaturnya hingga 30 detik.

Dengan mengatur halaman ke 'publik', browser pengguna (dan setiap perangkat keras di sepanjang jalan) akan menyimpan salinan. Jadi beban halaman pertama akan membuat permintaan, tetapi semua halaman memuat setelah itu akan menggunakan kembali respons aslinya, hingga batas waktu tercapai.

Efek perangkat keras jaringan di sepanjang jalan bisa mendalam. Banyak jaringan besar (seperti ISP) akan memiliki cache yang dibagikan antara pengguna. Operator seluler juga menggunakan teknik ini dengan berat - misalnya, untuk cache dan merekomendasikan gambar yang disajikan lebih dari 3G. Operator situs juga dapat menempatkan cache HTTP di depan layanan mereka. Inilah yang telah kami lakukan di BBC.

Aset statis cache untuk usia

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC iPlayer menyimpan aset statis selama satu tahun - perubahan pada URL memastikan pengguna melihat versi baru segera

Teknik yang kami gunakan banyak di BBC adalah untuk mengobati aset statis (seperti gambar, CSS dan skrip) berbeda dengan cara kami memperlakukan halaman. Caching HTML halaman terlalu lama dapat menyebabkan pengguna kehilangan pembaruan konten tetapi kami dapat memanfaatkan perilaku ini dalam hal aset statis.

Di BBC kami mengirim semua aset statis dengan usia maksimum 31.536.000 detik diatur dalam header cache. Ini memastikan aset di-cache selama 365 hari. Akibatnya, aset hanya diminta sekali. Ini bagus untuk kinerja tetapi buruk untuk fleksibilitas sebagai perubahan pada aset itu akan memakan waktu lama untuk sampai ke pengguna.

Untuk mengatasi ini, setiap kali kami merilis versi baru dari satu halaman, kami mengubah URL di mana aset disimpan. Trik ini berarti bahwa perubahan baru dimasukkan ke depan pengguna segera tetapi kami masih mendapatkan manfaat kinerja yang sama.

Kata-kata terakhir.

Caching Untuk meningkatkan kinerja situs web akan mengubah biaya operasi lebih rendah untuk situs web kami dan melestarikan aliran pengguna kami, yang mengarah ke pengalaman pengguna yang hebat.

Artikel ini awalnya diterbitkan dalam penerbitan 279 dari Net, majalah terlaris di dunia untuk desainer dan pengembang web. Membeli masalah 279. atau Berlangganan ke NET. .

Ingin belajar cara lain untuk memberikan boost kecepatan situs Anda?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf memberikan lokakarya strategi dan teknik kinerja front-end modern pada Hasilkan New York dari 25 27 April 2018

Jason Lengstorf adalah pengembang, desainer, penulis dan beruang yang ramah. Fokusnya adalah pada efisiensi dan kinerja orang, tim, dan perangkat lunak. Di IBM, ia menciptakan proses dan sistem untuk membuat hal yang benar, hal yang mudah ™. Di semua waktu lain, ia mengembara bumi untuk mencari makanan ringan yang baru dan lebih baik.

Dalam lokakarya strategi dan teknik kinerja front-end modern di Hasilkan New York dari 25-27 April 2018 , Jason akan menunjukkan kepada peserta bagaimana meningkatkan waktu beban yang dirasakan - berapa lama rasanya memuat halaman - serta waktu muat aktual, hanya menggunakan teknik front-end termasuk:

Pola pemuatan kerangka
Pemuatan yang lebih baik untuk aset statis
Lazy Loading.
Pekerja layanan
Proses pembangunan yang lebih baik dan banyak lagi!

Hasilkan New York berlangsung dari 25-27 April 2018. Dapatkan tiket Anda sekarang .

Artikel terkait:

4 Tips Untuk Meningkatkan Kinerja Halaman Anda
7 tips ahli untuk memaku kinerja web
3 cara sederhana untuk mempercepat situs web Anda

cache di booster kinerja BBC

Potong jarak dengan cache

Desain dengan cache dalam pikiran

Cache HTML untuk waktu yang singkat

Aset statis cache untuk usia

Kata-kata terakhir.

Ingin belajar cara lain untuk memberikan boost kecepatan situs Anda?

Bagaimana caranya - Artikel Terpopuler

Buat efek teks uap animasi

mulai dengan karat

Desain avatar yang dapat dimainkan untuk permainan video

Cara membuat monster gaya labirin Pan

Cara pindah antara DAZ Studio dan Cinema 4D

Cara membuat langit fotorealistik

5 cara untuk mengelola arus kas secara efektif

Cara menggunakan fotografi saham secara kreatif dalam pekerjaan desain Anda

Kategori