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

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.



Продолжая тему ускорения сайта, хочу разобраться с советом, который даёт мне в этом отношении Google: Используйте кэш браузера! Ну что же, попробуем решить!

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

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

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

# кеширование в браузере на стороне пользователя
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>
# Cache-Control
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>
# использование кеша браузеров
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>
#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE
<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

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

Люди пишут, что не все хостинги поддерживают эту функцию на уровне сервера, возможно, мой хостинг тоже. Я написал в техническую поддержку и стал ждать ответа. Ответа пока нет:(

Только что ответили, после моего ещё одного сообщения. Ответ был таков:

Доброго времени суток!

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

Ну я пока поверю, что так все оно и есть. У вас есть мысли по этому поводу? Одно из решений этой проблемы я описал в ЭТОЙ СТАТЬЕ...


Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


66 комментариев
  1. Если кэшировать текст html, то посетитель может не увидеть новые комментарии к статье в блоге или форуме.
    А вообще кэширование - дело не однозначное. Браузеры по умолчанию сами неплохо кэшируют, да так, что у некоторых иногда приходится принимать меры, чтобы не кэшировали. И разные браузеры делают это по-своему и неизвестно какие браузеры новые понасоздают для мобильных устройств, и не все поддержмвают стандарты, а все не проверишь ...
    Я когда-то пытался регулировать кэширование, да бросил это занятие в надежде на сообразительность браузеров.

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

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

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

    • У меня как оказалось хостинг все кэширует и как узнал, так снял все плагины. А вообще нужно поменьше обращать уже на это, так как сайт на голом html сегодня делать не будешь, а только он пройдет все тесты 🙂

    • Ссылка в комментарии не рабочая, есть уже в подписи. А вот делать регистрацию на сайте, как вы, я не стал, все это дыра в безопасности. Вас ещё не взламывали? У вас все впереди:)

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

        Спасибо за ссылки т.к. сам не мог объяснить программеру как это сделать т.к. и сам не знал)

        • Я знаю разницу, но почему Google требует использовать кэш браузера, если мой браузер никак не участвует в проверки скорости сайта?

  3. Статья полезная..спасибо..но у меня вопрос, а как указать срок кэша на граватар? Он стоит на срок 5 минут.. граватары все берутся с внешнего ресурса и это увеличивает запросы. Если комментариев много, то это уменшает загрузку страницы??

    • Мой простой совет - отключите граватар, как сделал я, толку от него мало, а жрет ресурсов много. Я когда проверял статьи, где много комментариев, gravatar серьёзно затормаживал загрузку страниц.

  4. Добрый день! Меня данный вопрос тоже очень беспокоит перерыл весь интернет. Обратившись в тех поддержку, получил ответ. Так как на хостинге используется nginx+apache, прописываемые правила в .htaccess для mod_expires не будут срабатывать, пока статичные файлы раздаёт nginx. Я так понимаю, что кэширование происходит на сомом хостинге. Но при-проверке "PageSpeed" предупреждение остаётся.

  5. Копирую этот код - вставляю в .htaccess - загружаю на хостинг, А в сервисе PageSpeed Insights все равно просят использовать кеш браузера! В общем не работает почему то!

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

  6. Написала своему хостеру "thehost" и мне помогли.
    Их ответ: "Включили кэширование для вашего сайта на стороне nginx. Подобное в .htaccess работать не будет, поскольку на хостинге стоит связка apache+nginx."

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

  7. Поставил все как Вы показали в посте, но у меня PageSpeed показывает, что не включено кеширование на стороне браузера, сайт написан на воркпресс, чем можете помочь, благодарю заранее!

    • У меня самого такая же беда, все дело в том, что у меня на сервере стоит связка ngnix + apache и получается, что второй стоит за первым. И как ни включай, google в упор не видит все эти настройки. Я и плагин поставил кеширования, в котором все это настраивается, а все равно ругаются тесты. Я уже плюнул на все это, сайты грузятся достаточно быстро и ладно.

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

  9. Добрый день, у меня до этого кода цифра стояла 72, теперь 85. Я думаю, результат на лицо!

  10. Отличная статья!
    Сделал по ней кеширование, чтобы гугл не ругался.
    До установки данного способа кеша, гугл показывал результаты 60 из 100 всего.
    проверил еще раз - также, видно пока не словился...
    Отпишу как будут новые цифры.

    Автору огромное спасибо!

    • Изменится должно сразу. Но проблема может быть в том, что на хостинге стоит не apache, а ngnix, тогда код работать не будет.

  11. На проверке pr-cy.ru робот выдал такой ответ в анализе:

    _http://cache.betweendigital.com/sections/228179.js (не указан срок действия)
    _http://connect.mail.ru/js/loader.js (не указан срок действия)
    _https://connect.ok.ru/connect.js (не указан срок действия)
    _https://site.yandex.net/v2.0/i/yandex-hint-rb.png (не указан срок действия)
    _https://site.yandex.net/v2.0/js/opensearch.js (не указан срок действия)
    _https://site.yandex.net/v2.0/js/suggest.js (не указан срок действия)

    Есть, идеи как подключить данные ресурсы к кэшированию?

    • Что у вас за сервер и какая CMS ? Вообще, как показывает практика, это все не так важно, скорее как рекомендация. Вот я например вообще отключил в своем браузере кеширование, так как у меня ssd стоит и толку от него у меня нет, больше вреда.

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

      Проверьте вот тут https://prlog.ru/speed сколько грузится сайт?

    • Глянул ваш сайт - много ненужного мусора, типа переводчика, виджеты 3d? картинки в png и так далее. Лично я даже кнопки социальных сетей убрал с некоторых сайтов, по ним никто почти не кликает, а скорость сайта уменьшается В ДВОЕ!

  12. Я решил вапрос при связке ngnix+Apache имено ngnix отвечает за статику а не Apache, так что я проста прописал в nginx.conf две строчки

    expires 168h; # это периуд 2 недели
    add_header Cache-Control private;

    сразу после listen

    • У меня хостинг Бегет, и я не нашел такого файла. Возможно он за пределами моего доступа.

  13. этот фаил только можно увидеть если у вас VPS, ну можно попросаить хостера прописать!

    • Это файл должен быть в папке с сайтом, хостер тут не причем, через ftp клиент его можно открыть. Если его нет, то нужно создать.

      • Во первых это фаил конфигурации самого модуля ngnix его надо подправить черес панель сервера а на обычном хостенге у этих папок доступа нет и если вы незаметили у этого файла раширение системное nginx.conf, строки нада прописать и перезагрузить сервер, обычно он находится /etc/nginx/nginx.conf это надо иметь доступ к операционной системе сервера!!!

        • Я вам не про ngnix, а про файл .htaccess, так как о нем в статье. Ну а так, конечно, только с VPS, у меня как раз такой вариант. Но я недавно отключил ngnix, оставил только apache и сервер стал работать более стабильно, падать вообще перестал, а раньше падал регулярно. Да и настраивать apache проще, а в скорости разницы не заметил.

    • так у вас нечего ненада у вас картинок нет, блин ужасный сайт один текст и тот я читал думал что у меня зрение падает расплывчето всё! и зачем такой сайт без картинок надо убрать text-shadow: -.24px .97px 1px rgba(0,0,0,1);

      • Согласен - шрифт издевательский, а потом будет Леонид удивляться: а чего у меня столько отказов по статистике?

      • Кстати, Алексей, раз разговор пошел о дизайне, как вам этот блог? Я понимаю, что очень все просто, но так и хотелось, а так, есть ли критические замечания по оформлению?

    • убрать тени, зделать логотип название адреса контакты в шапке сайта, и запрозрачить задний фон сайта, добовлять кортинки к стотьям, зделать периленковку покрасивее добавить коминтарии свои наложить на них капчу поднять соц кнопки в начало статьи и в канец скрыть все шётчики из виду убрать коменты VК, только после этого я и стану читать ваш блог ну покрайне мери буду искать в нём нужную мне информацию!!!!

      • Да я не про тот блог, а про этот zmoe.ru, с тем то понятно. Кстати, зачем кнопки ставить в начало статьи?

    • Да как то руки не дошли остальные аккуратно вписать. Ставить плагины и скрипты типа uptolike не хочу, да и толку от кнопок не так много, нажимают в этой тематике КРАЙНЕ редко, а тормозят сайт они будь здоров. Писал как то ТУТ

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

    • интересно, и логично. Также надо дату под статьей и пост-рейтингс для гугла! Или заменить рейтинг поста на лайки. Мало толку с них, поддерживаю. Достаточно ссылок репост на стену.

  15. Если у вас свой VPS сервер, то очень важно, чтобы были запущены нужные модули, запускаются командами:

    a2enmod headers
    a2enmod expires

    Потом нужно перезагрузить apache командой:

    service apache2 restart

  16. Мне кажется! что я свои коментарии на другом сайте оставлял! сетка доров чтоли!

    • Так гляжу, в чем проблема то? Кстати, у тебя 4 блока adsense на сайте, можно только три.

  17. User-agent: *
    Disallow: /wp-admin/
    Disallow: /wp-includes/

    User-agent: Yandex
    Disallow: /wp-admin
    Disallow: /wp-includes
    Host: сайт.ру
    Sitemap: http://сайт.ру/sitemap.xml

    User-agent: Googlebot-Image
    Allow: /wp-content/uploads/

    User-agent: YandexImages
    Allow: /wp-content/uploads/

    И зделай такой robots.txt ! потому что на WP движок оптемезирован сам по сибе не через этот фаил и ты будеш напоминать дважды яндексу!

    • А можно поподробней, как WP закрывает от индексации админку, плагины, дубли рубрик, страницу входа, системный файлы и так далее? Посмотри топовые блоги wordpress с тысячами посетителей в день, как они настраивают robots.txt.

  18. http://techcrunch.com/robots.txt вот иностранный журнал на WP
    14,7 миллионов уникальных посетителей в месяц
    Заметь там не одной директории либо файлов движка WP не закрыто, только старании папки картинки в целях чтобы не украли и http://techcrunch.com/wp-login.php от Яндекса потому что он в корень переписан в ядре движка!

    view-source:http://foxcru.ru/wp-login.php
    вот срочка есть не один поисковик не любит повторений и считает глюком и повторяет обход вопреки этим директивам!

    • Смотри внимательно, там закрыто:

      Disallow: /next/
      Disallow: /cgi-bin/
      Disallow: /wp-login.php
      Disallow: /search/
      Disallow: */lightbox
      Disallow: /wp-admin/

      Остальное скорее всего закрыто тегом

      name="robots" content="noindex,follow"

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

  19. Без танцев с бубном и бутылки так просто не разобраться. Послать гугл с его советами в его же мануалы и дело с концом.

    • Только сегодня читал ответ сотрудника гугла по поводу ускорения сайта. Суть такая: если сайт СИЛЬНО тормозит, то это может повлиять на его позиции. Если сайт сделать ОЧЕНЬ быстрым, то это на позиции не повлияет никак. Суть, думаю, понятно. Скажите, приходят уведомления на почту о новых комментариях?

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

          • Да не за что, я тоже на своем сервере так полностью и не добился выполнения всех пунктов, но это не от того, что я их не выполнил, просто google некоторые не считывает из-за настроек хостинга, например, из-за связки ngnix и apache.

  20. У меня такая же проблема, все решила, кроме надписи на статических ресурсах. Хостинг ответил, что это забота разработчиков сайтов. Скорость 1, 5 сек они считают хорошим показателем. В общем успокаиваюсь на достигнутом результате. Там у вас комментарии с огромным количеством грамматических ошибок. Надобно их исправить, потому что это теперь стало вашим текстом, а следовательно вашими ошибками, вы же мадератор.

    • Спасибо, посмотрю ошибки, хотя времени нет. В отношении статических ресурсов заметил один нюанс: если файл находится на вашем сервере, то он не кэшируется. Выход - создать поддомен и загружать их оттуда. 😉

    • Да, и с дизайном вам нужно поработать, может не мое дело, но хочется по дружески помочь, когда видишь проблемы 😉

Написать комментарий

Опубликовано © Блокнот вебмастера

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. OkPay - Офшорная компания зарегистрирована на Британских Виргинских островах, можно открыть счет в долларах, евро и рублях.

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

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