Как включить кэширование браузером, рецепт для htaccess

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


  • Спасибо!Помогло!
  • На здоровье! =)
  • А работает ли это решение в комплексе с плагином WP Super Cache?
  • Да, работать должно. Так как WP Super Cache создает кэш именно на сервере (в виде файлов), тогда как .htaccess говорит браузеру, какие именно типы файлов он должен скачать к вам на компьютер. Это делается для того, чтобы потом не грузить их снова с сайта, а загрузить их из своего кэша на вашем устройстве.
  • Странно но нечего не помогает...
  • Светлана, не на всех хостингах, увы, есть возможность изменять настройки сервера Apache через .htaccess Если же у вас VPS/VDS, то кэширование вы можете настроить непосредственно в конфигурационных файлах.
  • Спасибо, помогло.
  • Всегда пожалуйста!
  • А если необходимо выставить для определённых js другое время, как быть?
  • Извините, но я не поняла как WP Super Cache настроить для кэширование браузера .Уменя с этим плагином, что -то ни чего не кэшируется. Делаю анализ сайта, а он мне пишит настройте кеш браузера. Помогите как это сделать? Мой сайт http://saitkyrort.ru
  • ТАкая же ситуация (((Извините, но я не поняла как WP Super Cache настроить для кэширование браузера .Уменя с этим плагином, что -то ни чего не кэшируется. Делаю анализ сайта, а он мне пишит настройте кеш браузера. Помогите как это сделать? Мой сайт http://ammms.ru/