Кэш в разделе «Усилитель производительности BBC»

Sep 15, 2025

Инструкции

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

В прошлом году во время сеанса тестирования пользователей для новостного приложения BBC один из пользователей сделал комментарий, который действительно застрял со мной. Они заявили: «Мне нравится течь». Я не думаю, что есть лучший резюме того, какая производительность означает наших пользователей. На быстром приложении или веб-сайте пользователь может течь, взаимодействовать и взаимодействовать с контентом.

Текущий опыт хороши для владельцев сайта тоже. Быстропротекающий опыт помогает пользователям достичь своих целей и, в свою очередь, мы достигаем целей наших организаций. Amazon и другие продемонстрировали прочную связь между эффективностью и активностью пользователя: поскольку ожидание страниц снизится, количество времени и денег, которые указывают на пользователя.

Подробнее: Nordvpn Review

Разрежьте расстояние с кэшем

Кэши создаются, когда небольшое количество чего-то хранится ближе к тому, где он необходим, обычно предотвращают переделку. Например, если я еду кегли, я склонен вносить несколько в руку, а затем есть оттуда. По сути, я создаю кеш кегли в моей руке, так как быстрее съесть их таким образом, чтобы возвращаться к пакету.

Этот же рисунок используется в технологии. Есть три кэши, которые мы должны рассмотреть:

Кэширует серверы: кэшированные данные на сервере, такие как результаты запросов базы данных
Сеть кеши: кеши, встроенные в сеть, иногда оператором сайта (известный как кэш обратного прокси), но чаще всего с помощью провайдеров или других сетевых поставщиков
Кэш браузера: браузер хранит файлы на жестком диске пользователя для повторного использования пользователем

Кэширование может сделать огромное улучшение производительности; На BBC я видел кэширование повышения производительности более чем в 20 раз в производственном коде. Это полезно для операторов сайта тоже. С кэшированием больше пользователей можно поддерживать одним и тем же оборудованием. Это уменьшает стоимость в оборудовании на каждого пользователя и, следовательно, сокращает операционные расходы на сайт.

Дизайн с кэшем в виду

Для этого будет эффективным, мы хотим максимально использовать кэшированные данные. Чтобы продлить аналогию сальток, если я хочу синий кучок, но у меня нет голубых кедов в моей руке (ака мой кеш), мне придется вернуться к пакету. Это известно как «скорость попадания». Это «удар», когда товар находится в кэше и «мисс», когда это не так. Мы хотим высокий уровень попадания, поэтому кэш принимает большую часть нагрузки.

Одним из самых простых методов повышения скорости попадания является снижение вариации. Немного протягивания моих кеглей аналогии, представьте, если бы все кегли были красными. Таким образом, любой куча в моей руке был бы хитом кеша; Мне никогда не понадобится вернуться к пакету. Применяя это в Интернет, если мы сможем дать той же странице как можно больше пользователей, кэш становится более эффективным, поскольку больше запросов будут ударены в кеш.

Кэш 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», браузер пользователя (и любое оборудование по пути) будет держать копию. Таким образом, нагрузка первой страницы сделает запрос, но все загрузки страницы после этого повторно используют исходный ответ, пока не будет достигнут срок.

Эффект сетевого оборудования по пути может быть глубоком. Многие большие сети (такие как ISP) будут иметь кэш, общий между пользователями. Операторы мобильной связи также используют эту технику в значительной степени - например, кэше и рекорпрессионные изображения подаются более 3G. Операторы сайта также могут разместить HTTP Cache перед их обслуживанием. Это то, что мы сделали в 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. или же Подписаться на Net. Отказ

Хотите узнать другие способы дать свои сайты скорости повышения?

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 года

Джейсон Ленгсторф - это разработчик, дизайнер, автор и дружелюбный медведь. Его внимание уделяется эффективности и производительности людей, команд и программного обеспечения. В IBM он создает процессы и системы, чтобы сделать правильную вещь, которую легко ™. В любое время он бродит землю в поисках новых и лучших закусок.

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

Скелет загрузки
Лучшая загрузка для статических активов
Ленивая загрузка
Сервисники
Лучше создание процессов и многое другое!

Generate New York проходит с 25-27 апреля 2018 года. Получить свой билет сейчас Отказ

Статьи по Теме:

4 совета по улучшению производительности вашей страницы
7 экспертных советов для гвоздей
3 простых способа ускорить ваш сайт

Кэш в разделе «Усилитель производительности BBC»

Разрежьте расстояние с кэшем

Дизайн с кэшем в виду

Кэш HTML на короткое время

Кэширование статических активов для возрастов

Окончательные слова

Хотите узнать другие способы дать свои сайты скорости повышения?

Инструкции - Самые популярные статьи

Lino Printmaking: введение

10 способов построить лучшую среду World World

Как моделировать концепцию искусства в кино 4D

Как построить приложение AR

Включить 2D иллюстрации в 3D Art

Создайте вилетное текстовое действие с помощью JavaScript

Создайте приложение, которое собирает данные датчика

Создайте эффект всплеска в RealFlow

Категории