Кэш браузера | .htaccess
- htaccess кэширование сохраняет содержимое веб-страницы на локальном компьютере, когда пользователь посещает ее;
- Использование кэша браузера – веб-мастер дает указания браузерам, как следует рассматривать ресурсы.
Когда браузер отображает веб-страницу, он должен загрузить логотип, CSS файл и другие ресурсы:
Кэш браузера «запоминает» ресурсы, которые браузер уже загрузил. Когда посетитель переходит на другую страницу сайта, логотип, CSS файлы и т.д. не должны загружаться снова, потому что браузер уже «запомнил» их (сохранил). В этом заключается причина того, почему во время первого посещения загрузка веб-страницы занимает больше времени, чем при повторных.
Когда вы используете кэширование, файлы веб-страницы будут сохранены в кэше браузера. Страницы будут загружаться в разы быстрее при повторных посещениях. Также будет с другими страницами, которые используют одни ресурсы.
- Измените заголовки запроса ресурсов, чтобы использовать кэширование;
- Оптимизируйте свою стратегию кэширования.
Для большинства людей единственный способ кэширования сайта htaccess заключается в том, чтобы добавить код в файл .htaccess на веб-сервере.
Файл .htaccess контролирует многие важные настройки для вашего сайта.
Приведенный ниже код указывает браузеру, что именно кэшировать и как долго это «запоминать«. Его следует добавить в начало файла .htaccess:
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##
Сохраните файл .htaccess, а затем обновите веб-страницу.
В приведенном выше коде заданы промежутки времени. Например, 1 year (1 год) или 1 month (1 месяц). Они связаны с типами файлов. Приведенный выше код устанавливает, что .jpg файлы (изображения) следует кэшировать в течение года.
Если бы вы хотели изменить это, чтобы и JPG изображения кэшировались в течение месяца, то вы бы просто заменили «1 год» на «1 месяц«. Указанные выше значения кэширования через htaccess оптимальны для большинства веб-страниц.
Описанный выше метод называется «Expires«, он помогает с кэшированием большинству новичков. После того, как вам станет проще работать с кэшированием, можете попробовать другой метод кэширования Cache-Control, который дает больше возможностей.
Возможно, что метод Expires не сработает на вашем сервере, в этом случае вы возможно захотите попробовать использовать Cache-Control.
Этот метод позволяет получить больше контроля над кэшированием страниц в браузере, но многие считают, что проще прописать все настройки один раз.
Пример использования в файле .htaccess:
# 1 Month for most static assets <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>
Приведенный выше код устанавливает заголовок Cache-Control в зависимости от типа файла.
Рассмотрим упомянутую выше строку кода кэширования в браузере htaccess:
# 1 Month for most static assets
Данная строка — просто примечание. Файл .htaccess игнорирует строки, начинающиеся с символа #. Это примечание рекомендуется, так как у вас может быть несколько различных наборов данных в качестве решения для кэширования файлов:
<FilesMatch ". (CSS | JPG | JPEG | PNG | GIF | JS | ICO) $">
Упомянутая выше строка говорит, что, «если файл будет одним из этих типов, то мы сделаем что-то с ним… »
Самое важное в этой строке то, что в ней перечислены различные типы файлов (CSS, JS, JPEG, PNG и т.д.) и что инструкции кэширования следует применять к этим типам файлов. Например, если вы не хотите, чтобы JPG файлы кэшировались в течение указанного периода времени, можете удалить «JPG«. Если вы хотите добавить HTML, то нужно в этой строке указать «HTML«:
Header set Cache-Control "max-age=2592000, public"
В упомянутой выше строке установлены фактические заголовки и значения:
- Часть «Header set Cache-Control» — устанавливает заголовок;
- Переменная «max-age=2592000» – указывает, сколько времени займет процесс кэширования (в секундах). В этом случае мы осуществляем кэширование в течение одного месяца (2592000) секунд;
- Часть «public» сообщает о том, что это общедоступно.
Эта строка кэширования через htaccess закрывает оператор и заканчивает блок кода.
Если вы составляете список изображений, которые будут кэшироваться в течение года и более, помните, что если вы вносите изменения в свои страницы, они могут быть не видны всем пользователям. Так как пользователи обратятся к кэшируемым файлам, а не к существующим. Если есть файл, который вы периодически редактируете (например — файл CSS),то можно преодолеть проблему кэша с помощью цифрового отпечатка URL.
Получение нового (некэшируемого) файлового ресурса возможно при наличии уникального имени. Например, если файл CSS назван «main.css», то вместо этого мы могли бы назвать его «main_1.css». В следующий раз, когда мы поменяем его имя, мы можем назвать файл «main_2.css». Это полезно для файлов, которые периодически изменяются.
При кэшировании файлов htaccess необходимо указать один заголовок из пары Expires или Cache-Control max-age, а также один из заголовков Last-Modified или ETag для всех кэшируемых ресурсов. Использовать и Expires, и Cache-Control: max-age излишне, как и Last-Modified и ETag одновременно.
Данная публикация представляет собой перевод статьи «Leverage browser caching» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Настройка кэширования страниц сайта с помощью .htaccess
Настройка кэширования статических файлов через .htaccess. Не менее важный этап технической оптимизации, как включение gzip сжатия. Включение кэширования страниц и файлов, позволит Вам значительно увеличить скорость сайта. А также в разы уменьшить нагрузку на сервер. Благодаря несложным манипуляциям, Ваш сайт начнет летать.
В этой статье мы поговорим обо всех аспектах этой темы. Чем важен кэш для сайта и его применение. Я опишу примеры, которые Вы сможете применить на практике. Плюс к этому, будет небольшой обзор некоторых, достаточно хороших кэш плагинов для WordPress.
Содержание статьи:
Что такое кэш сайта — как кэширование влияет на сайт
Простыми словами кэширование — это сохранение информации о сайте, у пользователя в браузере. Таким образом снижается основная нагрузка на сервер. Значительной части сайта не нужно будет загружаться, так как ее сохраненная часть будет подгружена браузером пользователя. Это крайне эффективный метод ускорения загрузки сайта.
Кэш или кеш — промежуточный буфер обмена данными с быстрым доступом. Сохраняющий и содержащий информацию, которая имеет частый запрос. Доступ к данным в 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<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 на стороне сервера. Тут основное время хранения данных в кэше, может быть установлено Вами.
Имеет несколько установок продолжительности хранения данных:
- по времени доступа клиента;
- или по последнему изменению файла;
- установка по времени;
Пример простого кода <ifmodule mod_expires.c>
# Expires Headers — 2678400s = 31 days<ifmodule mod_expires.c>ExpiresActive OnExpiresDefault "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 OnExpiresByType text/css A31536000ExpiresByType text/x-component A31536000ExpiresByType application/x-javascript A31536000ExpiresByType application/javascript A31536000ExpiresByType text/javascript A31536000ExpiresByType text/x-js A31536000ExpiresByType text/html A3600ExpiresByType text/richtext A3600ExpiresByType image/svg+xml A3600ExpiresByType text/plain A3600ExpiresByType text/xsd A3600ExpiresByType text/xsl A3600ExpiresByType text/xml A3600ExpiresByType video/asf A31536000ExpiresByType video/avi A31536000ExpiresByType image/bmp A31536000ExpiresByType application/java A31536000ExpiresByType video/divx A31536000ExpiresByType application/msword A31536000ExpiresByType application/vnd.ms-fontobject A31536000ExpiresByType application/x-msdownload A31536000ExpiresByType image/gif A31536000ExpiresByType application/x-gzip A31536000ExpiresByType image/x-icon A31536000ExpiresByType image/jpeg A31536000ExpiresByType image/webp A31536000ExpiresByType application/json A31536000ExpiresByType application/vnd.ms-access A31536000ExpiresByType audio/midi A31536000ExpiresByType video/quicktime A31536000ExpiresByType audio/mpeg A31536000ExpiresByType video/mp4 A31536000ExpiresByType video/mpeg A31536000ExpiresByType application/vnd.ms-project A31536000ExpiresByType application/x-font-otf A31536000ExpiresByType application/vnd.ms-opentype A31536000ExpiresByType application/vnd.oasis.opendocument.database A31536000ExpiresByType application/vnd.oasis.opendocument.chart A31536000ExpiresByType application/vnd.oasis.opendocument.formula A31536000ExpiresByType application/vnd.oasis.opendocument.graphics A31536000ExpiresByType application/vnd.oasis.opendocument.presentation A31536000ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000ExpiresByType application/vnd.oasis.opendocument.text A31536000ExpiresByType audio/ogg A31536000ExpiresByType application/pdf A31536000ExpiresByType image/png A31536000ExpiresByType application/vnd.ms-powerpoint A31536000ExpiresByType audio/x-realaudio A31536000ExpiresByType image/svg+xml A31536000ExpiresByType application/x-shockwave-flash A31536000ExpiresByType application/x-tar A31536000ExpiresByType image/tiff A31536000ExpiresByType application/x-font-ttf A31536000ExpiresByType application/vnd.ms-opentype A31536000ExpiresByType audio/wav A31536000ExpiresByType audio/wma A31536000ExpiresByType application/vnd.ms-write A31536000ExpiresByType application/font-woff A31536000ExpiresByType application/font-woff2 A31536000ExpiresByType application/vnd.ms-excel A31536000ExpiresByType application/zip A31536000</IfModule>
Как мы видим, тут затронуто огромное количество расширений. С одним, и тем же, сроком хранения.
Кэширование в браузере на стороне пользователя на 3 — 7 дней или на год
Тут, основная часть расширений файлов, будет сохраняться на год. В большей степени это полезно для изображений, так как их думаю мало кто меняет. Таким образом они будут, подгружаться в браузере посетителя в течение года.
# кеширование в браузере на стороне пользователя<IfModule mod_expires.c>ExpiresActive OnExpiresDefault "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 Super Cache
Очень популярный плагин! Отличный функционал и удобные настройки. Способен кешировать большое количество различных объектов. Настройка плагина очень простая.
W3 Total Cache
Мощное решение для крупных сайтов. Самый популярный плагин, среди себе подобных. Имеется огромное количество разнообразных настроек и функционала. Настраивать нужно с осторожностью, так как может вызвать критические ошибки. Есть вероятность конфликтов с другими плагинами или темами. Но по функционалу очень хороший и мощный плагин.
Это основные и наиболее популярные cache плагины, которыми я и сам пользовался. Выбрать можно любой в зависимости от Ваших предпочтений.
В заключение
В этой статье я постарался максимально раскрыть тему кеширования. Рассказав о примерах, которые можно использовать в зависимости от Ваших характеристик. Настройка кэширования с этим руководством пройдет у Вас как по маслу. Надеюсь эта статья будет актуальна еще долгое время. Благодарю за внимание, но не прощаюсь. Увидимся в следующих статьях.
- Читайте статьи по этой теме:
nicola.top
Как включить кэш браузера | SEO Маяк
Всем привет! Сегодня на seo-mayak.com я продолжу разбирать рекомендации PageSpeed по ускорению загрузки сайта и расскажу, как включить кэш браузера на стороне посетителя Вашего сайта.
Многие веб-мастера используют для кэширования данных различные кэш-плагины. Самые популярные из них:
Но я стараюсь без крайней необходимости не использовать плагины, поэтому изначально искал вариант, который бы позволил мне включить кэш браузера другими средствами.
Признаюсь, что на поиски «иного средства» я потратил не мало времени, так как большинство статей на данную тему поверхностны, что вызывало у меня еще больше вопросов.
Из всего перечитанного я понял одно — кэш браузера можно включить с помощью директив, задаваемых в файле .htaccess, которые укажут серверу, какие файлы и на какое время надо кэшировать.
На различных форумах и блогах предлагалось масса вариантов, как заставить браузер запоминать и хранить данные или как включить gzip сжатие и т.д. Голова шла кругом, я никак не мог понять принцип действия тех или иных директив и мне ничего не оставалось, как начать проводить эксперименты, благо для этих целей есть Денвер.
Постепенно приходило понимание, что прежде всего мне необходимо разобраться в модулях Apache (популярное серверное ПО), к которым и происходит обращение через файл .htaccess. Как говориться, чем дальше в лес, тем больше дров.
Я не переставал поражаться, сколько знаний должен иметь веб-мастер, чтобы самостоятельно вести и обслуживать свой проект. Все конечно знать невозможно, но к этому надо стремиться. Поехали!
Модули Apache: mod_headers и mod_expires
Данные модули не входят в стандартную сборку Apache и необходимо уточнить в службе поддержки хостинга, установлены ли mod_headers и mod_expires на сервере. Если таковые имеются, то можно приступать к написанию директив.
Модули mod_headers и mod_expires способны встраивать в ответ сервера специальные заголовки Cache-Control или Expires, которые укажут браузеру на стороне посетителя, какие файлы и на какое время надо кэшировать.
Скажу больше. Заголовок Expires начал работать с версии протокола HTTP/1.0, а заголовок Cache-Control был принят на вооружение с выходом протокола HTTP/1.1.
Хоть Expires и был интегрирован в новую версию протокола и его по-прежнему понимают современные браузеры, но с появлением Cache-Control, последний получил приоритет. Т.е, при получении браузером временных директив, директивы Cache-Control отменяют директивы Expires.
Вот такие дела. Я понимаю, что новичкам очень сложно усвоить данный материал, ведь я сам когда-то был «зеленым», но уверен, что при наличии желания можно разобраться в любом вопросе и если Вы дочитаете статью до конца, то думаю многое прояснится.
Для начала давайте разберемся с директивами, предназначенными для модуля mod_headers.
Директивы кэширования для модуля mod_headers
Вот такой код надо вставить в файл .htaccess. Во избежание лишних вопросов, вставляем перед строчкой # END WordPress:
# Включаем кэш в браузерах посетителей
<ifModule mod_headers.c>
# Все html и htm файлы будут храниться в кэше браузера один день
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
# Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# Все флэш файлы и изображения будут храниться в кэше браузера один месяц
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
# Отключаем кеширование php и других служебных файлов
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
Теперь я немного поясню, что означают те или иные директивы.
<ifModule …>…</IfModule> — это своего рода контейнер, который заключает в себя директивы, предназначенные для того или иного модуля Apache и заодно проверяет наличие оного. Если модуль не найден, то директивы игнорируются.
В данном случаи мы обращаемся к модулю mod_headers, исходный файл которого носит название mod_headers.c, где «.с» — расширение файла.
<FilesMatch «…»>…</FilesMatch> — блочная директива, указывающая серверу на файлы с конкретными расширениями, на которые будут распространятся указанные в директиве правила. В кавычках, прописываются регулярные выражения, например «\.(html|htm)$», с помощью которых можно сгруппировать файлы с необходимыми расширениями.
Я сейчас не буду разбирать синтаксис регулярных выражений, используемых в .htaccess, хотя тема очень интересная и я ей лучше посвящу отдельную статью, так что советую подписаться на обновления блога.
Header — директива, влияющая на отправку HTTP заголовка со стороны сервера в сеть. Данная директива может принять следующие аргументы: set, append, add, unset и echo. Все аргументы я думаю описывать вовсе не обязательно, кто хочет знать больше, читайте документацию. Рассмотрим лишь те аргументы, которые используются в нашем коде.
set — аргумент, сообщающий браузеру или промежуточному серверу (прокси-серверу), что любой предыдущий заголовок с тем же именем должен быть заменен. Если объяснить русским языком — это команда браузеру, что при повторном запросе одного и того же заголовка, доставать данные надо из собственного кэша. Т.е, тем самым мы включаем кэш браузера.
unset — аргумент сообщающий браузеру или прокси серверу, что любой заголовок с тем же именем должен быть получен с сервера. Наверное вы уже догадались, что данный аргумент — это ни что иное, как запрет кэширования.
Cache-Control — заголовок, предназначенный для управления процессом кэширования. Для заголовка Cache-Control может может быть прописано рад директив. Очень подробное описания Cache-Control и его директив я нашел тут, кому интересно можете почитать.
max-age — директива, задающая срок годности кэша. После знака равно указывается время в секундах, на протяжении которых, указанные файлы должны хранится в кэше браузера.
Директивы кэширования для модуля mod_expires
При обращении к модулю mod_expires через файл .htaccess, мы будем использовать уже другие директивы (кроме ifModule), которые выглядят следующим образом:
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 5 seconds"
# Включаем кэширование изображений и флэш на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование css, javascript и текстовых файлов на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кэширование html и htm файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
С контейнером ifModule я думаю должно быть все понятно.
ExpiresActive — данная директива активирует или блокирует кэширование на стороне браузера пользователя.
on — активировать
off — блокировать
ExpiresDefault — интересная директива, которая способна задавать время хранения кэша в браузере по умолчанию. Т.е, браузер будет кэшировать все подряд. В кавычках указывается временной интервал.
В директивах для модуля mod_expires синтаксис временного интервала гораздо гибче, чем для модуля mod_headers, где время задается только в секундах.
Для модуля mod_expires время можно устанавливать в следующий исчислениях:
years — лет или year — один год
months — месяцев или month — одни месяц
weeks — недель или week — одна неделя
days — дней или day — один день
hours — часов или hour один час
minutes — минут или minute — одна минута
seconds — секунд
Перед временным интервалом прописывается несколько дополнительных слов, например:
"access plus 1 month"
access — основное слово (основа). В переводе с англ. — доступ;
plus — ключевое слово (ключ), после которого должно следовать числовое значение.
Временной интервал и дополнительные слова обязательно заключается в кавычки. В отрезке кода, который был приведен выше, я специально, для примера, указал временной интервал в разных исчислениях. Надеюсь будет понятно. Идем дальше.
ExpiresByType — директива, задающая временной интервал кэширования для определенных типов файлов. Достоинством данной директивы является то, что она отменяет время кэша по умолчанию, для указанных типов файлов, установленного директивой ExpiresDefault.
Также обязательно через слеш указывается тип файлов, например: image/jpeg, text/html или application/x-javascript. Все типы файлов можно посмотреть здесь.
В заключение хочу сказать, что существуют и другие способы кэширования. Кэш объектов можно организовать с помощью функций WordPress или с помощью сторонних серверов Memcached, APC или Redis.
Конечно в будущем я не обойду вниманием и эти темы, так что подписывайтесь на обновления блога, будет интересно!
До встречи!
С уважением, Виталий Кириллов
« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« PageSpeed — реальное ускорение сайта
« Как включить gzip сжатие и кратно ускорить сайт
« Как сократить CSS и ускорить загрузку сайта
seo-mayak.com
Как включить кэширование?
Все современные браузеры имеют кэш, позволяющий сохранять некоторые элементы посещенных страниц. При повторном посещении ресурса эти элементы берутся из кэша, что экономит трафик и делает загрузку страниц более быстрой. Если кэш в настройках браузера отключен, его необходимо включить.Инструкция
Инструкция
imguru.ru
Как включить кэширование 🚩 управление кешем 🚩 Интернет-софт
Автор КакПросто!
Все современные браузеры имеют кэш, позволяющий сохранять некоторые элементы посещенных страниц. При повторном посещении ресурса эти элементы берутся из кэша, что экономит трафик и делает загрузку страниц более быстрой. Если кэш в настройках браузера отключен, его необходимо включить.
Статьи по теме:
Инструкция
Если вы работаете с Internet Explorer, для просмотра настроек кэша откройте: «Сервис» — «Свойства обозревателя» — «Общие». В разделе «Временные файлы интернета» нажмите кнопку «Параметры». В открывшемся окне вы можете установить размер кэша и параметры проверки обновлений страниц.
Тому, кто пользуется браузером Opera, для настройки кэша следует открыть: «Сервис» — «Общие настройки» — «Расширенные» — «История». Установите: кэш в памяти – «Автоматически», размер дискового кэша – в районе 50-100 Мб, проверять документы и изображения – «Никогда».
Браузер Mozilla Firefox управляет кэшем автоматически, поэтому он не нуждается в настройках. Если вы все-таки хотите изменить параметры кэша, следует открыть: «Инструменты» — «Настройки» — «Дополнительно» — «Сеть». Вы можете отключить автоматическое управление кэшем и назначить его размер по своему усмотрению.
В браузере Google Chrome кэш включен по умолчанию, штатных настроек для изменения его параметров нет. Тем не менее, есть возможность указать размер кэша путем редактирования ярлыка, расположенного на рабочем столе. Кликните ярлык правой кнопкой мышки, выберите «Свойства». В открывшемся окне вам нужна строка «Объект» — допишите в ее конце, после chrome.exe, флаг —disk-cache-size=104857600. Сохраните изменения. В данном примере размер кэша будет ограничен ста мегабайтами. Браузер следует запускать с помощью ярлыка.
Стоит отметить, что не у всех браузеров кэш работает одинаково эффективно. Худшим можно назвать кэш IE, лучшим – кэш Opera. Но даже у Оперы нет возможностей для его тонкой настройки. Если вам важна хорошая работа кэша, установите бесплатную программу Handy Cache. Это кэширующий прокси-сервер: располагаясь на порту 8080, он пропускает через себя весь входящий и исходящий трафик. Программа имеет очень развитые настройки, с ее помощью вы сможете не только экономить порядка 40-60% трафика, но и эффективно бороться с рекламой.
Совет полезен?
Статьи по теме:
www.kakprosto.ru
Используйте кеш браузера, как включить кэширование в htaccess
Многие веб-мастера пользуются таким инструментом, как Google Page Speed для проверки скорости своего сайта. После анализа он выдает ряд рекомендаций по оптимизации. И одной из таких рекомендация является использование кеша браузера.
Браузерное кэширование — вещь очень полезная. При загрузке веб страницы браузер локально сохраняет на компьютер основные ресурсы с нее: картинки, стили, скрипты и пр. И при следующем открытии той же страницы, она у вас уже загрузится в разы быстрее, так как браузеру нет необходимости лишний раз скачивать ресурсы сайта — они лежат уже у вас на компе.
Но у кэширования есть и минусы — если файл на сервере изменился, то у вас скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем img01.jpg содержал в себе изображение автомобиля. Вы зашли на сайт, почитали статью и вышли. Но администратор сайта почему-то решил, что картинка автомобиля там неуместна, и решил заменить ее на картинку с пейзажем. Но название файла осталось то же. Через пару дней вы решили еще раз прочитать ту статью. Когда вы зашли на сайт, картинка у вас осталась старая — автомобиль. Это потому, что браузер ее закэшировал с таким названием img01.jpg. И чтобы у вас отобразилась уже новая картинка с пейзажем, вам нужно сбросить кэш браузера комбинацией клавиш Ctrl+F5.
Настройка htaccess
Теперь перейдем от лирических отступлений к основной теме статьи. Для того, чтобы включить кэширование браузером, на вашем сервере в корне сайта должен лежать файлик .htaccess. Если такового нет, вам нужно его создать.
После чего в нем прописываются следующие директивы:
<IfModule mod_expires.c>
<FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresActive on
ExpiresByType image/jpeg "access plus 7 day"
ExpiresByType image/gif "access plus 7 day"
ExpiresByType image/png "access plus 7 day"
<FilesMatch \.(css|js)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
Прописав данные правила, Google Page Speed пометит галочкой, что кэширование включено, и начислит вашему сайту дополнительных баллов.
P.S. Хочется отметить одну вещь, что кэширование, к сожалению, не распространяется на внешние ресурсы, такие как скрипты Яндекс.Метрики и Google.Analytics
27324 просмотра
Март 21, 2015
alittlebit.ru
Включаем кеш браузера на стороне пользователя
👁11 494 просм.
В этой статье продолжаем рассматривать как можно ускорить загрузку сайта. Ранее мы обсудили Как включить gzip сжатие и ускорить загрузку сайта. Сегодня узнаем как включить кеш браузера на стороне пользователя при помощи файла .htaccess .
Зачем включать кеш браузера на стороне пользователя
Зачастую при создании нового сайта программисты не особо уделяют внимание скорости загрузки сайта браузером. Особенно если на этот пункт не было сконцентрировано внимание в Техническом Задании для разработки сайта. И после выхода нового творения в свет, веб-специалист, который занимается развитием и продвижением данного проекта может наблюдать очень печальную картину, просканировав сайт на скорость загрузки в PageSpeed Insights от Google.
Вот далеко не полный список проблем, с которыми мы можем столкнуться, и которые замедляют скорость загрузки сайта на стороне браузера пользователя:
И одна из рекомендаций сервиса PageSpeed, как раз необходимость включить кеш браузера.
Некоторые из читателей могут задаться вопросом, а собственно зачем нужно включать этот кеш, и ускорять скорость загрузки сайта? Ведь сайт и так не плохо работает.
А причины для этого как минимум две:
- Если сайт долго загружается, то пользователь может не дождаться ваших супер эффектов, задуманных дизайнером для привлечения внимания, а просто закроет ваше творение искусства и попросту перейдет на сайт конкурентов, возможно менее красочный, но более быстрый и отзывчивый. Ведь никто из нас не любит долго ждать. 🙂
- Чем дольше скорость загрузки сайта, тем ниже его будут выдавать поисковые системы по ключевым запросам, относительно сайтов ваших конкурентов. А это уже существенная угроза развитию вашего бизнеса.
Как включить кеширование файлов в браузере на стороне пользователя
Если ваш проект разработан на популярной CMS WordPress, то есть множество плагинов, позволяющих решить проблему кеширования. Самые популярные из них W3 Total Cache, WP Super Cache, Hyper Cache. Но в этой статье я предлагаю рассмотреть более надежный, по моему мнению, способ включения кеширования через файл .htaccess непосредственно на хостинге.
Обратите внимание, что предлагаемые методы будут работать только в том случае, если на сервере вашего хостинг-провайдера установлено ПО Apache.
Перед выполнением любых изменений в файле .htaccess обязательно сделайте его резервную копию себе на компьютер, для того чтоб можно было его восстановить, если что то пойдет не так.
Для того, чтоб включить кеш браузера на стороне пользователя, достаточно использование какого — то одного из указанных ниже методов. Использование двух методов одновременно не целесообразно и может привести к нарушению работоспособности вашего сайта.
Включение кеширования в браузере на стороне пользователя при помощи модуля mod_headers
Для включения функции кеширования приведенный ниже код надо вставить в файл .htaccess, который расположен в корневом каталоге вашего сайта. Во избежание появления ошибок, вставлять код нужно перед строчкой # END WordPress:
# Включение кеша в браузерах посетителей сайта <ifModule mod_headers.c> # Все html и htm файлы будут храниться в кеше браузера 12 часов <FilesMatch «\.(html|htm)$»> Header set Cache-Control «max-age=43200» </FilesMatch> # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней <FilesMatch «\.(js|css|txt)$»> Header set Cache-Control «max-age=604800» </FilesMatch> # Все флеш файлы и изображения будут храниться в кеше браузера 31 день <FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»> Header set Cache-Control «max-age=2592000» </FilesMatch> # Отключаем кеширование php и других служебных файлов <FilesMatch «\.(pl|php|cgi|spl|scgi|fcgi)$»> Header unset Cache-Control </FilesMatch> </IfModule>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | # Включение кеша в браузерах посетителей сайта <ifModule mod_headers.c> # Все html и htm файлы будут храниться в кеше браузера 12 часов <FilesMatch «\.(html|htm)$»> Header set Cache-Control «max-age=43200» </FilesMatch> # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней <FilesMatch «\.(js|css|txt)$»> Header set Cache-Control «max-age=604800» </FilesMatch> # Все флеш файлы и изображения будут храниться в кеше браузера 31 день <FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»> Header set Cache-Control «max-age=2592000» </FilesMatch> # Отключаем кеширование php и других служебных файлов <FilesMatch «\.(pl|php|cgi|spl|scgi|fcgi)$»> Header unset Cache-Control </FilesMatch> </IfModule> |
Что означаю те, либо иные дерективы я описывать не буду. Более подробно с их значениями можно ознакомиться на сайте с официальной документацией по Apache.
Включение кеширования в браузере на стороне пользователя при помощи модуля mod_expires
Для включения кеширования в браузере на стороне пользователя при помощи модуля mod_expires прописываем в файле .htaccess следующий код:
<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 30 секунд ExpiresDefault «access plus 30 seconds» # Включаем кеширование изображений и флеш на 1 месяц ExpiresByType image/x-icon «access plus 1 month» ExpiresByType image/jpeg «access plus 4 weeks» ExpiresByType image/png «access plus 30 days» ExpiresByType image/gif «access plus 43829 minutes» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» # Включаем кеширование css, javascript и текстовых файлов на 7 дней ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html «access plus 43200 seconds» # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml «access plus 600 seconds» </ifModule>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 30 секунд ExpiresDefault «access plus 30 seconds» # Включаем кеширование изображений и флеш на 1 месяц ExpiresByType image/x-icon «access plus 1 month» ExpiresByType image/jpeg «access plus 4 weeks» ExpiresByType image/png «access plus 30 days» ExpiresByType image/gif «access plus 43829 minutes» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» # Включаем кеширование css, javascript и текстовых файлов на 7 дней ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html «access plus 43200 seconds» # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml «access plus 600 seconds» </ifModule> |
В данном коде вы можете заменить зна
web-specialist.info