Браузерное и серверное кэширование

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

Что такое кэширование, основные принципы работы

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

Для начала представим себе сам сайт:

На самом деле это сложная структура, состоящая из нескольких важных компонентов. Чтобы собрать интерфейс сайта в браузере/приложении пользователя, необходимо взаимодействие всех частей системы:

• В базе данных на сервере БД хранится связанная информация, используемая в выдаче сайта: списки, таблицы, пароли и т. п.
• Файловый сервер предоставляет доступ к файлам, таким как изображения, видео, загружаемые документы.
• Веб-сервер собирает и обрабатывает информацию на стороне т. н. «бэкенда» (внутренней части веб-ресурса), чтобы отправить ее дальше по запросу.
• На стороне «фронта» происходит визуализация контента и выдача его пользователю. В локальных хранилищах складируются содержимое переменных, результаты вычислений и прочее. Скрипты формируют конечную картину, которую «видит» браузер.

При этом еще используются файлы самих страниц — «.html», «.php» и т. д. Поэтому мы получаем доступ ко множеству различных данных, которые могут подвергаться кэшированию:

• Страницы в целом.
• Изображения и видео.
• Скрипты.
• Стили CSS.
• Коды.
• Запросы к базе данных.

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

Браузерное или клиентское кэширование позволяет сохранять данные на компьютере пользователя. Они хранятся здесь, пока страница выдает особый статус «не изменялась» (304 – Not Modified), соответственно запрос получает только данный статус, а все данные загружаются локально и быстро.

Серверное кэширование работает на стороне веб-сервера, но в этом случае страница не собирается заново из разных источников данных, а выдается целиком, что также ускоряет и упрощает загрузку.

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

Как работает браузерное кэширование

Если запустить очистку ненужных файлов для ускорение работы операционной системы, то она спросит, удалить ли сохраненные интернет-файлы. Также удаление сохраненной информации есть в браузере:

В данном случае мы очищаем именно кэшированные браузером данные интернет-страниц. Они нужны, чтобы часто используемые ресурсы загружались быстрее.

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

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

1. При первой загрузке сайта в браузер идет получение всех его компонентов.
2. Анализируя данные, браузер делит их на статические и динамические. К статическим как раз относятся изображения, коды страниц, CSS и др.
3. Статистические данные складируются в подпапки кэша на диске, для каждого сайта используется свой набор папок.
4. При повторном заходе браузер отображает статические компоненты из кэша, так экономится время на их загрузку.

Для управления браузерным кэшированием используются HTTP-заголовки Expires и Cache-control, отправляемые веб-сервером при запросе к страницам.

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

Успешная проверка выдаст данные по обоим заголовкам. Как они интерпретируются:

Expires: Sun, 19 Aug 2023 03:00:00 GMT

Это значит, что страница не будет изменяться до трех часов ночи (по Гринвичскому времени) 19 августа 2023 года. Пока это время не пришло, браузер будет брать ее из кэша.

Cache-Control: max-age=600

Означает, что страница с момента скачивания не будет изменяться в течение 600 секунд (10 минут). Пока это время не вышло, страница будет грузиться из кэша, но затем ее следует обновить с веб-сервера. 

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

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

Также в браузерном кэшировании используется заголовок Last Modified. Он показывает время, в которое страница последний раз изменялась на сервере. Если же она не меняется, то ресурс отвечает заголовком Not Modified, и браузер грузит страницу из локального кэша. В ином случае нужно снова выгружать страницу полностью из сети.

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

Кэширование на стороне сервера

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

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

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

Если данных много, то запросы по созданию страницы могут приводить к значительным затратам ресурсов сервера. Серверное кэширование дает серьезную их экономию, ускоряя отдачу в десятки, а то и сотни раз.

Серверное кэширование в виде модулей и расширений существует для всех популярных CMS — Wordpress, Joomla и т. п. При создании собственных движков разработчики вынуждены использовать свои решения.

Что можно упростить за счет использования серверного кэширования:

1. Выдачу страницы целиком. Это трудоемкий процесс, поскольку чем больше информации из разных источников на странице (допустим, вам нужно выдать пользователю целые таблицы данных, чтобы он еще и мог вносить в них изменения), тем чаще обновляется конечное содержимое. Нужно подходить к созданию страниц так, чтобы при максимально однотипных запросах они выдавали однотипные ответы.
2. Результаты компиляции PHP. Поскольку этот язык программирования сайтов собирает данные из разных источников, можно хранить в кэше уже готовые файлы собранных страниц.
3. Кэширование отдельных блоков на странице. Здесь сложность заключается в том, чтобы разграничить кэшируемые и динамические части страниц, использовать разные виды кэша на отдельных блоках. Но такой способ отлично помогает сократить время на загрузку тех частей, которые лучше подвергаются сохранению в буфере.
4. Кэш MySQL-запросов к базам данных. Если сбор данных из БД в некоторые моменты времени выдает один и тот же результат, можно кэшировать его и не запрашивать новые данные из базы. Здесь важно грамотно расставить статусы, определяющие время для обновления данных по запросу.

Работа с кэшем на стороне сервера ведется постоянно, и даже если ваш веб-сайт уже давно и успешно работает в сети, всегда найдется возможность для ускорения его работы.

Создание политики кэширования при разработке сайта

Вот несколько рекомендаций для тех, кто начинает разрабатывать сайт (веб-ресурс) или имеет проблемы с его быстродействием.

• До запуска сайта в производство необходимо продумать его структуру. Разделите элементы на типовые группы (изображения, CSS, файлы кода) и сформируйте дерево взаимодействия этих групп, создавая отдельные библиотеки под каждую.
• Путь (URL) к элементам одного типа лучше сделать единым, так кэширование будет работать быстрее. Для пользователя это будет выглядеть как набор отдельных папок на сервере для хранения картинок/текстов/стилей под каждый раздел сайта.
• Используйте валидацию загрузки, автоматизируйте процесс кэширования, чтобы не приходилось каждый раз вручную прописывать новые правила.
• Распределите нагрузку на кэш. Иногда стоит кэшировать не всю страницу, а статические элементы, динамические оставив для постоянной загрузки из базы данных. Тестируйте разные варианты распределения, потому что расход места под кэш также влияет на работу системы.
• Постарайтесь использовать отдельный сервер для хранения кэшированных данных, так меньше вероятность их случайной потери (особенно это опасно, если дело касается кодов страниц). Создайте бэкап в резервном хранилище. Собственный сервер также ускоряет доступ к сохраненным данным в отличие от сторонних.

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

Серверное кэширование и кэш браузера — какой подход лучше?

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

Кэш на сервере и браузерный вариант выполняют схожие задачи, но подход здесь разнится, и сказать какой из них лучше вне контекста просто невозможно. Рассмотрим несколько ситуаций, для которых применимо то или иное решение:

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

При этом есть сложность, связанная с тем, что при большом объеме страниц (а храним мы не только картинки и документы, но и JS-файлы, CSS-скрипты и т. п.) придется постоянно решать вопрос их актуальности. При недополучении браузером статуса страницы она может отображаться в устаревшем виде, что конечно плохо для пользователя.

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

Поэтому наилучшим вариантом будет продумывание такой политики кэширования, которая позволит сбалансировать нагрузку и на серверы, и на клиентов.

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

Самое главное — не нужно пытаться кэшировать каждый элемент на странице, порой динамическая загрузка будет работать быстрее. И чтобы это выяснить, уделите максимум внимания аналитике внутренней (серверной) работы вашего ресурса.