Используйте кэш браузера nginx

Используйте кэш браузера nginx

Что такое кэш браузера?

  • htaccess кэширование сохраняет содержимое веб-страницы на локальном компьютере, когда пользователь посещает ее;
  • Использование кэша браузера – веб-мастер дает указания браузерам, как следует рассматривать ресурсы.

Когда браузер отображает веб-страницу, он должен загрузить логотип, CSS файл и другие ресурсы:

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

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

Как включить кэширование в браузере

  • Измените заголовки запроса ресурсов, чтобы использовать кэширование;
  • Оптимизируйте свою стратегию кэширования.

Изменение заголовков запроса

Для большинства людей единственный способ кэширования сайта htaccess заключается в том, чтобы добавить код в файл .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 оптимальны для большинства веб-страниц.

Метод альтернативного кэширования для .htaccess

Описанный выше метод называется «Expires», он помогает с кэшированием большинству новичков. После того, как вам станет проще работать с кэшированием, можете попробовать другой метод кэширования Cache-Control, который дает больше возможностей.

Возможно, что метод Expires не сработает на вашем сервере, в этом случае вы возможно захотите попробовать использовать Cache-Control.

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 в зависимости от типа файла.

Как работает 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» сообщает о том, что это общедоступно.

</ FilesMatch>

Эта строка кэширования через htaccess закрывает оператор и заканчивает блок кода.

Общая проблема кэширования

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

Цифровой отпечаток 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Еще не голосовали рейтинг из ХорошоПлохо Ваш голос принят

Как включить кэширование браузером, рецепт для 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

26179 просмотров Март 21, 2015

Настройка кеширования статики в Apache

Далеко не все знают, что по умолчанию в Apache кеширование отключено. Это означает, что каждый раз, когда пользователь просматривает страницу, ему приходится каждый раз скачивать все файлы сайта: и CSS, и JavaScript, и картинки. Это создает лишнюю нагрузку на сервер, расходует траффик пользователя и замедляет работу сайта. Что же сделать, чтобы этого не было? Очень просто: прописать в настройках Apache выдачу заголовков, которые позволят использовать кеширование на стороне пользователя. Делается это очень просто:

либо в файл apache2.conf, либо в .htaccess на каждом сайте прописываем следующие директивы:

<ifModule mod_deflate.c>
# Включение GZIP-сжатия для различных типов файлов: TXT, SVG, RSS, javascript
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-truetype application/x-font-opentype application/font-woff
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifModule>
<ifModule mod_expires.c>
#включение заголовка Expires, указывающего время устаревания файла
ExpiresActive On
ExpiresDefault «access plus 3600 seconds»
# по умолчанию время устаревания составляет час, но для некоторых типов файлов мы его переопределим
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»
ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds»
ExpiresByType text/css «access plus 604800 seconds»
ExpiresByType text/javascript «access plus 604800 seconds»
ExpiresByType image/svg+xml «access plus 2592000 seconds»
ExpiresByType application/x-font-ttf «access plus 2592000 seconds»
ExpiresByType application/x-font-truetype «access plus 2592000 seconds»
ExpiresByType application/x-font-opentype «access plus 2592000 seconds»
ExpiresByType application/font-woff «access plus 2592000 seconds»
ExpiresByType application/font-woff2 «access plus 2592000 seconds»
ExpiresByType application/vnd.ms-fontobject «access plus 2592000 seconds»
ExpiresByType application/font-sfnt «access plus 2592000 seconds»
ExpiresByType application/javascript «access plus 604800 seconds»
ExpiresByType application/x-javascript «access plus 604800 seconds»
ExpiresByType text/html «access plus 600 seconds»
ExpiresByType application/xhtml+xml «access plus 600 seconds»
</ifModule>
<ifModule mod_headers.c>
# Самая главная часть: выдача заголовка, разрешающего кеш определенных типов файлов
<filesMatch «\.(ico|jpe?g|png|gif|swf|svg|webp|ttf|otf|woff|woff2|eot|sfnt)$»>
Header set Cache-Control «max-age=25920000»
</filesMatch>
<filesMatch «\.(css)$»>
Header set Cache-Control «max-age=25920000»
</filesMatch>
<filesMatch «\.(js)$»>
Header set Cache-Control «max-age=25920000»

Апрель 26, 2015 12:03 пп 3 484 views | Комментариев нет

Linux, VPS | Amber

Использование mod_file_cache

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

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

Модуль работает при помощи двух директив.

Директива MMapFile

MMapFile — это директива, которая используется для создания списка файлов, которые будут перенесены в память. Это делается только при запуске сервера, потому очень важно, чтобы во время работы сервера ни один из перечисленных файлов не был изменён.

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

MMapFile /var/www/index.html /var/www/otherfile.html var/www/static-image.jpg

При запросе эти файлы будут обслуживаться из памяти.

Примечание: Если один из перечисленных файлов был изменён, перезапустите сервер.

Директива CacheFile

Данная директива открывает дескрипторы перечисленных файлов. Она составляет таблицу открытых дескрипторов и использует её, чтобы сократить время, необходимое для открытия файла.

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

Данная директива позволяет задать список файлов для кэширования, разделяя названия файлов пробелами.

CacheFile /this/file.html that/file.html another/file/to/server.html

Эти файлы будут помещены в кэш при запуске сервера.

Настройка кэширования

В данном разделе рассматриваются общие директивы и их влияние на функционирование механизмов кэширования.

В каталоге /etc/apache2/mods-available можно найти конфигурационные файлы вышеперечисленных модулей.

Настройка mod_mem_cache

Конфигурации mod_mem_cache выглядят так:

Эти директивы читаются только в случае если модуль mod_mem_cache загружен. Это можно сделать, запустив:

sudo a2enmod mem_cache
sudo service apache2 restart

Это включит mod_mem_cache и mod_cache.

CacheEnable mem /

При помощи данной строки Apache создаст кэш-память для контента, который хранится в «/» (то есть, для всего контента).

Следующие несколько строк описывают общий размер кэша и объекты, которые будут храниться в нём. Оирективы MCacheSize и MCacheMaxOjectCount задают максимальный объём кэша: первая — использование памяти, вторая — максимальное количество объектов.

MCacheSize 4096
MCacheMaxObjectCount 100

Следующие две строки указывают, какие типы данных будут кэшироваться относительно использования памяти. Стандартные настройки кэшируют объекты от 1 байта до 2 килобайт.

Настройка mod_disk_cache

Конфигурационный файл mod_disk_cache выглядит так:

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

sudo a2enmod disk_cache
sudo service apache2 restart

Можно также использовать эту команду:

CacheRoot /var/cache/apache2/mod_disk_cache
#CacheEnable disk /

Директива CacheRoot задаёт местонахождение кэшированного контента. Директива CacheEnable disk / по умолчанию отключена. Её нужно включить на виртуальном хосте.

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

CacheDirLevels 5
CacheDirLength 3

Директива CacheDirLevel задаёт количество каталогов, которое нужно создать из хеш-строки; CacheDirLength задаёт количество символов в имени каждого каталога.

К примеру, на сервере есть файл с хешем «abcdefghijklmnopqrstuvwxyz», а директивы CacheDirLevel и CacheDirLength имеют следующие значения:

CacheDirLevel 2
CacheDirLength 4

Тогда такой файл будет храниться в:

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

Использование CacheLock

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

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

Избежать подобных ситуаций можно путём создания файла блокирования — lock-файла, который будет отслеживать обновление кэша и блокировать поступление запросов на бэк-энд на некоторое время.

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

CacheLock использует три директивы:
CacheLock
CacheLockMaxAge
CacheLockPath

Первая директива включает эту функцию, а третья создаёт каталог для хранения lock-файлов.

Вторая директива, CacheLockMaxAge, задаёт максимальный срок действия lock-файла в секундах, что необходимо в случае возникновения ошибки или задержки при обновлении ресурсов.

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

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

Документация Apache содержит довольно много советов по настройке кэширования.


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

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