Как настроить Leverage Browser Caching в Вордпресс. Кэширование браузером wordpress
Как настроить Leverage Browser Caching в Вордпресс
Если вы проверяли свой сайт на скорость в тесте Google PageSpeed Tools, GTmetrix или Pingdom, вы могли получить предупреждение «Leverage browser caching» или «Leverage browser caching for the following cacheable resources».
Это значит «Используйте кеширование в браузере» или «Используйте кеширование в браузере для следующих кешируемых ресурсов».
Содержание:
Что такое Leverage Browser CachingКак установить срок хранения файлов в браузере посетителя
Как изменить время хранения JS файла Google Analytics
Что такое Leverage Browser Caching
Каждый раз когда браузер загружает страницу, ему нужно загрузить все html, css, js файлы и картинки, находящиеся на этой странице. Эти файлы могут быть большими или маленькими. Чтобы при загрузке следующих или уже посещенных страниц не загружать одну и ту же информацию, например, контент уже посещенной страницы, шапку сайта, фавикон, сайдбар и так далее, используется кеширование в браузере посетителя.
Leverage Browser Caching — это правило, которое определяет, как долго браузер должен хранить контент, картинки, css или js в браузере посетителя. Когда время хранения этих файлов истечет, сервер даст команду браузеру посетителя очистить кеш.
В Вордпрессе нет встроенной функции использования кеширования в браузере посетителя. Каждый раз, когда посетитель запрашивает какую-то страницу, серверу приходится генерировать и посылать посетителю свежие версии страниц. На передачу большего количества информации тратится большее количество времени и большее количество ресурсов сервера.
Кеширование в браузере позволяет установить срок хранения статичных ресурсов в http-заголовках, так что браузер может использовать кешированные версии файлов с жесткого диска компьютера посетителя вместо того, чтобы скачивать их с сервера еще раз.
Это значительно увеличит скорость загрузки страниц и уменьшит нагрузку на сервер.
Как установить срок хранения файлов в браузере пользователя в Вордпресс
Вы можете сделать это вручную или при помощи плагинов.
Вручную:
Чтобы установить срок хранения файлов вручную, вам понадобится отредактировать файл .htaccess, который находится в корневой папке вашего сайта. Вы можете попасть в корневую папку сайта через менеджер файлов вашего хостинга, или с помощью ftp-клиента. Файл .htaccess может быть скрытым, поэтому включите показ скрытых файлов.
После того, как вы нашли этот файл, добавьте в него этот код:
Вы можете изменить время хранения тех или других файлов по своему усмотрению, если какой-то тип файлов вы хотите обновлять чаще, установите другой интервал. Google и Pingdom рекомендуют установить срок хранения для этих ресурсов не менее 1 недели и до 1 года.
Сохраните и загрузите на сервер. Не забудьте удалить кеш из браузера и из плагина кеширования, если вы его используете.
При помощи плагина W3 Total Cache:
Вы можете изменить настройки Leverage browser caching для CSS и JS файлов в разделе Browser Cache, секция CSS & JS. В моем случае я хочу установить время хранения для файлов JS, равное 691.200 секунд (8 дней).
Настройки HTML & XML и Media & Other Files находятся в соседних секциях и настраиваются аналогично.
При помощи плагина Hummingbird:
Эти настройки находятся в разделе Caching, секция Browser Caching:
Это автоматические настройки, если вы хотите изменить срок хранения для отдельных типов файлов, сделайте это здесь:
Сохраните настройки, обновите кеш.
Как изменить время хранения JS файла Google Analytics
Файл https://www.google-analytics.com/analytics.js является JS файлом и может быть кеширован в браузере посетителя на заданное количество времени, но Гугл не позволяет это сделать, так как время от времени они меняют этот файл для улучшения отслеживания поведения посетителей сайта.
Мое мнение — не стоит гнаться за цифрой 100 в тестах скорости сайта, я доволен если сайт получает около 80 баллов в этих тестах.
Посмотрите на результат тестирования страницы https://developers.google.com/ тестом Google PageSpeed:
Если вы все еще хотите изменить время хранения этого файла в браузере, следуйте следующим шагам.
Как изменить Leverage Browser Caching для файла Google Analytics вручную
Чтобы изменить время хранения файла analytics.js, вам нужно хранить этот файл на своем сервере и загружать этот файл на сайт со своего сервера.
- Откройте файл https://www.google-analytics.com/analytics.js в новой вкладке и скопируйте весь код.
- Создайте папку на сервере и назовите ее google-analytics.
- В это папке создайте текстовый файл и вставьте в него код, который вы скопировали ранее.
- Переименуйте файл в ga-local.js
- Замените URL в коде Google Analytics на адрес созданного файла. Должно получиться http://my-site.ru/google-analytics/ga-local.js
- Перенесите ваш новый код Google Analytics в футер сайта.
Проверьте ваш сайт на скорость в тесте Гугл, это предупреждение должно пропасть. Минус этого способа в том, что вам нужно будет время от времени обновлять этот файл вручную.
Другой минус в том, что отчет Гугл Аналитикс может содержать несоответствующие данные из-за того, что ваш скрипт устарел.
Как изменить Leverage Browser Caching для файла Google Analytics при помощи плагина
Чтобы изменить время хранения файла analytics.js, вам нужно установить плагин Complete Analytics Optimization Suite (CAOS)
Настройки плагина находятся в меню Настройки -> Optimize Analytics.
- Введите ваш код Гугл Аналитикс.
- Выберите место для вставки кода.
- Нажмите Save Settings.
Этот плагин создает файл analytics.js на вашем сервере и использует его для сервиса Гугл Аналитикс. Плагин автоматически обновляет файл analytics.js на вашем сервере с сервера Гугл через определенные промежутки времен по cron-расписанию.
***
Устранение предупреждения Leverage browser caching — https://www.google-analytics.com/analytics.js (2 hours) добавит вам 1 балл в тесте Гугл.
Надеюсь, статья была полезной. Если остались вопросы — задавайте в комментариях.
techbear.ru
Включаем кеш браузера на стороне пользователя
👁4 215 просм.
В этой статье продолжаем рассматривать как можно ускорить загрузку сайта. Ранее мы обсудили Как включить gzip сжатие и ускорить загрузку сайта. Сегодня узнаем как включить кеш браузера на стороне пользователя при помощи файла .htaccess .
Зачем включать кеш браузера на стороне пользователя
Зачастую при создании нового сайта программисты не особо уделяют внимание скорости загрузки сайта браузером. Особенно если на этот пункт не было сконцентрировано внимание в Техническом Задании для разработки сайта. И после выхода нового творения в свет, веб-специалист, который занимается развитием и продвижением данного проекта может наблюдать очень печальную картину, просканировав сайт на скорость загрузки в PageSpeed Insights от Google.
Вот далеко не полный список проблем, с которыми мы можем столкнуться, и которые замедляют скорость загрузки сайта на стороне браузера пользователя:
И одна из рекомендаций сервиса PageSpeed, как раз необходимость включить кеш браузера.
Некоторые из читателей могут задаться вопросом, а собственно зачем нужно включать этот кеш, и ускорять скорость загрузки сайта? Ведь сайт и так не плохо работает.
А причины для этого как минимум две:
- Если сайт долго загружается, то пользователь может не дождаться ваших супер эффектов, задуманных дизайнером для привлечения внимания, а просто закроет ваше творение искусства и попросту перейдет на сайт конкурентов, возможно менее красочный, но более быстрый и отзывчивый. Ведь никто из нас не любит долго ждать. 🙂
- Чем дольше скорость загрузки сайта, тем ниже его будут выдавать поисковые системы по ключевым запросам, относительно сайтов ваших конкурентов. А это уже существенная угроза развитию вашего бизнеса.
Как включить кеширование файлов в браузере на стороне пользователя
Если ваш проект разработан на популярной 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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | # Включение кеша в браузерах посетителей сайта <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" ExpiresByType application/x-javascript "access plus 604800 seconds" # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html "access plus 43200 seconds" # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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" ExpiresByType application/x-javascript "access plus 604800 seconds" # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html "access plus 43200 seconds" # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> |
В данном коде вы можете заменить значения month, weeks, days, minutes, seconds на свои, если это будет необходимо, и вы посчитаете нужным увеличить или уменьшить время жизни кеша.
Заключение
При помощи выше описанных методов вы сможете включить кеширование данных на стороне пользователя и тем самым уменьшить скорость загрузки сайта. Что положительно повлияет на лояльность посетителей к вашему сайту и благоприятно скажется на SEO вашего сайта.
Однако нужно помнить, что поисковая оптимизация сайта, это комплекс различных мер по улучшению отзывчивости сайта требованиям поисковых систем и повышению качества сайта и расположенного на нем контента для большего удобства его потребления конечным пользователем. Поэтому лишь одним включением кеша не обойтись 🙂
Думаю на просторах интернета вы уже могли столкнуться с похожими на предложенные в этой статье методами включения кеширования на стороне пользователя. Буду благодарен, если в комментариях поделитесь своим опытом в их использовании.
Расскажите, была ли полезной для вас эта статья?
web-specialist.info
Как сделать кэширование в браузере для wordpress сайта ? — WDfiles — Блог файлообменника
Привет !
Решил написать про ещё один плагин для создания кэширования на стороне браузера. Суть заключается в том, что вы освобождаете свой сайт от кэширования файлов и доверяете данную работу браузеру. Соответственно ваш сайт освобождается от определённой нагрузки и как следствие улучшается производительность сайта. Настоятельно рекомендую вам сделать кэширование на стороне браузера и оптимизировать свой сайт, тогда эффект будет очень существенным.
Плагин — Browser Caching with .htaccess, вы сможете установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.
Чтобы настроить плагин, перейдите по вкладке: Инструменты — Browser Caching.
На странице настроек плагина, если нажать на кнопку — modify Expires, то вы сможете изменить временные сроки кэширования файлов, но я рекомендую оставить всё без изменений. По умолчанию всё правильно указано.
Нажав на кнопку — check .htaccess file, можно проверить файл .htaccess на наличие кода кэширования браузером. Если в файле нет строк указанных зелённым цветом, то значит у вас не включено кэширование браузером. Значит можно активировать кэширование.
Внимание ! Перед активацией кэширования браузером, деактивируйте и удалите все плагины, которыми вы пользовались для кэширования сайта. Они вам больше не нужны.
Чтобы активировать кэширование в браузере, нажмите на кнопку — activate Browser Caching.
После успешной активации кэширования, у вас в верху страницы появится надпись:
— You are now using BROWSER CACHING ! — Сейчас вы используете браузер кэширование !
Вот и всё, можете забыть про слово кэш, теперь это не ваша забота. Если остались вопросы, напишите комментарий. До новых встреч !
wdfiles.ru
Как сделать кэширование в браузере для wordpress сайта ?
Привет !
Решил написать про ещё один плагин для создания кэширования на стороне браузера. Суть заключается в том, что вы освобождаете свой сайт от кэширования файлов и доверяете данную работу браузеру. Соответственно ваш сайт освобождается от определённой нагрузки и как следствие улучшается производительность сайта. Настоятельно рекомендую вам сделать кэширование на стороне браузера и оптимизировать свой сайт, тогда эффект будет очень существенным.
Плагин — Browser Caching with .htaccess, вы сможете установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.
Чтобы настроить плагин, перейдите по вкладке: Инструменты — Browser Caching.
На странице настроек плагина, если нажать на кнопку — modify Expires, то вы сможете изменить временные сроки кэширования файлов, но я рекомендую оставить всё без изменений. По умолчанию всё правильно указано.
Нажав на кнопку — check .htaccess file, можно проверить файл .htaccess на наличие кода кэширования браузером. Если в файле нет строк указанных зелённым цветом, то значит у вас не включено кэширование браузером. Значит можно активировать кэширование.
Внимание ! Перед активацией кэширования браузером, деактивируйте и удалите все плагины, которыми вы пользовались для кэширования сайта. Они вам больше не нужны.
Чтобы активировать кэширование в браузере, нажмите на кнопку — activate Browser Caching.
После успешной активации кэширования, у вас в верху страницы появится надпись:
— You are now using BROWSER CACHING ! — Сейчас вы используете браузер кэширование !
Вот и всё, можете забыть про слово кэш, теперь это не ваша забота. Если остались вопросы, напишите комментарий. До новых встреч !
dommol29.ru
Ускорение WordPress кэширование браузера | Toffi Design
Используйте кэширование браузера, чтобы ваши веб-страницы работали быстрее. Используя кэширование браузера, вы можете значительно увеличить скорость загрузки веб-сайта. Поскольку Google начинает рассматривать скорость сайта как параметр SEO, веб-мастера могут использовать кэширование браузера для повышения скорости сайта и получения лучшего рейтинга в поисковых системах.
Как избавиться от “ETag”
Прежде всего, нам нужно отключить заголовок “ETag”, так как мы будем использовать “Expires”. Технология “ETag” является одним из механизмов, с помощью которых HTTP обеспечивает веб-проверку кэша, известна как медленная и проблематичная – даже YSlow, расширение Firebug проверяющее степень оптимизации сайта, жалуется на это.Добавьте в файл .htaccess: (находится в корневой папке сайта)
Header unset Pragma FileETag None Header unset ETag
Для чего необходимо кэширование в браузере пользователя?
Если вы задаете срок хранения или максимальный возраст кэша в заголовках HTTP для статических ресурсов, современные браузеры будут загружать ранеезагруженные статические ресурсы, такие как изображения, css, javascript, pdf, swf и т. д. С локальных дисков, а не по сети.
Поэтому, если вы настроите свой веб-сервер на установку кеширующих заголовков и примените их ко всем статическим ресурсам, которые будут кэшироваться,ваш сайт будет загружаться намного быстрее. Добавьте следующий код в .htaccess
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##Это добавляет заголовок будущего будущего “expires” (срок “жизни” кэша) к вашему статическому контенту (изображения, js, css и т. д.).
Сжатие компонентов
Сжатие на сайте уменьшает размер элементов и значительно ускоряет загрузку сайта, поэтому необходимо реализовать некоторую форму сжатия для ваших компонентов.
<FilesMatch "\\.(js|css|html|htm|php|xml)$"> SetOutputFilter DEFLATE </FilesMatch><IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
toffi-design.com
