Как обслуживать статические ресурсы с помощью эффективной политики кэширования

Такие веб-сайты , как GTMetrix и Google PageSpeed ​​Insights , предлагают способы повышения производительности вашего веб-сайта. Если вы читаете это, вы, по крайней мере, знаете, что у каждого веб-сайта есть возможности для повышения производительности либо с помощью ручной оптимизации, либо с помощью плагинов, таких как 10Web Booster.

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

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

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

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

В Google PageSpeed ​​Insights предложение выглядит аналогично и дает аналогичную информацию.

Предложения похожи, потому что GTMetrix и PageSpeed ​​Insights используют инструмент Lighthouse для своей структуры анализа веб-страниц. Lighthouse — это инструмент с открытым исходным кодом, предназначенный для повышения производительности сайта, который может работать во многих различных форматах.

Давайте быстро напомним себе, как производительность веб-сайта измеряется набором показателей, наиболее важным из которых является Core Web Vitals.

Вот краткое изложение:

• Largest Contentful Paint ( LCP ) — измерение того, сколько времени требуется для загрузки самого большого объекта в области просмотра страницы.
• Задержка первого ввода ( FID ) — измеряет скорость отклика веб-сайта. Он измеряет время между кликом пользователя или взаимодействием с сайтом и ответом сайта.
• Кумулятивное смещение макета ( CLS ) — измеряет, насколько неожиданно смещается макет страницы.

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

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

Есть несколько компонентов, поэтому давайте обсудим их более подробно.

Как обслуживать статические ресурсы с помощью эффективной политики кэширования

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

Что такое статические активы?

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

Такие файлы, как изображения, javascript, файлы CSS и шрифты, — это файлы, которые можно считать статическими активами. Что касается WordPress, эти файлы CSS, javascript, изображений и шрифтов обычно являются частью темы, плагина или пользовательского контента.

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

Что такое кэширование?

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

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

Как безопасно и эффективно очистить кеш WordPress?

Найдите лучший плагин для кэширования WordPress с нашими 5 лучшими решениями

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

Кэширование страниц и кэширование статических ресурсов

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

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

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

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

Что делает статический актив кэшируемым?

Согласно GTMetrix, ресурс можно кэшировать, если он соответствует следующим требованиям:

• Это шрифт, CSS, javascript или медиафайл.
• Он возвращает код состояния HTTP 200, 203 или 206.
• У него нет явной политики отсутствия кэширования.

Что такое политика кэширования?

Мы рассмотрели, что такое статический ресурс, а также что значит кэшировать ресурс.

Термины «свежесть» и «устаревший» могут использоваться здесь для описания состояния кэшированного файла. Если файл можно извлечь из кеша, его можно назвать свежим . Когда срок его действия истечет, он будет считаться устаревшим .

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

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

Как политика кэширования влияет на UX и SEO?

Пользовательский опыт (UX) и поисковая оптимизация (SEO) тесно связаны друг с другом. По данным Google, исследования показывают, что пользователи заботятся об отзывчивости сайта, поэтому Google ранжирует более отзывчивые страницы выше.

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

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

Как решить проблему обслуживания статических ресурсов с помощью политики эффективного кэширования

Исправить вручную

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

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

Когда запрашивается ресурс, веб-сервер отвечает ресурсом и некоторой дополнительной информацией в так называемых заголовках HTTP. Думайте о заголовках HTTP как о метаданных о соединении. В случае кэширования HTTP-заголовкиCache-ControlиExpiresуправляют тем, как мы кэшируем ресурс.

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

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

Пример: кешировать актив на семь дней
Cache-Control: max-age=604800

Пример: может храниться в общем кэше до семи дней.
Cache-Control: public, max-age=604800

Пример: можно сохранить, но необходимо повторно проверять при каждом запросе.
Cache-Control: no-cache

Пример: Невозможно кэшировать
Cache-Control: no-store

Заголовок cache-control новее и имеет больше параметров, но в случае, если cache-control не поддерживается, HTTP-заголовок expires выполняет ту же задачу заголовка и указывает, как долго ресурс действителен, прежде чем потребуется повторная проверка. (Обратите внимание, что директива max-age в заголовке Cache-Control имеет приоритет над Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Изменение конфигурации сервера напрямую

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

Апачи

На HTTP-сервере Apache следующий фрагмент можно добавить к определению сайта или файлу .htaccess.

Объясняя этот фрагмент, в нем говорится, что любой ресурс, расширение которого соответствует .ico или .pdf и т. д., будет иметь заголовок Cache-Control, установленный для ресурса.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

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

Nginx

В Nginx этот фрагмент можно добавить в блок сервера.

Объясняя этот фрагмент, в нем говорится, что любой ресурс, расширение которого соответствует .ico или .pdf и т. д., будет иметь установленные заголовки expires и cache-control.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Как для Apache, так и для Nginx мы показываем, как изменять/добавлять заголовки. Мы показываем конкретные заголовки, которые мы используем для кэширования, но этот метод можно использовать для любой другой формы кэширования.

Исправить с помощью плагина WordPress

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

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

Если вам нужны дополнительные параметры или больший контроль над заголовками HTTP, вы можете использовать 10Web Booster Pro. 10Web Booster Pro использует Cloudflare. Когда вы используете Cloudflare, он добавляет заголовки управления кешем к вашим статическим ресурсам и кешированным страницам. Это позволяет обойти любые настройки или ограничения сервера, поскольку ваши посетители получают файлы напрямую из Cloudflare.

Что делает плагин 10Web Booster лучшим выбором, так это то, что он делает все это и делает это автоматически. Вам не нужно управлять какими-либо конфигурациями сервера или файлами .htaccess.

В качестве альтернативы, если вы используете 10Web Hosting, он автоматически реализует кэширование, и вам не нужно беспокоиться о добавлении заголовков для статических ресурсов.

Все еще не можете решить проблему? Попробуйте эти два совета

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

Проверка файлов в кэше

Если GTMetrix и PageSpeed ​​по-прежнему сообщают, что вы должны обслуживать статические ресурсы с политикой кэширования, вы можете проверить, действительно ли ваша реализация внесла ожидаемые изменения.

В большинстве браузеров есть простой способ проверить, поступают ли файлы из кеша или нет.

В Chrome в разделе «Просмотр» и «Разработчик» выберите «Инструменты разработчика»:

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

Увеличьте время кэширования

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

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

Заключение

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

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

Мы рассмотрели основные моменты ручного включения заголовков путем изменения конфигурации сервера и то, как мы можем упростить его с помощью плагина WordPress, такого как 10Web Booster, и использования интеграции 10Web с Cloudflare, чтобы иметь доступ для установки HTTP-заголовков управления кешем.

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

Часто задаваемые вопросы