» » » Как включить кэш браузера на стороне пользователя
logotip

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

Всем привет! Сегодня на seo-mayak.com я продолжу разбирать рекомендации PageSpeed по ускорению загрузки сайта и расскажу, как включить кэш браузера на стороне посетителя Вашего сайта.

Многие веб-мастера используют для кэширования данных различные кэш-плагины. Самые популярные из них: W3 Total Cache, WP Super Cache и Hyper Cache.

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

Признаюсь, что на поиски «иного средства» я потратил не мало времени, так как большинство статей на данную тему поверхностны, что вызывало у меня еще больше вопросов.

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

kesh brauzera

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

Постепенно приходило понимание, что прежде всего мне необходимо разобраться в модулях Apache (популярное серверное ПО), к которым и происходит обращение через файл .htaccess. Как говориться, чем дальше в лес, тем больше дров.

Я не переставал поражаться, сколько знаний должен иметь веб-мастер, чтобы самостоятельно вести и обслуживать свой проект. Все конечно знать невозможно, но к этому надо стремиться. Поехали!

Модули Apache: mod_headers и mod_expires

Прежде всего надо выяснить, какое ПО используется на Вашем хостинге. Как Вы наверное уже догадались, обращение к модулям mod_headers и mod_expires будет работать только в том случаи, если на серверах Вашего хостинг-провайдера установлено ПО Apache.

Данные модули не входят в стандартную сборку Apache и необходимо уточнить в службе поддержки хостинга, установлены ли mod_headers и mod_expires на сервере. Если таковые имеются, то можно приступать к написанию директив.

Модули mod_headers и mod_expires способны встраивать в ответ сервера специальные заголовки Cache-Control или Expires, которые укажут браузеру на стороне посетителя, какие файлы и на какое время надо кэшировать.

Важно! Для того, чтобы включить кэш браузера на стороне пользователя достаточно написать директивы только для одного из модулей. Обращение к mod_headers и mod_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/jpegtext/html или application/x-javascript. Все типы файлов можно посмотреть здесь.

В заключение хочу сказать, что существуют и другие способы кэширования. Кэш объектов можно организовать с помощью функций WordPress или с помощью сторонних серверов Memcached, APC или Redis.

Конечно в  будущем я не обойду вниманием и эти темы, так что подписывайтесь на обновления блога, будет интересно!

До встречи!

С уважением, Виталий Кириллов

« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« PageSpeed — реальное ускорение сайта
« Как включить gzip сжатие и кратно ускорить сайт
« Как сократить CSS и ускорить загрузку сайта

(следующая статья)

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

  1. Анна:

    Спасибо, Виталий! Вы такой молодец! Я пользовалась плагином Гипер Кэш, но теперь удалю!

    Ответить
    • Виталий Кириллов:

      Спасибо Анна! Если возникнут вопросы по теме, всегда готов помочь.

      Ответить
      • Анна:

        Здравствуйте, Виталий! У меня на хостинге используется связка ngnix+Apache. Как я поняла из комментариев в таком случае ваши рекомендации не будут работать?

        Ответить
        • Виталий Кириллов:

          Здравствуйте Анна! Я в и статье упомянул, что данные директивы подходят только для серверов на ПО Apache.

          Ответить
          • Анна:

            А что вы посоветуете в таком случае? Оставить плагин?

            Ответить
            • Виталий Кириллов:

              Анна, плагин организует кеширование на уровне самого WordPress. Я сейчас изучаю данную тему, возможно в будущем разработаю безплагинный вариант, а пока оставьте плагин.

              Ответить
              • Анна:

                Спасибо, Виталий! Буду ждать.

                Ответить
  2. Андрей:

    Благодарю за проделанную работу по выявлению того, что нужно вписать в .htaccess для кеширования без плагинов.
    А что будет со скоростью загрузки страниц, со сервером (сайтом), если не удалять активированный «Гипер кеш»? Т.е. помимо работы плагина еще и добавить строки вышеуказанные в файл htaccess? =)

    Ответить
    • Виталий Кириллов:

      Не пойму, чего вы хотите добиться.

      Ответить
      • Андрей Курасов:

        Интересно, что у меня возникла такая же мысль. Попробую перефразировать.
        Я могу ошибаться, но как я понимаю, слово «Cache» в названиях вышеупомянутых плагинов — не более чем использование привычного на слух и НЕ по назначению слова ассоциируемого со сжатием данных.
        Опять же, насколько я понимаю, такие плагины заранее создают полностью готовые копии для всех страниц сайта и держат их в папке домен.ru/cache,а при запросе пользователя пересылают ему сразу готовую страницу, а не лезут в файлы шаблона верстать её через php и запросы к базе данных, как это делает сам вордпресс.
        А директивы в .htaccess заставляют браузер клиента запоминать картинки,скрипты, css и т.д.

        Предположение:

        1.) По меньшей мере, плагин и директива в .htaccess не должны мешать друг другу.
        2.) Дополнительное использование плагина снижает нагрузку на сервер из-за уменьшения запросов к файлам шаблона и базе данных MySQL
        3.) Как разрешается конфликт, когда файлы в кеше браузера отличаются от кешированной (архивированной) копии веб-страницы, которую прислал плагин?

        Интересно мнение участников на эту тему.

        Ответить
        • Виталий Кириллов:

          Нет Андрей, кеш и сжатие совершенно разные понятия. С первыми двумя пунктами второго Вашего предположения я в частично согласен, Но! Принцип кеширования у разных плагинов отличается. Одни кешируют страницы целиком, другие применяют принцип объектного кеширования. Смотря какие плагины использовать…

          Ответить
  3. Евгений:

    Не срабатывает открытие кода в отдельном окне в Хроме. В Сафари сработало.

    Ответить
  4. Андрей:

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

    Ответить
    • Виталий Кириллов:

      Андрей, я плагинами вообще не пользуюсь и как видите со скоростью на моем блога все в порядке. Если Вы используете плагин кэширования, то не вижу смысла дополнительно задавать временные рамки кэша через модули Apache. Хотя можете попробовать, так сказать, провести эксперимент.

      Ответить
  5. Андрей:

    Понятно Виталий! Поекспеременитрую, потом отпишусь. А статья полезная. Здесь как вариант по организации кеширования, если какая-нибудь другая CMS не поддерживает готовых плагинов/модулей и примочек для кеширования из-под себя же.

    Ответить
  6. Александр CookieSeo:

    Не пойму, а чем плох плагин W3 Cache, например?
    Если он хорошо справляется со своей задачей.

    Ответить
  7. Максим:

    А как понять, заработало или нет? Код установил, вот только PageSpeed Insights продолжает вещать, что нужно исправить по возможности: Используйте кэш браузера

    И кучу картинок показывает с комментарием (не указан срок действия)

    Ответить
    • Виталий Кириллов:

      Максим, а Вы уверены в том, что данные модули установлены на сервере?

      Ответить
      • Максим:

        Сегодня тех поддержка необщительная, поэтому не уверен. Рекомендовали мне поставить плагин 🙁

        Ответить
  8. Николай:

    Спасибо за инфу!
    Есть вопрос — проверил Ваш блог на PageSpeed Insights, скорость 82/100, но все же рекомендует включить кэш браузера по возможности. От чего так? Почему не видит кэширование?

    Ответить
    • Николай:

      Сейчас посмотрел свой файл .htaccess и обнаружил, что рекомендуемые коды уже есть, но записаны после # END WordPress
      # кеширование в браузере на стороне пользователя

      ExpiresActive On и тд. А скорость низкая и рекомендует включить кэширование.
      Может другой вариант попробовать или обратиться к службе поддержки хостинга?
      Спасибо!

      Ответить
  9. Valeriy:

    Сразу скажу, читал статью поверхностно, но насколько я понял сдесь говориться как настроить кеш браузера на Апаче, а как у Вас настроено? у Вас же Nginx?

    Ответить
    • Виталий Кириллов:

      Valeriy, у меня есть сайт на сервере с ПО Апач, а на данном блоге вообще не стоит кэширование, так как в Nginx кэширование настраивается непосредственно на стороне сервера.

      Ответить
      • Valeriy:

        Очень интересно! А вот от сюда по подробней, то есть никакие плагины кеширования и минификации не нужны на сайте под Nginz? И какие способы для ускорения работы сайта можно применять для данного сервера?

        Ответить
        • Виталий Кириллов:

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

          Ответить
          • Valeriy:

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

            Ответить
            • Виталий Кириллов:

              Можно, но для этого надо знать PHP. В будущем будет статья на тему функций кэширования.

              Ответить
  10. Александр:

    Здравствуйте Виталий! Выполнил ваши рекомендации. Несколько серверов успокоились и сообщили что кэширование включено. Но тест на tools.pingdom.com выдал сообщение, что кэш не включен и что у меня оказывается сервер Nginx. Вопрос как теперь включить кэширование в браузере.

    Ответить
  11. Юрий:

    Вот мой htaccess
    # BEGIN WordPress

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ — [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]

    # END WordPress
    добавляю ваш код и ничего не меняется
    PageSpeed Insights как было 74% так и осталось

    Ответить
  12. Иван:

    Классное обьяснение, и главное что есть уже готовая запись, я и сжатие на сервере включил по руководству с этого блога.
    Молодец.

    Ответить
  13. Денис:

    Здравствуйте Виталий. А подскажите как сделать кэширование для лендинга не через файл .htaccess, как будет выглядеть этот код и в какое место на сайте его надо вставить ??? мой сайт спс.

    Ответить
  14. Олеся:

    Изменила свой файл .htaccess , добавив в него код для модуля mod_headers , перед этим уточнив на своем хостинге информацию о том, что они поддерживают данные модули. После проверки pagespeed, ошибка «Используйте кэш браузера» переместилась из раздела «Исправьте обязательно» в раздел «Исправьте по возможности», при нажатии на «как исправить» открываются вот такие ссылки
    counter.24log.ru/buttons/25/bg25-6_1.gif (не указан срок действия)
    counter.24log.ru/buttons/25/bg25-6_2.gif (не указан срок действия)
    counter.24log.ru/buttons/25/bg25-6_3.gif (не указан срок действия)
    st.ad.lcads.ru/js/adv_teasers.js (60 секунд)
    st.ad.lcads.ru/js/fc.js (60 секунд)
    pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 минут)
    pagead2.googlesyndication.com/pagead/osd.js (60 минут)

    Я так понимаю, что это счетчик статистики 24log и реклама тизернета и гугла, которые установлены на моем сайте.

    Как их исправить?

    Ответить
    • Виталий Кириллов:

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

      Ответить
    • Владислав:

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

      Ответить
  15. Сергей:

    Спасибо сделал и все получилось. Автор молодец. Добавил блог в закладки, так как начинающий еще.Буду учиться.

    Ответить
  16. Алексей:

    подскажите как использовать кеш браузера только для mc.yandex.ru/metrika/watch.js ? Спасибо!

    Ответить
    • Виталий Кириллов:

      Счетчики не кешируются.

      Ответить
  17. Артём:

    Добрый день! Виталий в первую очередь хочу поблагодарить вас за действительно полезные и качественные материалы блога. Видно что ко всему относитесь с ответственностью и знанием дела. Теперь, что касается вопроса, я так понимаю, что так как на хостинге используется nginx+apache, прописываемые правила в .htaccess для mod_expires не будут срабатывать, пока статичные файлы раздаёт nginx.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Артем! Со связкой nginx+apache вообще многие команды не проходят, самое главное и на хостинге вразумительного ответа дать не могут. Может просто в службе нет людей которые могут нормально объяснить причину. Мне ответили, что при ПО nginx время кеша задается на самом сервере, хотя я слышал, что можно как-то команды прописывать в .htaccess, но сам я в эти «дебри» еще не забирался. Попробуйте со своей стороны пообщаться со службой поддержки, может Вам дадут внятные инструкции.

      Ответить
  18. Елисей:

    Я прошу всё это сделать в виде дополнения или программы. Чтобы кэш брался из программы.

    Ответить
  19. Михаил:

    Почему этот код вставляется именно перед # END WordPress а не в любом месте файла .htaccess ? он не будет работать? на сколько я знаю, все свои дописки в этот файл производятся уже после стандартной ворпрессовской записи

    Ответить
    • Виталий Кириллов:

      Это по желанию, я так написал во-избежании лишних вопросов от новичков, но как видимо просчитался)

      Ответить
  20. Мария:

    Спасибо большое за помощь в кешировании браузера, еще одну галочку убрала с рекомендации PageSpeed Insights. Очень все доступно.

    Ответить
  21. Денис:

    У меня не включается кеш таким образом…Помогите плиз..

    Ответить
  22. Oleg:

    Кеширование работает.
    Но если я хочу грузить картинки и все остальное из под домена, то кешь не работает. Он только кеширует то что лежит в корне сайта.
    Как настроить .htaccess что бы он кешировал файлы которые загружаются из под домена?

    Ответить
    • Андрей:

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

      Ответить
  23. Илья:

    Спасибо, просмотрел несколько инструкций в интернете. Ваша статья краткая и по делу — то что надо.
    Делал для сайта на Joomla — все работает.

    Ответить
  24. Вера:

    У меня хостинг использует оба этих модуля. Посоветуйте, к какому лучше прописать код? Что эффективней?

    Ответить
    • Виталий Кириллов:

      Да любой можно.

      Ответить
  25. Олег:

    Спасибо, действительно помогло! От плагина отказался! Боброты Вам!)

    Ответить
  26. Андрей Курасов:

    mod_expires тоже необходимо вставлять перед строчкой # END WordPress или можно после?
    Насколько я знаю между #Begin WordPress и #END WordPress лишний раз лучше ничего не помещать, так как в этом случае при обновлении вордпресса стираются всё изменения в файле .htaccess.

    Ответить
    • Виталий Кириллов:

      Андрей, по моему файл .htaccess на затрагивают изменения WordPress, также как и robots.txt, а все что идет после знака # то обычный комментарий. Хотя вы меня заставили засомневаться в точности моих знаний. Если не трудно, дайте ссылочку почитать по теме.

      Ответить
      • Андрей Курасов:

        Через некоторое время после обновление wordpress’а (или какого-то и плагинов) я обнаружил, что .htccess стал полностью чистым (остались только те строчки, которые в нём создаются при активации wordpress’а, а все мои директивы типа 301 редиректа на без www и т.д. пропали).

        Начал гуглить и наткнулся на мнение mywordpress.ru/support/viewtopic.php?id=19657 : «Обычно достаточно не писать свои инструкции внутрь блока # BEGIN WordPress … # END WordPress.»

        На всякий случай переписал все директивы (кеширование я не включал) после # END WordPress — директивы работают, файл при обновлении не стирается, а тестировать, сотрётся ещё раз или нет, я не стал:)

        Ответить
        • Виталий Кириллов:

          Мнение конечно интересное, такого я раньше не слышал)

          Ответить
          • Андрей Курасов:

            Чтобы не рисковать, попросту включил кеширование через mod_expires — вставил в конец .htaccess перед закрывающим тегом — всё работает.

            P.S. Уже с месяц поглядываю на рекомендацию PageSpeed о включения кеширования библиотеки Jquery на час (ajax.googleapis.com/…ax/libs/jquery/1/jquery.min.js?ver=4.2.2 (60 минут)), думаю, всем выдаёт такую строчку.

            Долго гуглил, решения не нашёл.
            Есть у кого идеи?

            Ответить
  27. Вероника:

    Отличная статья!!! Огромное спасибо! Благодаря вашему опыту можно не тратить часы в поисках истины! Очень доступно и подробно! Еще раз спасибо!

    Ответить
  28. Витя:

    Спасибо за примеры. Скорость сайта выростает сильно!

    Ответить
  29. Сергей:

    Если я правильно понял, то если сервер поддерживает модули mod_headers и mod_expires, то нужно только скопировать модуль и вставить его в файл .htacces. Предпочтительней модуль mod_expires Всё верно?

    Ответить
  30. Антон:

    Огромное спасибо. Внедрил мод-хидерс на своем сайт, скорость сайта подскочила почти в 2 раза! Все работает как надо.

    Ответить
  31. inforkomp:

    Спасибо за полезную информацию. А если на сервере стоит связка ngnix+Apache и есть установленные модули то этим способом сайт будет кэшироваться или нет?

    Ответить
    • Виталий Кириллов:

      Нет, к сожалению на связке ngnix+Apache метод не работает.

      Ответить
  32. Gregoryll:

    Статья отличная, я даже пошел дальше pagespeed и gzipсжатие. Кзипсжатие сработало отлично, свои файлы css и js я тоже оптимизировал. Но с этой страницы я взял mod_headers Судя по последнему комменту этот метод не работает. На pagespeed проценты как были так и остались, 80. А как тогда быть? Кэшировать-то как-то надо. Ставил плагин hypercache — сайт просто не работает, на плагине supercache — не поймешь — то ли работает он, то ли не работает… Короче, засада… Есть идеи на этот счет?

    Ответить
  33. Денис:

    Здравствуйте!
    Подскажите, встречались ли Вы с такой проблемой: файл акссесса просто не воспринимается. Чтобы я не прописывал в него, работает только то, что может уронить сайт.
    Кеш не работает.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Многое зависит от ПО сервера.

      Ответить
  34. Ринат:

    Спасибо за код «директивы кэширования для модуля mod_headers» Изначально при проверке на сервисе tools.pingdom.com выдавало время 4-5 сек, что очень ужасно. Хотя хостера просил установить кеширование браузеров и он кстати установил, но немного другой. А как поставил ваш, так стало показывать 1-2 секунды, что в 2-3 раза меньше затрачивает время.
    Только вот в developers.google.com упали пункты, но это не страшно, будем исправлять.

    Ответить
  35. Lucky:

    Здравствуйте.
    Прочитал статью, написал хостингу, сказали что у меня связка nginx+apache, решил что лажа и начал искать другие способы.

    Другие способы не подошли, решил спросить у хостера как включить кеш браузера, если на хостинге стоит nginx+apache.

    Ответили что используя mod_expires, прописал и все гуд!

    Спасибо автору за труды!

    Ответить
  36. Lucky:

    Хотел еще спросить.
    Как решить проблему с граватарами в комментах? гугл ругается и просит включить кеширование для них и указывает что на них стоит 5 минут. Что он имеет ввиду, что это мало или много?

    Вот скрины прикрепил:

    Ответить
    • Виталий Кириллов:

      Здравствуйте! У меня такая же проблема, пока не решил ее.

      Ответить
      • Lucky:

        Ох, очень жду ответа, было бы отличное дополнение к статье. Если сам найду, обязательно отпишу Вам.

        Ответить
  37. Елена:

    Спасибо за статью. Включила у себя кэш и скорость загрузки увеличилось на 15%.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Елена! Я рад, что у Вас все получилось.

      Ответить
  38. Алексей:

    Так как включить кеш в связке nginx+Apache, кто решил задачу скинте адрисок с мануалом!

    Ответить
  39. Елена:

    Добрый день!
    Поставила плагин Супер кэш ввиду того, что мне легче в болото, кишащее крокодилами, влезть:) нежели в код, но данный плагин не киширует браузеры! Зачем же он нужен тогда?! Сжатие мне делает хостинг провайдер автоматом, через сервис проверяла — все так! Но у меня сейчас идея фикс:) включить браузерное кэширование. Что же это за суперкэш, если он основное не делает? и зачем он тогда нужен?!
    Еще интересный момент: сдуру я закачала на сайт картинки по 5 мб каждая в среднем, потом поняла что наделала:( и поставила самый популярный плагин сжимающий, с логотипом панды:) Так вот: сайт показывает что все ок, картинки сжаты, а прогнала сайт по сервисам проверочным — никаких изменений не зафиксировано! Как весили страницы по 6 мб в среднем, так и весят:(

    Ответить
  40. Александр Каратаев:

    Спасибо за очень полезную информацию. Я тоже перебрал уже несколько плагинов кеширования, как известных, так и малоизвестных, но ни один из них не давал такого результата в PageSpeed Insights, как хотелось бы. Удалил плагины и хотел уже сам прописать в .htaccess нужные директивы и как раз в этот момент попал на Вашу статью.
    Вставил Ваш код без изменений и всё отлично работает, PageSpeed Insights сразу поместил десктопный вариант в зелёную зону, чего не происходило при использовании плагинов.
    И кстати, у меня как раз и есть связка ngnix+Apache. Я знал, что в таком варианте mod_expires.c не работает и некоторое время назад лопатил Сеть в поисках решения.
    Тут в комментах об этом вопросы задают, просят ссылки на мануалы и т.д. А решение простое, пишете в техподдержку хостинга и они включают кеширование на стороне ngnix. После этого всё работает. Так и произошло в моём случае.

    Ответить
    • Виталий Кириллов:

      Спасибо за комментарий Александр!

      Ответить
    • Сергей:

      Не самый лучший вариант, на хостинге и руками можно настроить в стандартных панельках, но я упёрся в лимит хоста 99 часов, а это мало. Выставлял как-то в файлах сайта 1 год, но не могу найти где и как я это делал…

      Ответить
      • Сергей:

        Вспомнил, ваш вариант не работает на apache+nginx. Для тех у кого, та же проблема переведите на хосте сайт в режим ручного управления, тогда у вас появятся доп папки в панели файлового менеджера при заходе с хоста типа с файлом site.conf. Дальше поиск по запросу expires и ставим expires 30d (30 дней или неделю, год… как хотите).
        location ~* ^.+\.(jpg|jpeg|gif|swf|png|ico|mp3|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|dat|avi|ppt|txt|tar|mid|midi|wav|bmp|rtf|wmv|mpeg|mpg|mp4|m4a|spx|ogx|ogv|oga|webm|weba|ogg|tbz|js)$ {
        expires 30d;
        P.S. часто за expires при apache+nginx отвечает 2 файла, значение expires в обоих должно совпадать, при этом учитывайте их специфику, в одном может писаться expires 99h 99hour, тогда в одном пишите 30d, а в другом 30days
        Там же можно указать какие файлы кэшировать

        Ответить
        • Виталий Кириллов:

          Это наверное от хостинга зависит, не у всех есть функция режима ручного управления.

          Ответить
  41. Санька:

    Есть все а счастья все нет=)
    В общем осталось именно вот что:
    Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.

    Используйте кеш браузера для следующих ресурсов:
    Ну тут 4 ссылки в том числе и на яндекс метрику
    А в конце каждой ссылки кроме метрики пишет вот что: НЕ УКАЗАН СРОК ДЕЙСТВИЯ
    Ваш вариант пробовал, результат тот же… Как без плагинов, а главное где этот срок действия указывается? Это последнее что мне осталось исправить. Заранее спасибо.

    Ответить
    • Виталий Кириллов:

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

      Ответить
  42. Андрей:

    Доброго времени!
    А как удалить кеш на стороне клиента, если там в .htaccess стоит срок жизни картинок месяц?

    Ну к примеру какие-то правки произвести в стилях сайта, или иконку, лого поменять, то получается пользователь не увидит изменений в лого, пока не очистит свой кеш, или не нажмёт Ctrl+5 ?

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Можно просто временно удалить директивы.

      Ответить
      • Андрей:

        Видите как оказалось… Благодарю за ответ.

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

        Ответить
    • Сергей:

      если у тебя CMS (joomla, wordpress и т.д.) то в админке сайта есть функци очистки кэша, в таком случае сразу ка клиент обновит страничку или зайдёт на ваш сайт снова он увидит все изменения.

      Ответить
  43. Санька:

    Приветствую всех. В общем перепробовал тьму вариантов с htaccess, но, увы, результат нулевой. Хотя уже довёл большинство страниц до 98% по мобильному трафику. А вот кеширование никак не могу настроить хоть убейся… Вот к примеру: wp-content/uploads/2016/02/images.jpg (не указан срок действия), /uploads/2016/02/ochiwenie_organizma.png (не указан срок действия). Используйте кеш браузера для следующих ресурсов. А как его использовать не могу понять. Перерыл уже тьму сайтов, но ничего толком не нашёл. Нашол один более-менее толковый совет «Если в списке нет mod_expires или mod_headers — выполните в консоли сервера (подключившись по ssh) по очереди следующие команды (это установит/включит mod_expires, mod_headers)». Но как попасть эту самую консоль понятия, не имею… Человек, что рекомендует этот «толковый» способ кеширования, видимо офлайн, так как связаться пока не получилось (но я все пытаюсь выйти с ним на связь). В описании он говорит, что мол должны быть установлены модули специальные. Я проверил, по его совету, вроде установлены, но кеширование не работает (или работает частично, тоже фиг поймешь). В общем вопрос всё еще актуальный. Если кто найдет способ, поделитесь, не жлобитесь=). Ну а я продолжаю искать…

    Ответить
    • Сергей:

      Если модули включены поставь сайт в ручной режим на хосте, найти тоталом сроки
      location ~* ^.+\.(jpeg|gif|swf|png|ico|mp3|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|dat|avi|ppt|txt|tar|mid|midi|wav|bmp|rtf|wmv|mpeg|mpg|mp4|m4a|spx|ogx|ogv|oga|webm|weba|ogg|tbz|js)$ {
      и допиши через вертикаль png и jpg (последний у меня был по умолчанию). следующая срока типа:
      expires 30d;
      указывает насколько времени кэшировать (я поставил месяц)+ посмотри мой пост выше по коментам

      Ответить
    • Александр Каратаев:

      А мой коммент выше Вы не читали? Я там писал: «А решение простое, пишете в техподдержку хостинга и они включают кеширование на стороне ngnix. После этого всё работает. Так и произошло в моём случае.»
      Если у Вас нет доступа к настройкам сервера, а скорее всего нет, то самое простое — написать в техподдержку, они сами сделают что надо.

      Ответить
  44. Санька:

    Да был бы я таким мудрым… Я б поставил, а коль я «олень» даже не знаю как поставить в ручной режим… Ну да ладно, собственно так и учимся=). Спасибо, буду работать в этом направлении.

    Ответить
    • Сергей:

      спроси у хостера как редактировать эти модули, он должен выслать инструкцию как к ним добраться

      Ответить
  45. Санька:

    Да не, я пишу, в тех поддержку, но местами там так тупят, пока им объяснишь что от них требуется… Задали вопрос, а зачем мне это надо. Я им объясняю, что хочу сайт оптимизировать, чтоб скорость и всё такое. А мне в ответ, а что у вас проблемы с сайтом? В общем «туговатая» у меня поддержка. Ну ничего я упрямый, я их заставлю включить мне всё что мне надо, (надеюсь). Спасибо за поддержку вашу, реально помогает, хоть разбираться начинаю в этих тонкостях.

    Ответить
  46. Николай:

    здравствуйте, Виталий! Спасибо большое за такое качественно разъяснение и хороший пример. Возник вопрос: как прописать в htaccess кэширование для определенных сайтов? pagespeed говорит что нужно установить кэширование для следующих страниц

    http://connect.facebook.net/en_US/fbevents.js (20 минут)
    https://mc.yandex.ru/metrika/watch.js (60 минут)
    http://www.google-analytics.com/analytics.js (2 часа)
    http://www.google-analytics.com/ga.js (2 часа)

    Ответить
    • Виталий Кириллов:

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

      Ответить
  47. Дарья:

    Огромное спасибо, данная статья позволила сэкономить существенное количество времени.

    Ответить
  48. Ирина:

    Огромное спасибо!

    Кэширование и сжатие моего сайта сделано! Просто отличный у вас сайт! Спасибо!

    Ответить
  49. Виктория:

    Здравствуйте, Виталий!
    PageSpeed Insights говорит, что для всех кешируемых ресурсов нужно обязательно указывать один заголовок из пары Expires и Cache-Control max-age, а также один заголовок из пары Last-Modified и ETag.
    Благодаря вашей статье удалось наладить кеширование с помощью Cache-Control max-age, а как быть с Last-Modified и ETag? Что посоветуете и как это реализовать?

    Ответить
  50. Ира:

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

    Ответить
  51. андроид:

    Ничего не получилось((

    Ответить
  52. Сергей:

    Спасибо за инфу

    Ответить
  53. Розовый жемчуг:

    Автор, большое спасибо! Твой код действительно помог мне включить кеш, наконец-то google pagespeed дал мне 86 баллов вместо 64.

    Ответить
  54. Александр:

    Добрый день! Запустил данный код у себя на сайте. Срабатывает не все. Можно как-то добавить туда дополнительные расширения?

    Ответить
    • Виталий Кириллов:

      Кеш можно включить только для файлов с Вашего сайта. На файлы со сторонних ресурсов кеш не распространяется.

      Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS