Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

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

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

Использование кеша браузера для ускорения загрузки сайта
Содержание статьи

Определение скорости загрузки сайта

page-loadВ интернете можно найти большое количество различных сервисов, тестирующих скорость загрузки сайта как для обычных компьютеров, так и для портативных устройств. Такое разделение появилось относительно недавно, а причина его вполне очевидна — процент мобильного трафика значительно вырос за последние несколько лет и продолжает свой стремительный рост. Если раньше можно было буквально плюнуть на адаптацию дизайна сайта под мобильные устройства, потеряв 1% трафика, то сейчас это уже непозволительно из-за большой доли трафика с портативных устройств, которая может доходить до 25%, а то и больше. Все конечно зависит от самого сайта, целевой и возрастной аудитории.

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

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

Возвращаясь к сервисам проверки скорости загрузки сайта, хочется отметить среди них самый авторитетный — конечно же это сервис, принадлежащий Google, называемый PageSpeed Insights. Удобный и очень качественный инструмент, который с высокой точностью определит скорость загрузки вашего сайта как для обычных компьютеров, так и для мобильных устройств. Для тех и других вы получите различные оценки по 100-бальной шкале. Чем выше вы наберете баллов, тем лучше.

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

use-browser-cacheОдной из основных причин невысокой оценки скорости в PageSpeed Insights является отключенный кеш браузера. Данный момент является одним из самых важных, поэтому именно его мы и решили рассмотреть подробней. Наверняка, подавляющее большинство сайтов, проходящих тест на скорость загрузки, сталкиваются именно с этой ошибкой. Вернее ошибкой это не считается, т.к. подсвечивается не красным восклицательным знаком, а желтым, что означает предупреждение.

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

Для чего нужно кеширование

muscle-memoryГлавной задачей кеширования статических ресурсов является разгрузка сервера. Дело в том, что генерация страницы — процесс довольно сложный, который может состоять из нескольких этапов. При составлении финального HTML-кода происходит несколько обращений к базе данных, отрабатываются служебные функции, подключаются дополнительные файлы и т.д. Суть здесь в том, что все эти операции проводить несколько раз подряд нет никакого смысла. Речь конечно идет о документе, в который не было внесено никаких изменений с момента последней загрузки. В случае, если с прошлой генерации кода страницы на ней ничего не изменилось, можно предоставить информацию из заранее созданного кеша этой страницы. Таким образом не нужно будет заново обращаться к базе данных, осуществлять выборку, сортировку, подключать функции и т.д. Вся информация уже была сгенерирована, а затем предусмотрительно сохранена в кеше браузера. При первой же необходимости из кеша вытаскивается требуемая в данный момент статичная страница и с гораздо большей скоростью выводится на экран.

serverИными словами кеширование придумали для того, чтобы оптимизировать работу сервера, исключив повторные обращения. Похожая ситуация нами уже рассматривалась, когда мы настраивали заголовки сервера для поисковых систем — если поисковый робот отправляет в заголовке If-Modified-Since, то для страницы, которые не изменились с момента последнего посещения роботом, отдают 304 заголовок, говорящий поисковому боту, что пока смысла на страницу заходить нет, т.к. ничего нового на ней не появилось.

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

  • JavaScript;
  • CSS;
  • графические файлы;
  • мультимедийные файлы.

Основные рекомендации по кешированию

  1. Статичные ресурсы, которые мы перечислили в предыдущей главе, должны кешироваться на срок не менее семи дней.
  2. Блоки, которые подтягиваются с внешних источников (виджеты) нужно кешировать минимум на 1 день.
  3. Вместо Cache-control лучше использовать Expires, т.к. этот заголовок лучше поддерживается, если говорить об универсальности.
  4. Не устанавливать продолжительность кеширования более 1 года, т.к. это противоречит стандартам RFC.

Самые значимые заголовки Expires и Cache-Control

Данные заголовки имеют высокий приоритет и считаются самыми значимыми. Именно с них начинается настройка кеширования в браузере. Если вы не уверены, что какая-то страница в ближайшее время будет обновляться, установите продолжительный срок кеширования, используя Expires. В таком случае браузер, руководствуясь вашим указанием, не будет отправлять GET-запросы на сервер, а вместо этого будет вытаскивать информацию из своего кеша. Как только срок действия кеша истечет, страница загрузится с сервера вновь и в этот же момент будет создана новая версия кеша, которая будет действовать указанный период времени.
Пример использования Expires (обратите внимание на формат записи даты истечения срока кеша):

<meta name="expires" content="tue, 01 Jun 2010">

Примеры использования Cache-Control:

<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache-control" content="private">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-control" content="no-store">

Как видно из примера, возможны 4 значения:

  1. Public — кэширование запросов, защищенных аутентификацией, которые по умолчанию не кешируются.
  2. Private — только однопользовательское кеширование (в браузере пользователя).
  3. no-Cache — принуждение браузера каждый раз посылать GET-запросы на сервер для проверки актуальности кеша.
  4. no-Store — запрет кеширования в любом случае.

Использование заголовков Last-Modifed и ETag

Заголовки Last-Modified и ETag указывают браузеру на то, как он должен определять соответствие ресурсов в момент кеширования. Заголовок Last-Modified использует дату, в то время как ETag уникализирует ресурс по идентификатору, например, с помощью хеша контента. Данные заголовки принято называть «слабыми», так как браузер руководствуется алгоритмом, не имеющим строгого обоснования для определения необходимости передачи GET-запроса на сервер или же отдачи информации из кеша.

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

При использовании заголовков для кеширования, нужно не переусердствовать и выбрать только по одному из указанных выше. Как мы уже говорили ранее, лучше использовать Expires, а не Cache-Control. Совместное же использование обоих указанных заголовков не имеет никакого смысла и является излишеством. То же самое можно сказать и насчет использования Last-Modified и ETag — стоит выбрать только один из предложенных.

Пример импользования Last-Modified:

<meta http-equiv="Last-Modified" content="Fri, 18 Sep 2015 23:31:25 GMT">

Манипуляции с URL кешируемых ресурсов

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

Если вы даже приблизительно не знаете, сколько времени ресурс будет оставаться статичным и когда произойдет его следующее изменение, устанавливайте продолжительный срок кеширования, но при этом нужно предусмотреть одну вещь — если, например, файл CSS или JavaScript хорошенько закешировать, внесение небольших изменений в эти файлы не приведет к обновлению данных кеша. Данная проблема решается заменой URL ресурса, в который были внесены изменения, но «его срок еще не подошел». Если URL ресурса изменится, то браузер обязательно направит GET-запрос к вашему серверу, чтобы получить новую версию документа, после чего так же добавит ее в свой кеш.

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

Для примера, MD5 или SHA. Кстати, на нашем сервере вы можете хешировать данные в режиме онлайн в этих форматах, благодаря нехитрому инструменту.

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

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



Предыдущая статья:
Способы установки правильной кодировки страниц сайта

Читайте также:
Сквозные ссылки на сайте: отличия от обычных ссылок и польза в продвижении

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»