Главная/ Инсайты: аналитика, мнения и тренды веб-разработки/ Как улучшить кэширование в браузере?

Как улучшить кэширование в браузере?

Как улучшить кэширование в браузере? Дата публикации: 11.11.2010...

Дата публикации: 11.11.2010

Стив Саудерс (Steve Souders), один из ведущих специалистов в вопросах производительности, всерьез решил разобраться с недостатками кэша в браузере и скоростью загрузки веб-страниц. Стив работает в Google, является автором книг-бестcеллеров и именно его называли Yahoo! Superstar. Ниже текст идет от его имени.

В 2007 году я с Тенни Тойрером (Tenni Theurer) проводил эксперимент с целью сбора статических данных на стороне сервера по использованию кэша браузерами.

Кстати, для справки: SEO-фильтр в Битриксе помогает автоматически генерировать уникальные мета-теги и URL для страниц каталога. Как настроить SEO фильтра битрикс — узнайте, что потребуется сделать для улучшения индексации и позиций сайта в поисковых системах.

По результатам эксперимента Тони написал статью, где подробно расписал все полученные результаты и пояснил, что кэш браузера используется сегодня весьма поверхностно. Оказывается, что несмотря на то, что 80% просмотров были сделаны с включенной функцией кэширования, около 40-60% уникальных пользователей по крайней мере один раз в день посещают сайт с пустым кэшем. 40-60% процентов на первый взгляд кажется завышенной цифрой, но я слышал такие же данные от разработчиков других уважаемых и серьезных проектов.

Почему у многих пользователей по крайней мере одни раз в день пустой кэш?

Я думал и ломал голову над этим вопросом в течении многих лет. Вот некоторые мои предположения:

  • новые посетители — да, но их же не 40-60%;
  • очищенный кэш — это правда, все больше людей использует антивирусное программное обеспечение, которое очищает кэш браузера между сессиями. Эксперимент проводился в далеком 2007 году. Сейчас же многие современные браузеры переняли эту функцию у антивирусов (например, privacy.clearOnShutdown.cache опция в Firefox). Но опять же, это не 40-60% процентов пользователей.
  • недостатки нашего эксперимента — да, оказывается, была ошибка в эксперименте (браузеры игнорируют кэширование заголовков, когда изображение в памяти), но это скорее повлияет на на те 80%, где кэш включен, а не на 40-60% посетителей с пустым кэшем. И я думаю, что это влияние будет достаточно мало, что им можно пренебречь (похожие цифры мне называли разработчики по другим ресурсам). В следующий раз эксперимент, конечно, будет усовершенствован.
  • ресурсы были вытеснены — хммм..

Хорошо давайте на минуту задумаемся о вытеснении. Два основных фактора, которые могут способствовать вытеснению ресурса это:

  • размер кэша;
  • алгоритм замещения.

Оказывается, объем дискового пространства, выделяемого для кэша не соответствует размерам дисков пользователей и объемам пользования Интернетом. Вот значения по умолчанию дискового пространства, используемого для кэширования в разных браузерах:

  • Internet Explorer: 8-50 Мбайт
  • Firefox: 50 Мбайт
  • Safari: все, что я нашел, так это то, что максимальный размер не устанавливается
  • Chrome: <80 Мбайт (изменяется в зависимости от доступного дискового пространства)
  • Opera: 20 Мбайт

Эти значения по умолчанию слишком малы. У меня жесткий диск на 150 Гбайт, из которых 120 Гбайт свободны. Я бы спокойно мог выделить 5 Гбайт или больше, если это мне обеспечит более быструю загрузку веб-страниц.

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

Однако, наши знания о ключевых параметрах производительности значительно выросли за последние несколько лет. И имеет смысл использовать эти знания для улучшения алгоритма вытеснения. Например, мы все знаем насколько «тяжелее» загрузка скрипта сравнительно с загрузкой изображения (скрипт блокирует другие загрузки и рендеринг). Поэтому скриптам нужно присвоить первостепенное значение, когда речь заходит о кэшировании.

Достаточно трудно собрать статистику по использованию дискового пространства при кэшировании. И поэтому я прошу покопаться в своих настройках браузера и поделиться ими в анкете spreadsheets.google.com/viewform?formkey=dGlFb2FUb0NfeUFfRklLeTZmanZCb1E6MQ — Browser Disk Cache Survey form. Я включил этот пункт в свои выступления на JSConf и jQueryConf. И примерно 150 человек на тех конференциях заполнили форму. Данные показывают, что примерно у 55% из них кэш заполнен более чем на 90% (сразу оговорюсь, что речь идет о небольшой выборке и люди сами сообщают данные). Было бы замечательно, если бы вы нашли время и заполнили форму. Я так же написал инструкцию — stevesouders.com/cache.php, чтобы вам было легче найти свои настройки кэширования.

Я настроен оптимистично и вижу, что потенциально можно значительно повысить скорость загрузки веб-страниц, благодаря улучшению процесса кэширования в браузере. И, к счастью, разработчики браузеров так же начинают активно способствовать этому (для примера, прошедший в этом году ajaxian.com/archives/mozilla-web-caching-summit — Mozilla Caching Summit). Я надеюсь, что мы придем к улучшениям в настройках по умолчанию для кэша и в алгоритме вытеснения в следующих финальных версиях всех браузеров. А пока измените просто свои настройки по умолчанию в браузерах и пришлите мне комментарии по тем браузерам, которые я не указал, либо в которых допустил ошибку.

Материалы:

  • www.stevesouders.com/blog/2010/04/26/call-to-improve-browser-caching/ — Call to improve browser caching
  • www.yuiblog.com/blog/2007/01/04/performance-research-part-2/ — Performance Research, Part 2: Browser Cache Usage – Exposed!

Смотрите также в этом разделе

Смежные материалы, которые могут быть вам полезны

  • 10 причин, по которым Flash по-прежнему остается популярной платформой для разработки игр
  • Apps vs. Web — выбор между веб и нативным приложением
  • Ben the bodyguard — интересный пример
  • Boilerplate или Bootstrap – что выбирать при создании проекта?
  • Google и Arcade Fire: как соединить технологии и искусство
  • Mac vs PC. Часть 2.
  • Tron — эффектный комикс на HTML5
  • Windows 7 глазами пользователя
  • Windows и Mac о Chrome OS
  • Будущее началось
  • Взгляд одного пользователя на современные браузеры
  • Война браузеров в картинках
  • Волшебный фон на CSS
  • Галерея на чистом CSS
  • Если бы IT-компании делали автомобили
  • Интервью: Лидеры мировой индустрии онлайн игр об HTML5, Flash и своих планах на будущее
  • Интервью: Марчин Вичери — создатель Google Pacman Logo, HTML5 Slide Deck и других интересных вещей
  • Интернет и соц сети
  • Как делаются сайты (юмор)
  • Как написать хороший код
  • Как происходит разработка сайта — бэкенд-фреймворки (часть 4)
  • Как происходит разработка сайта (часть 3) Фронтенд-фреймворки
  • Какая она — реальная жизнь айтишника
  • Комикс «Социальная сеть в Раю»
  • Многоуровневый cuSel. Быть или не быть?
  • На пенсии (комикс)
  • Наглядное пояснение значений CSS свойства vertical-align
  • Нескучные HTML формы
  • Нестандартный textarea: в поисках решения
  • Перевод интервью с Эриком Майером (Eric Meyer)
  • Песня о CSS3
  • Погружение в HTML5
  • Почему появился HTML5
  • Разработка сайта (часть 1)
  • Разработка сайта (часть 2)
  • Реклама противоядия для трудоголиков или что такое подработка
  • Синтаксис псевдоэлементов :after и :before
  • Современный подход к веб-стандартам
  • Топ 5 ошибок массивных CSS