Кеш на підсилювачем BBC

Sep 12, 2025
Як
A cached image of the BBC homepage featuring a selection of news headlines

Минулого року під час сеансу тестування користувачів для програми BBC News App, один з користувачів зробив коментар, який дійсно застряг зі мною. Вони заявили: "Мені подобається текти". Я не думаю, що є кращий резюме того, яка продуктивність означає для наших користувачів. На швидкому додатку або веб-сайті користувач може протікати, взаємодіяти та взаємодіяти з вмістом.

Теперішній досвід хороший для власників сайтів. Швидкий досвід, який допомагає користувачам досягти своїх цілей, і в свою чергу, ми досягаємо цілей наших організацій. Amazon та інші продемонстрували сильну зв'язок між продуктивністю та діяльністю користувачів: як очікування сторінок знижується, кількість часу та грошей, який витрачає користувач, виникає.

Читати далі: Nordvpn Review

Вирізати відстань за допомогою кешу

Кеші створюються, коли невелика кількість чогось зберігається ближче до того, де це необхідно, нормально запобігання переробці. Наприклад, якщо я їжу кеглі, я, як правило, наливаю кілька в руку, а потім їсть звідти. По суті, я створюю кеш кегтів у моїй руці, як це швидше з'їсти їх таким чином, ніж повертатися до пакета.

Цей самий шаблон використовується в технології. Є три кеші, які ми повинні розглянути:

  • Серверні кеші: кешовані дані на сервері, такі як результати запитів баз даних
  • Мережеві кеші: кешування, вбудовані в мережу, іноді оператором сайту (відомий як зворотний проксі-кеш), але частіше за допомогою ISPS або інших постачальників мережі
  • Кеш браузера: браузер зберігає файли на жорсткому диску користувача для повторного використання користувачем

Кешування може зробити для величезного підвищення продуктивності; У BBC я побачив кешування підвищення продуктивності більше 20 разів у виробничому коді. Це корисно для операторів сайту. З кешуванням, більше користувачів можуть бути підтримані тим же апаратним забезпеченням. Це зменшує вартість апаратного забезпечення для кожного користувача, і, отже, зменшує витрати на експлуатацію веб-сайтів.

Дизайн з кеш-пам'яттю

Для того, щоб бути ефективним, ми хочемо максимально використовувати кешовані дані. Щоб розширити аналогію кеглі, якщо я хочу синій Skittle, але у мене немає синіх кегтів у моїй руці (aka мій кеш), мені доведеться повернутися до пакета. Це відоме як "швидкість удару". Це "хіт", коли елемент знаходиться в кеші та "пропустити", коли це не так. Ми хочемо високої швидкості удару, тому кеш займає більшу частину навантаження.

Одним з найпростіших методів збільшення швидкості хіти є зменшення варіації. Розтягування моїх кеглі аналогії трохи, уявіть, якщо всі кеглі були червоними. Таким чином, будь-який Skittle в моїй руці буде кеш-хіт; Я б ніколи не потрібно повертатися до пакета. Застосовуючи це до Інтернету, якщо ми зможемо надати ту саму сторінку якнайбільше користувачів, кеш стає більш ефективним, оскільки більше запитів потрапить в кеш.

Cache HTML протягом короткого часу

A 30-second cache of the BBC News homepage displaying regularly updated content

Домашня сторінка новин використовує 30-секундний заголовок кеш-пам'яті Max-Age, щоб швидко вміст перед користувачів швидко без навантаження

Отже, це теорія. Давайте зрозуміємо. Почнемо, дивлячись на кешування запиту на HTML. Кешування всіх типів файлів контролюється за допомогою HTTP заголовків. Заголовки - це мета дані (дані про дані), відправлені з сервера до браузера та видимими для всіх мережевих апаратних засобів. Щоб розповісти світові, він має дозвіл на кеш-пам'ять наших сторінок та поділитися цією кеш-пам'яті між користувачами, ми встановлюємо наступний заголовок:

Cache-Control: public, max-age=30

Тут ми також встановили ліміт часу: максимальний час, коли кеш повинен повторно використовувати цю сторінку за секунди. Для цього прикладу я встановив його до 30 секунд.

Встановлюючи сторінку "public", браузер користувача (і будь-яке апаратне забезпечення на цьому шляху) збереже копію. Отже, перша завантаження сторінки зробить запит, але всі завантаження сторінок після того, як буде повторно використовувати оригінальну відповідь, до досягнення часу.

Ефект мережевого апаратного забезпечення на шляху може бути глибоким. Багато великих мереж (таких як ISPS) матимуть кеш-пам'ять між користувачами. Оператори мобільного зв'язку також використовують цю техніку, наприклад, для кешу та відновлення зображень, поданих понад 3G. Оператори сайту також можуть розмістити HTTP-кеш перед їх послугою. Це те, що ми зробили в BBC.

Кеш-статичні активи для віків

A longer-term cache of BBC iPlayer displaying content that is updated only periodically

BBC IPlayer зберігає статичні активи на рік - зміни до URL-адреси, що забезпечує негайно, бачать нові версії

Техніка, яку ми використовуємо багато в BBC, полягає в тому, щоб лікувати статичні активи (наприклад, зображення, CSS та скрипти) по-різному, як ми розглядаємо сторінки. Кешування HTML-сторінок занадто довго може призвести до того, що користувачі відсутні оновлення вмісту, але ми можемо скористатися цією поведінкою, коли мова йде про статичні активи.

У BBC ми надсилаємо всі статичні активи з максимальним віком 31,536 000 секунд, встановлених у заголовку кешу. Це гарантує, що активи кешовані протягом 365 днів. По суті, активи вимагаються лише один раз. Це добре для виконання, але погано для гнучкості, як зміни до цього активу займе багато часу, щоб дістатися до користувача.

Для того, щоб працювати навколо цього, кожен раз, коли ми випускаємо нову версію сторінки, ми змінюємо URL-адресу, де зберігаються активи. Цей трюк означає, що нові зміни ставлять перед користувачів негайно, але ми все ще отримуємо ті самі вигоди.

Заключні слова

Кешування з метою покращення ефективності веб-сайту, у свою чергу, перевищить нижчі операційні витрати на наші веб-сайти та зберегти потік наших користувачів, що веде до великого досвіду користувачів.

Ця стаття була опублікована у випуску 279 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників. Купувати Випуск 279 або Підписатися на мережу .

Хочете вивчити інші способи, щоб дати свої сайти швидкість?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018

Джейсон Ленгсторф дає своїй майстерні сучасними фронтально-кінцевими стратегіями та методами у створенні Нью-Йорка з 25 27 квітня 2018 року

Jason LengStorf - розробник, дизайнер, автор та дружній ведмідь. Його увага приділяється ефективності та ефективності людей, команд та програмного забезпечення. На IBM він створює процеси та системи, щоб зробити правильну річ легку річ ™. У будь-який час він блукає землю в пошуках нових і кращих закусок.

У своїй майстерні сучасні фронтальні стратегії продуктивності та техніки Створіть Нью-Йорк з 25-27 квітня 2018 року , Джейсон покаже учасникам, як поліпшити сприйнятий час завантаження - як довго це відчуває, що потрібно, щоб завантажити сторінку - а також фактичні терміни завантаження, використовуючи лише фронтальні методи, включаючи:

  • Шаблон завантаження скелета
  • Краще завантаження для статичних активів
  • Ледачий навантаження
  • Сервісні працівники
  • Краще будувати процеси і багато іншого!

Створити Нью-Йорк відбувається з 25-27 квітня 2018 року. Отримайте квиток зараз .

Пов'язані статті:

  • 4 поради для покращення ефективності вашої сторінки
  • 7 Поради щодо експертів для забивання веб-виконавців
  • 3 Прості способи прискорити свій веб-сайт

Як - Найпопулярніші статті

Як перетворити WordPress у візуальний будівельник

Як Sep 12, 2025

(Зображення кредиту: Elementor / Joseph Ford) Візуальні будівельники існув..


Як кодувати Smart Text ефекти з CSS

Як Sep 12, 2025

[Зображення: середня дитина] Полки перекидання - це чудовий спос�..


Використовуйте негативний простір, щоб зробити кращі руки

Як Sep 12, 2025

Навіть, здавалося б, складний процес, як малюнок, може бути спрощена, з �..


17 способів малювати кращі істоти

Як Sep 12, 2025

Коли ви малюєте істот, це важливо, щоб вони вважають. Незалежно від тог�..


6 способів прискорити моделювання

Як Sep 12, 2025

Більш ефективний робочий процес є очевидною перевагою вдосконалення �..


Побудуйте місце електронної комерції з нуля

Як Sep 12, 2025

Електронна комерція стала настільки популярною в останні роки, тепер �..


Як малювати атмосферний портрет у Photoshop

Як Sep 12, 2025

Картина Портрет може бути складним завданням. Навіть якщо ви освоїте ..


Як створити 3D-волосся та хутро

Як Sep 12, 2025

Ви можете легко перевантажити перший раз, коли ви працюєте з хутром ..


Категорії