Читая данную статью вы узнаете про то как устранить пункт: используйте кэш браузера от нашего друга гула по PageSpeed Insights. Рассматривать проблему будем на примере одного знакомого мне блога.
Статья длинная, буду показывать по частям, и введу содержание.
Правильно используем кэш браузера и устраняем проблему «не указан срок действия»
Смотрите (снимок ниже) в рамке обозначенной цифрой 1, подгружаются файлы js сторонних сервисов, но вы же не можете им сказать эй давайте включайте кэширование браузерами для своих ресурсов. Увы, в этом случае ничего не поделаешь, и эти нарекания не удалишь.
Сейчас рассмотрим три шага, которые состоят в следующем:
И вот вам первый совет. По возможности, никогда не используйте внешние ресурсы на своих сайтах, это очень тормозит. Так как у большинства не собственные сервера, то эта проблема актуальна. У меня стояла форма обратной связи от одного портала, но я ее убрал, js код тормозил страницу, решать вам.
Переходим к рамке 2, тут указаны замечания для следующих ресурсов, в основном это css, js и изображения. Разберемся, что это за срок действия. Дело в том, когда посетитель заходит на сайт, то его браузер скачивает себе файлы (это мы уже и так знаем из определения выше). Чтобы знать сколько хранить эти файлы у себя в памяти и нужно указывать это время.
Шаг 1. Скачиваем.htaccess
Первым шагом надо скачать.htaccess, все делаетя быстро, через менеджер FTP. В начале нужно будет узнать, на чем работает ваш сервер, точнее его обеспечение. Оно должно быть Apache (95% работают именно на нем, но проверить стоит).
У следующих ресурсов nginx параметры включения данной функции разные, чем у apache, так что я не зря сказал проверить на чем работает сайт.
Дальше, заходим в корневой каталог сайта (через FTP, я использую FileZilla) в папку pablic_html, там находится весь движок вордпресс. Здесь в идеале располагается файл.htaccess, он стандартный от Apache. Он регулирует загрузку и доступы, если его нет то создаем его. Будем его рассматривать в более тематических статьях, пока что нам надо сделать кэширование.
Шаг 2. Вносим mod-header в файл
Вторым шагом будем вносить директивы mod-header в.htaccess. Если он есть, то просто вставляем до закрывающего тега #endwordpress, вот этот код.
Header unset Cache-Control Если же сделан по новой, то вставляем вот это и закидываем его в корневой каталог.
# BEGIN WordPress
# END WordPress Header set Cache-Control "max-age=43200" Header set Cache-Control "max-age=604800" Header set Cache-Control "max-age=2592000" Header unset Cache-Control Разбор строчек кода, за что они отвечают
Теперь надо разобраться за что отвечают все эти строки кода. Все тривиально, вы можете видеть в строчках разные расширения png, jpg и им подобные, и напротив этих расширений указаны числа, это и есть временной отрывок в котором будут храниться эти файлы. Например число 43200, указывает на то что фалы этих расширений будут держаться в кэше один день.
Если все было сделано правильно, то эта строка исчезнет, но мы можем сделать еще лучше, как, читайте дальше.
Плагин для кэширования граватаров NIX Gravatar Cache
Плагин nix gravatar cache- это находка для меня. Я маленько приврал, когда сказал, что не возможно избавиться от загружаемых скриптов с других сервисов. В списке внешних ресурсов вы сможете найти сайт граватара, это условие срабатывает если у вас к статье есть комментарии и к ним прикреплен gravatar. Как не странно, но тут можно включить кэш браузера wordpress для данных картинок.
Я человек дотошный, и все таки нашел решение, оттуда идет только картинка, и соответственно ее можно кэшировать и приделать к ней срок действия.
Решение нашел в плагине NIX Gravatar Cache, я знаю что это есть зло, но от него вообще нет почти нагрузки. Признаюсь, перепробовал три плагина, но только этот делает изображения в jpg, а те в непонятно какие форматы. Все настройки сводятся к двум пунктам, они указаны на скриншоте.
Первая галочка включен или выключен, и второй сколько хранить кэш.
В чем вся прелесть? В том что посетитель оставляет свой комментарий, а плагин автоматом скачивает его граватар на хостинг, и потом уже идет загрузка не из сайта граватара, вот и все. Ставьте обязательно, потому как, лучше один плагин чем сотня запросов (при условии что у вас сотня комментариев).
Кэшируем весь сайт
Чтобы кешировать весь сайт,так же нужен плагин. В этой роли я выбрал Hyper Cache, он легок и занимает не много процессов. Но сейчас его рассматривать не буду, потому как тема очень обширная и мне просто не хватит статьи. Имейте в виду, что надо установить, а как настроить ждите следующей статьи.
На этом я закончу, мы по максимуму прокачали ваш кэш комплексно. В данный момент ему ничего не грозит и ваш сайт будет загружаться намного быстрее.Читая данную статью вы узнали, как устранить пункт: используйте кэш браузера от нашего друга гула по PageSpeed Insights.
Подведем итог, что мы узнали и какой порядок действий
- Узнали на чем работает сайт (apache, nginx и тому подобное).
- Научились закачивать.htaccess на компьютер.
- Отредактировали файл доступов.
- Смогли закинуть обратно на сервер.
- Поставили плагин nix gravatar cache.
P.S. Если что-то не получилось то смело пишите комментарии, отвечу и помогу.
Игорь . Обновление:Ноябрь 21, 2017 .
Здравствуйте, уважаемые читатели блога сайт. Продолжаю цикл статей, которые касаются мероприятий по оптимизации, и сегодня настал черед для настройки использования в этих целях кэша браузера со стороны пользователей, что является очередным шагом выполнения по ускорению сайта.
Каждое действие, позволяющее приблизиться к этой цели, будет плюсом в продвижении веб-ресурса, а потому не поленитесь хотя бы взглянуть на материалы, где я давал описания , а также , что, несомненно, вам поможет в реализации общей задачи.
В продолжение я постараюсь предоставить внятные инструкции по настройке кэширования в браузере путем внедрения специального кода в замечательный файл.htaccess. Правда, это не всем и не всегда может помочь, но обо всем чуть ниже.
Думаю, каждый из вас представляет себе, что такое кэширование, хотя бы в общих чертах. На всякий случай объясню вкратце. Допустим, читатель открывает в окне браузера страницу вашего ресурса, все составляющие которой (содержание, стили, скрипты и т.п.) загружаются с сервера хостинга, что занимает определенное время.
Предположим, у нас есть возможность запустить механизм, который позволит сохранить копии элементов страниц прямо в web-обозревателе того пользователя, который их посещает. Тогда при каждом следующем обращении все эти элементы будут браться прямо из кеша браузера () посетителя, то есть из специальной папки, которая располагается на жестком диске его компьютера.
Выигрыш в скорости загрузки будет налицо. Вот такой алгоритм мы и будем изучать в настоящей статье. Кстати, в дополнение темы можете почитать о том, как наряду с ускорением сайта можно добиться , что весьма актуально в наши дни.
Пару-тройку лет назад я рассказывал об оптимизации одного из своих проектов на основании анализа Пейдж Спид, осуществленного посредством расширения (сейчас доступен только онлайн сервис), которое давало более детальную картину.
Что важно, в большинстве своем предложенный ниже код вполне достаточен для того, чтобы создать условия, при которых Pagespeed больше не будет предъявлять претензий, а, значит, он обеспечит ускорение загрузки страниц в необходимом объеме.
Итак, на основании выше сказанного нам нужно обеспечить вывод одного из заголовков Last-Modified и ETag, а также одного из пары Expires либо Cache-Control: max-age. Для наглядности и расширения диапазона рассмотрим различные варианты.
Вариации кодов для управления кешем с использованием заголовков Last-Modified, Expires и Cache-Control
Если на вашем хостинге уже настроен вывод того же Last-Modified, то пол-дела сделано (к слову, проверить наличие этого важного заголовка , включая в их список инструмент для проверки ответа сервера от Яндекса). Если же нет, то сделать это весьма несложно, прописав в том же незаменимом.htaccess пару строк:
RewriteRule .* - RewriteRule .* -
Правда, работать этот метод будет опять же при условии наличия "чистого Апача" (но ведь как раз этот случай мы и рассматриваем). Будем считать, что заголовок Last-Modified, в качестве значения которого, кстати, будет выводится дата последнего изменения, настроен.
Теперь настала очередь Cache-Control с параметром max-age, в качестве значения которого будет прописан срок хранения в кеше каждого конкретного статического объекта. На сцену выходит модуль mod headers , код которого и следует вставить в.htaccess:
Нужно отметить, что посредством контейнера ifModul на сервере осуществляется проверка наличия этого модуля. При его отсутствии директива выполняться не будет, поэтому ее использование в любом случае не должно привести к ошибкам.
Время сохранения кеша определяется с помощью параметра max-age , его значение выставляется в секундах. Благодаря комментариям (которые, к слову, вы можете спокойно удалить), стоящим после символа решетки «#», основа этой конструкции, думаю, понятна.
Однако, вместо mod headers вполне можно воспользоваться модулем mod expires , выводящим заголовок Expires (который, по мнению самого Гугла является предпочтительнее, поскольку имеет более широкую поддержку). При этом фрагмент кода для его включения будет таким:
Точкой отсчета срока годности кэша в случае использования заголовка Expires является дата первой загрузки. Причем, в отличие от Cache-Control, где временной период определяется только в секундах, здесь он может указываться в любом временном формате, включая year (год).
Для того, чтобы убедиться в этом, посмотрите на участок кода, касающийся изображений. Там я специально указал время в различных единицах исчисления: 1 month (месяц), 4 weeks (недели), 30 days (дни), 43829 minutes (минуты), 2592000 seconds (секунды).
Понятно, что в месяце и в году может быть различное количество дней, недель, минут и секунд, но это не принципиально, поскольку используются средние значения. Кстати, для JS, файлов CSS и изображений рекомендуется ставить временной период не менее недели, но не более года. При этом по факту в качестве значения заголовка Expires в ответе сервера будет указана дата предполагаемого срока завершения периода кеширования данной версии объекта.
В дополнение к упомянутым модулям полезно задействовать еще и mod setenvif . Дело в том, что веб-обозреватели семейства Microsoft Internet Explorer и некоторые версии Мазилы корректно не воспринимают в ответе сервера HTTP заголовок Vary, который также вносит свою важную лепту в управление кэшированием. Этот модуль как раз позволяет решить эту проблему, исключая Vary из состава ответа сервера:
В итоге мы получаем два конечных варианта настройки кеширования, которые вы можете проверить, вставив поочередно в.htaccess (оба одновременно использовать не рекомендую):
Еще раз напоминаю, что несмотря на наличие контейнера IfModule, который обеспечивает безопасность редактирования, не лишним будет каждый раз при изменении.htaccess делать резервную копию исходного варианта файла (можно просто скопировать его содержание и сохранить на компьютере), чтобы вас не застиг врасплох форс-мажор в той или иной вариации.
Код формирования заголовков Etag и Expires для настройки кэша
На случай, ежели предложенные выше директивы вдруг не сработают (даже если на вашем хостинге установлен "чистый" Апач), разберем другой случай, а именно, когда в качестве инструментов управления кэшированием выступает пара входящих в разряд обязательных заголовков Etag и Expires. Как вы помните, оба отвечает за своевременность выдачи файлов из кеша, инициируя проверку на актуальность текущей версии.
Но если в качестве значения Expires отображается дата последнего изменения, то в ETag используется тот или иной уникальный идентификатор ресурса (чаще в этой роли выступает версия файла). Для активации ETag требуется лишь ввести в тот же.htaccess одну строчку:
FileETag MTime Size
Ну а затем применить уже известный нам модуль mod expires. Можно добавить и mod setenvif, который, как я уже сказал выше, запрещает формирование заголовков Vary для определенной группы веб-браузеров, чтобы гарантировать образование кеша с их стороны:
FileETag MTime Size
Здесь использован комплекс с минимумом типов задействованных объектов, но зато наиболее востребованных (CSS, JavaScript и изображения), который также должен быть достаточным, чтобы обеспечить максимальную эффективность в ускорении сайта. При желании к комплекту «jpg|jpeg|gif|png|ico|css|js» можно добавить другие виды файлов.
Кроме того, в приведенном выше примере кода для всех файлов действует один и тот же период "жизни" кеша, равный одному году ("access plus 1 year"), который является рекомендуемым со стороны Гугла. Но можно для каждой группы объектов указать свой временной отрезок по примеру содержания модулей mod_expires и mod_headers из предыдущего раздела статьи.
Проверка наличия нужных заголовков в ответе сервера
После того, как вы вставите код в файл.htaccess, можно проверить, находятся ли необходимые заголовки в составе ответа сервера. Для этой цели можно воспользоваться каким-нибудь онлайн сервисом, например, Checkmy.ru , где в качестве клиента (User Agent), посылающего HTTP-запрос на сервер, выбираем любой браузер, а также вводим URL ресурса (для примера я взял путь до изображения, используемого в одной из статей блога):
После нажатия кнопки «Отправить запрос», через несколько секунд появится результат:
Как видите, в моем случае присутствуют все четыре заголовка. Я говорил, что обязательно должны выводится по одному из пар «Last-Modified — ETag» и «Expires — Cache-Control», остальные излишни. При этом полный комплект, насколько можно судить, не причинит вреда.
Кстати, ежели вы осуществите тестирование перед началом настройки кеширования, то сразу сможете определить, насколько продуктивными будут ваши действия.
Ведь если в ответе сервера будет присутствовать nginx, то настраивать нужно будет именно его (у меня это сделал провайдер), а файл конфигурации.htaccess будет здесь бесполезен. В таком случае, как я уже отмечал, придется задействовать помощь службы поддержки, если, конечно, ваш тариф хостинга и недостаточные знания не позволят самостоятельно решить вопрос.
Далее советую для закрепления материала обратиться к видео и посмотреть последовательно 6 уроков (один из которых посвящен настройке кеширования в браузерах), в которых подробно рассмотрены все наиболее важные аспекты ускорения сайта WP:
");">
Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:
Еще статьи по данной теме:
60 отзывов
- Денис
Очень полезный способ для увеличения удобства нахождения на сайте. Ведь оптимизируя скорость загрузки Вы тем самым экономите время посетителя, и за это они будут благодарны заходя снова и снова на Ваш сайт. Что напрямую повлияет на доходы сайта положительным образом.
- Игорь
Абсолютно верно, Денис. В продвижении сайта все взаимосвязано.
- Marazzi
Ниче не поняла, браузер вобщето сам помоему запоминает сайты на которых была в кукис, Если куки подтиреть. СОГЛАСНО ВАШЕМУ МЕТОДУ то и ваша схема перестанет работать, вернее ятак понялда что это о чем идет разговор расчитано на постоянного посетителя который не подчищает историю7 ПОДПИСАЛАСЬ, ЖДУ ОТВЕТА1
- Сергей Дмитриевич
Весьма полезная информация. Мне пригодилась. Спасибо.
- Игорь
Marazzi, во первых куки и кэш разные вещи. Куки - особые файлы с набором данных, которые позволяют идентифицировать пользователя, если он посещает вебресурс. А cache (в переводе с англ.-склад, тайник) браузера - это своеобразное укромное место для хранения копий документов (например, вебстраниц сайта), которые при необходимости отображаются в браузере. Именно со стороне сервера происходит команда использовать кэш на стороне браузера пользователя, причем создается папка с кэшем именно на компьютере пользователя. Со своей стороны пользователь может регулировать частоту создания кэшированных копий страниц сайта, очищая папку с кэшем. Или вообще запретить кэширование, настройки современных браузеров это позволяют. Чем чаще вы чистите кэш, тем более новую версию страницы получаете.
- Николай
Супер,и здесь всё ОК!!!
- marazzi
Ну об этом я и говорила.
- Александр
- Николай
Спасибо за статью. Правда не совсем понятно как потом чистить этот кэш в случае, например, если на сайте появится новая рубрика или раздел, наоборот исчезнет. Я конечно утрирую сильно, но смысл тот же. Временами кэш нужно чистить, как это реализовано в этом коде?
- Ирина
ОК! Спасибо!
Этот код помог, теперь 80 из 100FileETag MTime Size ExpiresActive on ExpiresDefault «access plus 1 year»
- Игорь
Николай, не совсем понял Ваш вопрос. Это код для кэширования страниц в браузерах пользователей, они сами чистят кэш. Новые статьи и рубрики отображаются даже тогда, когда кэш полный. Надолго кэшируются только элементы, которые длительное время остаются неизменными.
- Андрей
Спасибо. А если мне нужно, чтобы кэшировались только определенные, например, логотип и флаги стран в footer, то как быть?
- Игорь
Андрей, а зачем Вам отделять изображения, одни кэшировать, другие нет? Обычно картинки не меняются с калейдоскопической быстротой.
- Андрей
Ну да, с картинками Вы правы. А определенную страницу не кэшировать(например, из админки). Такое возможно?
- Игорь
Конечно, возможно. Если Вы пользуетесь плагином кэширования, например Hyper Cache, то в его настройках есть уйма разнообразных опций, в том числе можно исключить страницы, которые не подлежат кэшированию.
- Ярослав
Очень полезная, статья, давно хотел настроить кеширование, вот только раньше везде находил первый представленный способ и он не делал ровным счетом ничего.
Зато благодаря вкторому способу все работает на ура!! PS 91 - Игорь
Хороший результат, Ярослав.
- stan
не работает ни один способ
- Игорь
Stan, вполне может быть, это во многом зависит от хостера.
- Илья
Слов нету сколько я искал статью как включить время кеширование браузера просто надо было вставить самый верхний код. Спасибо за статью.
- Игорь
Пожалуйста, Илья.
- Серый
Спасибо, работает!
- Сергей
так же не работает ни один способ
хостер адекватныйвидимо им писать в саппорт придётся
- Игорь Горнов
Да, Сергей, пожалуй. Сами видите, у многих получается реализовать.
- Александр Пузатых
Спасибо. Информация классная. Сейчас буду исправлять у себя на сайте. А то pgespeed выдает красную метку.
- Юрий
все сделал как описано, но скорость загрузки PageSpeed Insights не изменилась (74%). В чем может быть причина?
- Юрий
Вот мой htaccess
# BEGIN WordPressRewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]# END WordPress
добавляю ваш код и ничего не меняется
PageSpeed Insights как было 74% так и осталось.
Скажите в чем может быть проблема??? - Игорь Горнов
В особенностях конфигурации сервера Вашего хостинга, где расположен сайт. По моему, в статье и комментариях я уже отмечал, что этот метод не всем подходит.
- Валерий
Игорь, хорошая статья. Давно хотел это сделать, но не знал как. Теперь понятно. У меня один вопрос: "В какое место файла.htaccess нужно вставить код?".
- Игорь Горнов
Валерий, если у Вас уже есть какие-то фрагменты кода в.htaccess, то там должна быть такая строчка:
# END WordPress
В этом случае не только данный, но и любой код следует поместить выше этой строчки. Остальное не имеет значения.
- vokacan
Информация полезная, но разобраться новичку довольно сложно, на мой взгляд.
- Aely
Странно у меня то же не сработало, а что нужно делать, вернее что нужно у хостера спрашивать?
- Игорь Горнов
У хостера нужно спросить следующее: есть ли возможность включить кэширование на сервере для всех возможных файлов. Возможно, у них уже есть готовый алгоритм, отличный от предложенного мною.
- Aely
Спасибо, сейчас написал.
- Aely
Вот прикол, они(хостер) сказали что у них всё включено, а я им, а гуглспидтест - показывает "используйте кеш браузера", а они мне - это вопросы к гуглспидтест. Не могу понять кому верить?:)
- Игорь Горнов
Aely, такое отношение к клиенту со стороны хостера, по меньшей мере, странно. По идее, они должны бы объяснить и дать возможный алгоритм для внесения его в файл.htaccess, чтобы активировать функцию, даже если она у них включена. Интересно, а Вы не в первый раз обращались к службе поддержки, как она проявляла себя в других ситуациях?
Хочу разобраться с советом, который даёт мне в этом отношении Google: Используйте кэш браузера ! Ну что же, попробуем решить!
Лучшая тема для Wordpress: видео обзор...
Пояснения от Google: Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Решение этого вопроса заключается в том, чтобы в файл.htaccess вставить код, который будет управлять кэшем на браузере пользователя и указывать, как долго нужно хранить эти данные. Вот какой код я вставил себе, по совету других вебмастеров:
# кеширование в браузере на стороне пользователя
Как видите, список внушительный, тут в основном файлы стилей и скрипты. Может это всё и не так уж сильно ускорит сайт, но хочется разобраться из принципа.
Люди пишут, что не все хостинги поддерживают эту функцию на уровне сервера, возможно, мой хостинг тоже. Я написал в техническую поддержку и стал ждать ответа. Ответа пока нет:(
Только что ответили, после моего ещё одного сообщения. Ответ был таков:
Доброго времени суток!
Кэш работает как надо, не кэшируются только одномоментные удаленные библиотеки которые забираются с твиттера, твимга и т.д. на сколько видите, с остальным все нормально.
Ну я пока поверю, что так все оно и есть. У вас есть мысли по этому поводу? Одно из решений этой проблемы я описал в …
Не нашли ответ? Воспользуйтесь поиском по сайту
img class=»aligncenter wp-image-2458 size-full» title=»Как включить кэширование браузером страниц сайта» src=»http://about-windows.ru/wp-content/uploads/2014/07/Как-включить-кэширование-браузером-страниц-сайта.jpg» alt=»Как включить кэширование браузером страниц сайта» width=»600″ height=»450″ />
Как на сайте включить использование кэша браузера конечного пользователя?
Если Ваш сервер дает знать браузеру конечного пользователя что некоторые ресурсы можно сохранить в , то повторный запрос к тем же ресурсам получит ответ не от удаленного сервера, а от локального компьютера. В плюсе от этого окажутся обе стороны. Так, сервер снимет с себя некоторую часть нагрузки, так как ему не придется высылать определенные ресурсы, которые уже имеются на компьютере пользователя. А вот пользователь получит более быстрый доступ к запрашиваемым ресурсам.
Как включить кэширование браузером ресурсов сайта на сервере Apache?
Для начала разберемся, какие ресурсы браузер должен кэшировать. Напомню, что если браузер запихнет в кэш некоторые ресурсы, то он может не обновлять их довольно долгое время. Такая ситуация вполне подходит для статических объектов. А какие ресурсы можно отнести к статическим объектам?
- CSS файлы.
- JS файлы.
- Изображения.
- Видео.
- Музыка.
Приведенные, а так же некоторые другие ресурсы могут быть без вреда закэшированы на продолжительное время. Они же не будут обновляться каждый день. Исходя из этого, я приведу Вам код, который обяжет браузер пользователя кэшировать перечисленные ресурсы. Дополнительно мы укажем срок, на протяжении которого можно хранить эти ресурсы в кэше, не запрашивая обновления.
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»
Данный код необходимо внести в файл .htaccess , который лежит в корневой папке сайта, сервером для которого служит Apache. После этого браузер будет кэшировать все вышеперечисленные объекты на перечисленный срок. А это значит, что если в течении года(как указано в примере) посетить тот же сайт, то Вы получите многие файлы из своего компьютера, если, конечно же, Вы не почистили за это время кэш компьютера.
