Настройка кэширования определенным элементам сайта на Apache2

Ускоряем сайт до космической скорости

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

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


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

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

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

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

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

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

Вот он:

ExpiresActive On
ExpiresByType text/html "access plus 10 minutes"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType text/css "modification plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"

Этот код следует размещать в самом конце файла .htaccess. Если окунуться в понимание этих строк, то станет понятно, что каждому типу файлов/элементов задается разное время хранения в кэше. Из этого примера видно, что практически все элементы сайта хранятся в кэше 1 недели с момента загрузки, а css-код 1 неделю после изменения. Также html-код храниться 10 минут с момента модификации (если браузер посетителя зашел на ваш сайт и дата обновления контента отличается от того, что уже загружено в кэше, или с того момента уже прошло 10 минут, то информация грузиться по-новой).

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

P.S. Многие спросят почему хранить кэш я решил только неделю? Я давно читал какой-то доклад специалиста Google, где говорилось о том, что такие элементы следует хранить не менее 1 недели. Эта цифра запала в голову и теперь красуется почти на всех моих сайтах в файле .htaccess.

Теги: и

Комментарии

Граватар пользователя «Andrey»
Andrey, 19 декабря 2012 г. 13:26 #

Интересное решение с помощю .htaccess, нужно будет взять на вооружение. Хотя, думаю того же результата можно добится и с помощю изминения/указания HTTP-заголовков функцией header()
Но бывают и прямопротивоположные задачи, в частности нужно не кэшировать определенный елемент на странице, например “случайное фото”. Какие могут быть решения в таком случае?

Граватар пользователя «legk»
legk, 21 сентября 2015 г. 05:48 #

Поставил. Сразу же Internal Server Error – ошибка 500
Жаль…

Граватар пользователя «Владимир»
Владимир, 7 января 2016 г. 22:32 #

Для тех, у кого показывает ошибку 500.
Указанную конструкцию следует включать в следующую:

<IfModule mod_expires.c>

ExpiresActive On … (далее по инструкции)

</IfModule>

Граватар пользователя «Мухаммад»
Мухаммад, 16 октября 2020 г. 14:05 #

Тоже интересно узнать. Бывает нужно оставить блок (цена товара) без кеширования.




В качестве аватарки используется сервис - gravatar.com



IT-событие
Основание Adobe
Основание Adobe
Оглавление
  1. Комментарии