Меню

Настройка кэширования страниц сайта с помощью .htaccess — примеры

Настройка кеширования страниц сайта 2021-2019-2020 htaccess

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

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

Что такое кэш сайта — как кэширование влияет на сайт

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

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

При этом кэширование, не несет вреда пользователю. Но улучшает отображение Вашего проекта в его обозревателе. Как это происходит! Когда пользователь заходит на сайт. Его загрузка проходит немного медленней чем нужно. Это связано с тем, что браузер в этот момент сохраняет некоторую копию сайта. В большей степени это относится:

  1. к логотипам;
  2. мелким изображениям;
  3. css файлам;
  4. общей структуре страниц.

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

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

Как включить и настроить кэширование сайта

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

  1. Создать конструкцию типа FilesMatch. В ней указываем необходимые расширения файлов для кэширования.
  2. Далее указываем заголовок Cache-Control с переменной max-age. Тут Cache-Control — это заголовок ответа сервера. Max-age — переменная в которой указывается время хранения файла в секундах.

Типичный список расширений, которые используются в конструкции FilesMatch:

(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)

Те файлы которые Вы не хотите кэшировать, включать в список конструкции FilesMatch не нужно.

Пример кода Header set Cache-Control

# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
</ifModule>

Значение -#- комментарий! Как видите в комментариях указаны сроки, на которые будут сохранены файлы. Также есть возможность запрета принудительного кеша. Этот вариант подходит для динамических файлов. В большей степени относится к скриптам и различным сценариям.

Пример конструкции «FilesMatch» запрещающей принудительное кэширование

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>

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

Также имеется еще один способ управления Cache — который используется многими плагинами на  WordPrees. В этом способе, мы будем использовать модуль mod_expires. Этот модуль имеет способность контроля, над заголовками ответа HTTP на стороне сервера. Тут основное время хранения данных в кэше, может быть установлено Вами.

Имеет несколько установок продолжительности хранения данных:

  1. по времени доступа клиента;
  2. или по последнему изменению файла;
  3. установка по времени;

Пример простого кода <ifmodule mod_expires.c>

# Expires Headers — 2678400s = 31 days
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType image/gif "access plus 2678400 seconds"
ExpiresByType image/jpeg "access plus 2678400 seconds"
ExpiresByType image/png "access plus 2678400 seconds"
ExpiresByType text/css "access plus 518400 seconds"
ExpiresByType text/javascript "access plus 2678400 seconds"
ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>

Более серьезный пример использования <IfModule mod_expires.c>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/webp A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/font-woff2 A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

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

Кэширование в браузере на стороне пользователя на 3 — 7 дней или на год

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

# кеширование в браузере на стороне пользователя
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType js "access 3 days"
</IfModule>

Кэширование контента (Flash, CSS, JS, HTML, XML) и изображений

В этом примере, мы используем кеш только к определенным файлам. И на менее длительный срок.

<ifModule mod_expires.c>
ExpiresActive On
# Кеш для изображений
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
# Кеш контента (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

Настройка кэширования страниц и файлов сайта, не такое уж, и сложное дело. Главное выбрать правильную стратегию. Все выше указанные примеры, Вы можете использовать на свое усмотрение. Протестируйте стратегии и подберите нужный вариант кода. Ниже я расскажу, о некоторых  Cache (кеш-кэш) плагинах для WordPress.

Настройка кэширования с помощью плагинов WordPress

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

 WP Fastest Cache

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

WP Fastest Cache настройка кэширования WordPress 2022-2020-2021

WP Super Cache

Очень популярный плагин! Отличный функционал и удобные настройки. Способен кешировать большое количество различных объектов. Настройка плагина очень простая.

WP Super Cache настройка кеширования WordPress 2022-2020-2021

W3 Total Cache

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

W3 Total Cache настройка кэширования WordPress 2019-2020-2021

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

В заключение

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

Спасибо, что читаешь Nicola Top

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

четырнадцать − 10 =