WordPress Super Cache плагин, используем кэш браузера. Как включить кэширование браузером, рецепт для htaccess Как включить кэширование файлов в браузере
Перед открытием страницы браузеру необходимо загрузить весь ее контент (HTML, CSS, Javascript и изображения). Загрузка больших и громоздких сайтов может быть довольно болезненным опытом, если у вас медленный интернет (или вы используете мобильный телефон). Каждый из файлов посылает отдельный запрос на сервер, и чем больше таких запросов он получает в одно и то же время, тем больше ему необходимо провести работы и тем медленнее будет происходить загрузка страницы. В таком случае – используйте кеш браузера.
Кэш браузера может сохранить часть файлов сайта у пользователя. При первом посещении время загрузки останется без изменений, но со следующим визитом, обновлением страницы или переходе на другую, часть файлов уже будет сохранена в браузере. Это означает, что браузеру пользователя нужно будет скачать меньше данных и сделать меньше запросов к серверу, тем самым уменьшив время загрузки сайта.
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- Доступ к файлу.htaccess
Шаг 1 - Редактирование файла.htaccess
Процесс довольно простой, вам необходимо добавить следующий код в файл.htaccess (руководство о том, как определить расположение вашего.htaccess файла вы можете найти ):
## EXPIRES CACHING ##
После сохранения изменений в файле.htaccess, ваш сайт автоматически начнет использовать кэш браузера для хранения временных файлов.
Шаг 2 - Проверка использования кэша браузера
Проверить правильность внесенных изменений вы можете с помощью множества инструментов, таких как WebPageTest или GTMetrix
Вот результаты ПЕРЕД включением кэширования браузера:
Для сравнения, вот результаты ПОСЛЕ включения кэширование браузера:
Заключение
В этом кратком руководстве вы узнали, как ускорить работу сайта с помощью кеша браузера. Хотите увеличить скорость загрузки вашего сайта – используйте кеш браузера.
- htaccess кэширование сохраняет содержимое веб-страницы на локальном компьютере, когда пользователь посещает ее;
- Использование кэша браузера – веб-мастер дает указания браузерам, как следует рассматривать ресурсы.
Когда браузер отображает веб-страницу, он должен загрузить логотип, CSS файл и другие ресурсы:
Кэш браузера «запоминает » ресурсы, которые браузер уже загрузил. Когда посетитель переходит на другую страницу сайта, логотип, CSS файлы и т.д. не должны загружаться снова, потому что браузер уже «запомнил » их (сохранил ). В этом заключается причина того, почему во время первого посещения загрузка веб-страницы занимает больше времени, чем при повторных.
Когда вы используете кэширование, файлы веб-страницы будут сохранены в кэше браузера. Страницы будут загружаться в разы быстрее при повторных посещениях. Также будет с другими страницами, которые используют одни ресурсы.
Как включить кэширование в браузере
- Измените заголовки запроса ресурсов, чтобы использовать кэширование;
- Оптимизируйте свою стратегию кэширования.
Изменение заголовков запроса
Для большинства людей единственный способ кэширования сайта htaccess заключается в том, чтобы добавить код в файл .htaccess на веб-сервере.
Файл .htaccess контролирует многие важные настройки для вашего сайта.
Кэширование браузера через файл.htaccess
Приведенный ниже код указывает браузеру, что именно кэшировать и как долго это «запоминать «. Его следует добавить в начало файла .htaccess :
## EXPIRES CACHING ##
Сохраните файл .htaccess , а затем обновите веб-страницу.
Как установить время кэширования для различных типов файлов
В приведенном выше коде заданы промежутки времени. Например, 1 year (1 год ) или 1 month (1 месяц ). Они связаны с типами файлов. Приведенный выше код устанавливает, что .jpg файлы (изображения ) следует кэшировать в течение года.
Если бы вы хотели изменить это, чтобы и JPG изображения кэшировались в течение месяца, то вы бы просто заменили «1 год » на «1 месяц «. Указанные выше значения кэширования через htaccess оптимальны для большинства веб-страниц.
Метод альтернативного кэширования для.htaccess
Описанный выше метод называется «Expires «, он помогает с кэшированием большинству новичков. После того, как вам станет проще работать с кэшированием, можете попробовать другой метод кэширования Cache-Control , который дает больше возможностей.
Возможно, что метод Expires не сработает на вашем сервере, в этом случае вы возможно захотите попробовать использовать Cache-Control .
Cache-Control
Этот метод позволяет получить больше контроля над кэшированием страниц в браузере, но многие считают, что проще прописать все настройки один раз.
Пример использования в файле .htaccess :
# 1 Month for most static assets
Приведенный выше код устанавливает заголовок Cache-Control в зависимости от типа файла.
Как работает Cache-Control
Рассмотрим упомянутую выше строку кода кэширования в браузере htaccess :
# 1 Month for most static assets
Данная строка — просто примечание. Файл .htaccess игнорирует строки, начинающиеся с символа # . Это примечание рекомендуется, так как у вас может быть несколько различных наборов данных в качестве решения для кэширования файлов:
Упомянутая выше строка говорит, что, «если файл будет одним из этих типов, то мы сделаем что-то с ним… »
Самое важное в этой строке то, что в ней перечислены различные типы файлов (CSS , JS , JPEG , PNG и т.д. ) и что инструкции кэширования следует применять к этим типам файлов. Например, если вы не хотите, чтобы JPG файлы кэшировались в течение указанного периода времени, можете удалить «JPG «. Если вы хотите добавить HTML , то нужно в этой строке указать «HTML «:
Header set Cache-Control "max-age=2592000, public"
В упомянутой выше строке установлены фактические заголовки и значения:
- Часть «Header set Cache-Control » — устанавливает заголовок;
- Переменная «max-age=2592000 » – указывает, сколько времени займет процесс кэширования (в секундах ). В этом случае мы осуществляем кэширование в течение одного месяца (2592000 ) секунд;
- Часть «public » сообщает о том, что это общедоступно.
«», чтобы оптимизировать сайт по совету инструмента от 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" |
Инструкция работает только в том случае, если 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
Если же сайт на обычном хостинге — тут всё сложнее. Обращайтесь в техподдержку и уточняйте — почему не установлены модули и как можно обойти эту неурядицу. Так как причин по которой хостер не поставил модули — может быть достаточно много.
(1 оценок, в среднем: 5,00 из 5)
Loading...
