Кеширование страниц сайта с помощью .htaccess — Cache
· Время на чтение: 9мин · Автор:
·
Опубликовано
· Обновлено
Прослушать эту статью
Кеширование страниц сайта с помощью .htaccess. Не менее важный этап технической оптимизации, как включение gzip сжатия или минификация CSS. Включение Cache страниц и файлов, позволит Вам значительно увеличить скорость сайта. А также в разы уменьшить нагрузку на сервер. Благодаря несложным манипуляциям, Ваш сайт начнет летать.
В этой статье мы поговорим обо всех аспектах этой темы. Чем важен кэш для сайта и его применение. Я опишу примеры, которые Вы сможете применить на практике. Плюс к этому, будет небольшой обзор некоторых, достаточно хороших Cache плагинов для WordPress.
Содержание статьи:
- Что такое кеш сайта — как кэширование влияет на сайт
- Как включить и настроить кеширование сайта
- Кода Header set Cache-Control
- Пример конструкции “FilesMatch” запрещающей принудительное кеширование
- Простой Cache код
- Более серьезный пример использования Cache
- Настройка кэширования в браузере на стороне пользователя на 3 – 7 дней или на год
- Кэш контента (Flash, CSS, JS, HTML, XML) и изображений
- Кеширование с помощью плагинов WordPress
Что такое кеш сайта — как кеширование влияет на сайт
Простыми словами кэширование — это сохранение информации о сайте, у пользователя в браузере. Таким образом снижается основная нагрузка на сервер. Значительной части сайта не нужно будет загружаться, так как ее сохраненная часть будет подгружена браузером пользователя. Это крайне эффективный метод ускорения загрузки сайта.
Кэш или кеш или Cache — промежуточный буфер обмена данными с быстрым доступом. Сохраняющий и содержащий информацию, которая имеет частый запрос. Доступ к данным в cache, проходит с большей скоростью, чем с более медленных источников памяти. Но имеется ограничение в объеме памяти. Доступным языком Кэш (cache) – это короткая память.
При этом кэширование, не несет вреда пользователю. Но улучшает отображение Вашего проекта в его обозревателе. Как это происходит! Когда пользователь заходит на сайт. Его загрузка проходит немного медленней чем нужно. Это связано с тем, что браузер в этот момент сохраняет некоторую копию сайта. В большей степени это относится:
- к логотипам;
- мелким изображениям;
- css файлам;
- общей структуре страниц.
Таким образом, часть сайта постоянно находится в памяти (кэше) браузера пользователя. Благодаря этому, при повторной загрузке сайта, посетитель получает максимально возможную скорость отклика. Браузер в этот момент, выгружает часть элементов из своей памяти. А сайту, нет надобности повторно передавать большой объем информации.
Когда на сайте включен и настроен cache. Определенная его часть, будет сохранена на необходимый период в локальный кеш браузера посетителя. У которого веб-страницы будут загружаться на много быстрее, при повторных посещениях.
Как включить и настроить кэширование сайта
Сделать это совсем не сложно. Мы будем и дальше работать с файлом htaccess — задающим правила серверу. Как с ним работать я описывал во многих статьях. Поэтому перейду непосредственно к делу. По стандарту кэширование задается для необходимых файлов и на определенный период времени. После истечения срока отведенного для хранения файла, его актуальная версия будет загружена снова с сервера. Для этого нужно:
- Создать конструкцию типа FilesMatch. В ней указываем необходимые расширения файлов для кэширования.
- Далее указываем заголовок 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 # 30 дней <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" # 30 дней <filesMatch "\.(css|js)$"> Header set Cache-Control "max-age=2592000, public" # 2 дня <filesMatch "\.(xml|txt)$"> Header set Cache-Control "max-age=172800, public, must-revalidate"
Значение -#- комментарий! Как видите в комментариях указаны сроки, на которые будут сохранены файлы. Также есть возможность запрета принудительного кеша. Этот вариант подходит для динамических файлов. В большей степени относится к скриптам и различным сценариям.
Пример конструкции “FilesMatch” запрещающей принудительное кэширование
<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$"> Header unset Cache-Control
Как видите здесь не указаны сроки. Поэтому эти расширения файлов не будут кэшироваться. В данную конструкцию, Вы можете добавить свои расширения файлов.
Также имеется еще один способ управления Cache – который используется многими плагинами на WordPrees. В этом способе, мы будем использовать модуль mod_expires. Этот модуль имеет способность контроля, над заголовками ответа HTTP на стороне сервера. Тут основное время хранения данных в кэше, может быть установлено Вами.
Имеет несколько установок продолжительности хранения данных:
- по времени доступа клиента;
- или по последнему изменению файла;
- установка по времени;
Пример простого Cache кода
# Expires Headers - 2678400s = 31 days 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"
Более серьезный пример использования Cache
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
Как мы видим, тут затронуто огромное количество расширений. С одним, и тем же, сроком хранения.
Кэширование в браузере на стороне пользователя на 3 – 7 дней или на год
Тут, основная часть расширений файлов, будет сохраняться на год. В большей степени это полезно для изображений, так как их думаю мало кто меняет. Таким образом они будут, подгружаться в браузере посетителя в течение года.
# кеширование в браузере на стороне пользователя 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"
Кэширование контента (Flash, CSS, JS, HTML, XML) и изображений
В этом примере, мы используем кэш только к определенным файлам. И на менее длительный срок.
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"
Настройка кэширования страниц и файлов сайта, не такое уж, и сложное дело. Главное выбрать правильную стратегию. Все выше указанные примеры, Вы можете использовать на свое усмотрение. Протестируйте стратегии и подберите нужный вариант кода. Ниже я расскажу, о некоторых Cache (кеш-кэш) плагинах для WordPress.
Настройка кэширования с помощью плагинов WordPress
Для тех, кто использует CMS WordPress, имеет огромное разнообразие кеш плагинов. Все они имеют полнофункциональное решение и автоматическую настройку. Особых проблем при использовании подобных плагинов, возникнуть не должно. После установки такого плагина, Вам остается применить нужные Вам настройки. Плагин автоматически сохранит их в файле htaccess.
WP Fastest Cache
Популярный и достаточно мощный плагин кэширования для WP. Имеет большое количество разнообразных настроек, в том числе оптимизацию HTML, CSS и Js. Разобраться в которых сможет даже начинающий пользователь.
WP Super Cache
Очень популярный плагин! Отличный функционал и удобные настройки. Способен кешировать большое количество различных объектов. Настройка плагина очень простая.
W3 Total Cache
Мощное решение для крупных сайтов. Самый популярный плагин, среди себе подобных. Имеется огромное количество разнообразных настроек и функционала. Настраивать нужно с осторожностью, так как может вызвать критические ошибки. Есть вероятность конфликтов с другими плагинами или темами. Но по функционалу очень хороший и мощный плагин.
Это основные и наиболее популярные cache плагины, которыми я и сам пользовался. Выбрать можно любой в зависимости от Ваших предпочтений.
В заключение
В этой статье я постарался максимально раскрыть тему кеширования. Указав примеры, которые можно использовать в зависимости от Ваших характеристик. Настройка кэширования с этим руководством пройдет у Вас как по маслу. Надеюсь эта статья будет актуальна еще долгое время. Благодарю за внимание, но не прощаюсь. Увидимся в следующих статьях.
С этой статьей читают:
- Как создать файл robots.txt для сайта — правильный robots
- Htaccess файл — как создать файл .htaccess инструкция для новичков
Спасибо, что читаешь: SEO HELPER | NICOLA.TOP
