Использовать кэш браузера для отдельных файлов. WordPress Super Cache плагин, используем кэш браузера. Плагин для кэширования граватаров NIX Gravatar Cache
Освободить свой сайт от кэширования файлов, можно с помощью файла.htaccess, добавив в него специальный код. Зайдите в корневую директорию своего сайта на хостинге, где находятся все файлы вашего сайта, найдите там файл.htaccess, откройте файл.htaccess и добавьте в него следующий код:
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”
Header set Cache-Control “max-age=2592000, public”
Header set Cache-Control “max-age=172800, public, must-revalidate”
Header set Cache-Control “max-age=172800, private, must-revalidate”
BrowserMatch “MSIE” force-no-vary
BrowserMatch “Mozilla/4.{2}” force-no-vary
В коде вы можете изменить временные отрезки, через которые ваш сайт будет кэшировать браузер. Например вместо значения – 1 year (раз в год), можно сделать 1 month (то есть каждый месяц). Временные сроки указаны для каждого типа файла.
С помощью плагина
Если вы боитесь лезть в код или у вас нет файла.htaccess, то можно сделать кэш на стороне браузера с помощью простого плагина – Zendy Speed: Browser Caching . Всё, что вам нужно сделать, это установить и активировать данный плагин, больше ничего делать не надо. После активации плагина код добавиться автоматически.
«», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed Insights. Каждый владелец сайта сталкивался с проблемой сложности закешировать js скрипты сторонних сайтов.
Это не такой важный показатель для оптимизации, по сути происходит перенос из шапки сайта CSS и JS элементы в футер, к тому, если посмотреть на ресурсы Google с этим пунктом у них проблемы:)
Если вам всё таки захочется оптимизировать сайт или вашим клиентам методом кеширования сторонних скриптов, к примеру. наблюдать красивую цифру на счетчике в анализаторе, то достаточно выполнить действия ниже на которые уйдет несколько минут.
Кеш браузера своих элементов
Делаем кеш для разных скриптов, пример взят с блога Devaka ru (на момент написания статьи)
К примеру:
/assets/copyright.min.js (не указан срок действия)
/assets/i/566.jpg (не указан срок действия)
/assets/i/icons.png (не указан срок действия)
/i/postcomm-left.png (не указан срок действия)
/i/postcomm-right.png (не указан срок действия)
Исправляем первую проблему, заходим в файл.htaccess, что находится к корне сайта и вставить в самый низ этот код:
# сжатие text, html, javascript, css, xml:
Примеры сторонних скриптов
Если в первом шаге, все сделали верно, должны увидеть примерно такой список:
Используйте кеш браузера для следующих ресурсов
У вас конечно, может быть всего несколько URL на метрику и аналитику например, но это не столь важно, инструкция исправления одинаков для всех.
Кеш сторонних элементов
Изначально статья должна была быть посвящена только этим пунктам, однако чувствуя, что будет много вопросов было добавлено ещё пару пунктов.
Повлиять на время кеша стороннего ресурса никак нельзя, но можно сделать на своем веб-проекте Самый правильных ход в этой ситуации, скачивать автоматически свежие скрипты метрики, аналитики и т.д. к себе на сайт с помощью крона (скрипт присутствует)
Давайте теперь по порядку!
Шаг 1. Скопируем список всех скриптов на которые указывает Google PageSpeed в блокнот или прямо с браузера.
Шаг 2. Создайте файл на хостинге с расширением php и вставляем в него следующий код:
Внимание! У вас нет прав для просмотра скрытого текста.
В коде для примера 3, но вы можете создать сколько нужно пунктов, просто копируйте и добавляйте ниже или удалите лишние.
В этой строке меняем 3 значение:
Используйте кеш браузера для Google PageSpeed
1. Скрипт который будем закачивать к себе на сайт
Внимание! У вас нет прав для просмотра скрытого текста.
2. Путь куда сохранять файл:
Realpath("./js")
В этом примере это папка js, т.е. точный путь будет www.сайт/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)
3. Имя скрипта, если с расширением.js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.
Шаг 3. Заливаем отредактированный файл на сервер
Шаг 4. Ставим файл на крон для автоматического обновления файлов
Для того чтобы избежать некорректной работы с сервисами, если они внесут изменения в скрипты, крон будет автоматически заходить и обновлять их у себя на сервере.
Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а также указываем время раз в час/сутки или любое другое время.
Wget -q -O - /dev/null http://www..php >/dev/null 2>&1
Не забываем сменить URL и возможно синтаксис команды у вас будет другой, посмотрите примеры cron команд в справке хостинга или утоните в тех.поддержке.
Шаг 5. Меняем путь к JS в счетчике или скрипте
Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например http://www..js
Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.
Скачать " включаем кеш браузера для Google PageSpeed " инструкцию в архиве Вы не можете скачивать файлы с нашего сервера
Представляем полезную статью «Включаем кеш браузера для Google PageSpeed», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed всё лучшее у нас форумы, хаки, модули, шаблоны.
👁9 325 просм.
В этой статье продолжаем рассматривать как можно ускорить загрузку сайта. Ранее мы обсудили . Сегодня узнаем как включить кеш браузера на стороне пользователя при помощи файла.htaccess .
Зачем включать кеш браузера на стороне пользователя
Зачастую при создании нового сайта программисты не особо уделяют внимание скорости загрузки сайта браузером. Особенно если на этот пункт не было сконцентрировано внимание в Техническом Задании для разработки сайта. И после выхода нового творения в свет, веб-специалист, который занимается развитием и продвижением данного проекта может наблюдать очень печальную картину, просканировав сайт на скорость загрузки в PageSpeed Insights от Google.
Вот далеко не полный список проблем, с которыми мы можем столкнуться, и которые замедляют скорость загрузки сайта на стороне браузера пользователя:
Некоторые из читателей могут задаться вопросом, а собственно зачем нужно включать этот кеш, и ускорять скорость загрузки сайта? Ведь сайт и так не плохо работает.
А причины для этого как минимум две:
- Если сайт долго загружается, то пользователь может не дождаться ваших супер эффектов, задуманных дизайнером для привлечения внимания, а просто закроет ваше творение искусства и попросту перейдет на сайт конкурентов, возможно менее красочный, но более быстрый и отзывчивый. Ведь никто из нас не любит долго ждать. 🙂
- Чем дольше скорость загрузки сайта, тем ниже его будут выдавать поисковые системы по ключевым запросам, относительно сайтов ваших конкурентов. А это уже существенная угроза развитию вашего бизнеса.
Как включить кеширование файлов в браузере на стороне пользователя
Если ваш проект разработан на популярной CMS WordPress, то есть множество плагинов, позволяющих решить проблему кеширования. Самые популярные из них W3 Total Cache, WP Super Cache, Hyper Cache. Но в этой статье я предлагаю рассмотреть более надежный, по моему мнению, способ включения кеширования через файл.htaccess непосредственно на хостинге.
Обратите внимание , что предлагаемые методы будут работать только в том случае, если на сервере вашего хостинг-провайдера установлено ПО Apache.
Перед выполнением любых изменений в файле.htaccess обязательно сделайте его резервную копию себе на компьютер, для того чтоб можно было его восстановить, если что то пойдет не так.
Для того, чтоб включить кеш браузера на стороне пользователя, достаточно использование какого — то одного из указанных ниже методов . Использование двух методов одновременно не целесообразно и может привести к нарушению работоспособности вашего сайта.
Включение кеширования в браузере на стороне пользователя при помощи модуля mod_headers
Для включения функции кеширования приведенный ниже код надо вставить в файл.htaccess, который расположен в корневом каталоге вашего сайта. Во избежание появления ошибок, вставлять код нужно перед строчкой # END WordPress:
# Включение кеша в браузерах посетителей сайта < ifModule mod_headers . c > # Все html и htm файлы будут храниться в кеше браузера 12 часов < FilesMatch "\.(html|htm)$" > Header set Cache - Control "max-age=43200" < / FilesMatch > # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней < FilesMatch "\.(js|css|txt)$" > Header set Cache - Control "max-age=604800" < / FilesMatch > # Все флеш файлы и изображения будут храниться в кеше браузера 31 день < 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 > |
Что означаю те, либо иные дерективы я описывать не буду. Более подробно с их значениями можно ознакомиться на сайте с официальной документацией по Apache .
Включение кеширования в браузере на стороне пользователя при помощи модуля mod_expires
Для включения кеширования в браузере на стороне пользователя при помощи модуля mod_expires прописываем в файле.htaccess следующий код:
< ifModule mod_expires . c > ExpiresActive On #по умолчанию кеш в 30 секунд ExpiresDefault "access plus 30 seconds" # Включаем кеширование изображений и флеш на 1 месяц 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 и текстовых файлов на 7 дней ExpiresByType text / css "access plus 604800 seconds" ExpiresByType text / javascript "access plus 604800 seconds" ExpiresByType application / javascript "access plus 604800 seconds" |
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. После этого браузер будет кэшировать все вышеперечисленные объекты на перечисленный срок. А это значит, что если в течении года(как указано в примере) посетить тот же сайт, то Вы получите многие файлы из своего компьютера, если, конечно же, Вы не почистили за это время кэш компьютера.
Инструкция работает только в том случае, если apache обрабатывает статические файлы (установлен как фронтэнд). Если перед ним стоит nginx — те же действия нужно выполнять совсем по другому.
Сначала пара слов на тему — зачем вообще нужно кеширование ресурсов сайта (изображений, css, html-файлов, архивов и прочих статических файлов).
Каждый раз как посетитель открывает Ваш сайт — скачивается не только html-код страницы, но и все сопутствующие ему файлы, которые нужны для оформления страницы (картинки, css-стили, js-скрипты и так далее).
Как результат, одно открытие страницы файла — это не один запрос к серверу, а от десяти до сотни! Каждый такой запрос — это не только нагрузка на сервер (что важно), но и дополнительное время на загрузку страницы у пользователя (что важно как показатель качества сайта и удобства работы с ним пользователя).
К примеру, популярный сервис проверки сайтов от Google PageSpeed Insights по этому поводу всегда пишет предупреждение:
Используйте кеш браузера
Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Используйте кеш браузера для следующих ресурсов://— список проблемных файлов —//
Включение кеширования не только уменьшает нагрузку на сервер (почти на всех страницах сайта есть повторяющиеся элементы оформления, java-скрипты и пр.) при повторном посещении сайта/страницы пользователем, но и уменьшает время загрузки страницы на его стороне. Так как браузер берёт файлы из кэша почти молниеносно и у пользователя складывается ощущение что страница загрузилась практически молниеносно!
Для решения поставленной задачи — создайте в папке сайта файл с именем .htaccess (именно с точкой в начале. Это важно!) и добавьте в него вот эти правила. Если файл уже есть — добавьте в конец существующего:
# кеширование в браузере на стороне пользователя
После этого проверить результат можно на странице Google PageSpeed Insights (если всё правильно — сообщение «Используйте кеш браузера » будет помечено зелёным и размещено в секции «Выполнено правил: (подробнее)»)
Не работает, что делать?
Если кеширование не работает, то нужно проверить, установлены ли модули. Для этого нужно создать в папке сайта файл test.php c кодом:
Если в списке нет mod_expires или mod_headers — выполните в консоли сервера (подключившись ) по очереди следующие команды (это установит/включит mod_expires, mod_headers ):
A2enmod headers a2enmod expires service apache2 restart
Если же сайт на обычном хостинге — тут всё сложнее. Обращайтесь в техподдержку и уточняйте — почему не установлены модули и как можно обойти эту неурядицу. Так как причин по которой хостер не поставил модули — может быть достаточно много.
