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

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

В предыдущий раз я описал способ сжатия 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.

P.S.S. Кто-то не знает, но, вообще, грамотное создание web сайта – это серьезный процесс, который требует от вебмастера определенных знаний и опыта, который приходит только с собственными шишками, полученными во время бессонных ночей.

Комментарии:

  1. Andrey опубликовал комментарий 19 Декабрь 2012, 13:26 #

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

    | Ответить
  2. legk опубликовал комментарий 21 Сентябрь 2015, 06:48 #

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

    | Ответить
  3. Владимир опубликовал комментарий 7 Январь 2016, 23:32 #

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

    <IfModule mod_expires.c>

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

    </IfModule>

    | Ответить
Имя
e-mail
Сайт
Текст комментария: