Как настроить Используйте кеш браузера для Google PageSpeed Insights. Правильный и универсальный метод. | PingMeUp
Сегодня я хочу поговорить от таком инструменте от Корпорации Добра как Google PageSpeed Insights. Многие используют этот инструмент для оценки быстродействия сайта и вывода рекомендаций по улучшению быстродействия сайтов.
По сути своей эта онлайн-утилита сканирует код сайта, который вы ввели в поле проверки, и выдает ряд рекомендаций по улучшению быстродействия по ряду параметров.
Проверка осуществляется как для мобильных платформ (смартфоны, планшеты), так и для настольных систем (компьютеры, ноутбуки) с полноценными не мобильными операционными системами.
Сегодня затронем один из параметров оптимизации PageSpeed Insights по пункту Используйте кеш браузера.
Браузерное кэширование само по себе функция хорошая и нужная. Работает это следующим образом: при загрузке веб страницы сайта браузер локально сохраняет на диск компьютера основные файлы с нее: изображения, css-стили, скрипты и тому подобные рабочие файлы. При следующем открытии той же страницы сайта с этого же устройства, она уже загрузится в разы быстрее, так как браузеру нет необходимости лишний раз скачивать рабочие файлы сайта – они уже были загружены к вам на диск в прошлое посещение.
Из плюсов кеширования файлов так же можно отметить снижение нагрузки на сам веб сервер, особенно, если сайт популярный и посещаемый – то кеширование вещь необходимая.
Отмечу так же тот факт, что кеширование не распространяется на разного рода счетчики и скрипты Рамблера, Google.Analytics и т.п.
Как и у любой полезной фичи у кэширования есть минусы — если файл на сервере изменился, то у клиента, который заходил на сайт ранее скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем Superсar.png содержал изображение спортивного авто. Вы зашли на сайт, почитали статью и покинули сайт. Но вебмастер решил изменить картинку спорткара на внедорожник, а имя файла оставил прежнее. Через пару дней вы решили еще раз прочитать ту статью с этого же компьютера и этим же браузером открыли сайт со статьей. Когда статья загрузилась вы с увидите картинку спорткар, произошло это потому, что браузер ее закэшировал с названием Superсar.png, и изменившиеся размеры изображения он проигнорировал.
Для того чтобы у вас отобразилась уже новая картинка с внедорожником, вам нужно принудительно очистить кэш браузера, например, комбинацией клавиш Ctrl+F5.
Правильный и универсальный метод — настройка кеширования в файле .htaccess
Для того, чтобы включить кэширование браузером, на вашем сервере в корневом каталоге сайта должен находиться файл .htaccess. Если файла нет, то вам нужно его создать.
Далее необходимо прописать в нем директивы:
<IfModule mod_expires.c> <FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresActive on ExpiresByType image/jpeg "access plus 7 day" ExpiresByType image/gif "access plus 7 day" ExpiresByType image/png "access plus 7 day" <FilesMatch \.(css|js)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule>
Естественно, файл нужно не забыть сохранить по окончании редактирования. Все кеширование на сайте заработало!
Теперь можно проверить работоспособность параметра в Google PageSpeed Insights.
Прописав данные правила, Google Page Speed при повторной проверке сайта, напишет, что кэширование включено, да вы и сами увидите, что сайт стал загружаться намного быстрее.
Если у вас CMS WordPress и вы не хотите (не можете/не умеете/ вам просто лень) создавать .htaccess-файл вы можете прибегнуть к помощи плагина.
Например, W3 Total Cache. Плагин бесплатный и достаточно прост в настройке и установке.
Единственный минус всех плагинов – они очень любят кушать оперативную память сервера и его мощности. Это не страшно, когда плагинов немного, но если их число переваливает за десятки – то лучше обойтись простым и надежным скриптом.
На этом всё. Если есть вопросы – как всегда отвечаю в комментариях.
Мой мир
Вконтакте
Одноклассники
Google+
PageSpeed Insights — используйте кэш браузера
Категория: Нужно знать!
Сайтостроители, анализируя оптимизацию/скорость загрузки своих сайтов при помощи известного сервиса PageSpeed Insights от компании Google, практически постоянно встречается с рекомендацией: «Используйте кэш браузера».
Включенное кэширование позволяет пользователям, повторно посетившим сайт, тратить меньше времени на загрузку страниц.
Активация кэширования браузера для сайта
Рецепт решения данной задачи заключается в использовании файла .htaccess корневой директории сайта. В самом конце файла нужно дописать следующий код:
# Сжатие Text, Html, JavaScript, CSS, Xml: <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </ifmodule> # Кеш браузера <ifmodule mod_expires.c> ExpiresActive On # По умолчанию кеш в 5 секунд ExpiresDefault "access plus 1 days" # Включаем кэширование изображений и Flash элементов на 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 и текстовых файлов на 1 неделю 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 файлов на 1 день ExpiresByType text/html "access plus 43200 seconds" # Включаем кэширование Xml файлов на 10 минут ExpiresByType application/xhtml+xml "access plus 600 seconds" # Нестандартные шрифты сайта ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" </ifmodule>
После данных манипуляций с файлом .htaccess, показатель оптимизации/скорости загрузки блога Ilyakhasanov.ru в PageSpeed Insights поднялся на 14 пунктов.
Исчезли записи «не указан срок действия» напротив каждого элемента списка, в списке остались лишь ссылки на сторонние сервисы: Gravatar, Google Analytics, Yandex Metrika.
Предупреждение Google PageSpeed Insights для «Использовать кэширование браузера». Как я
Я добавил следующий код в мой htaccess, чтобы улучшить кэширование браузера и скорость страницы. Но Google PageSpeed Insights по-прежнему дает мне красный флажок, говорящий о том, что я должен «использовать кэширование в браузере» для многих объектов, даже если они уже кэшированы в течение заданного времени.
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 30 seconds" ExpiresByType text/html "access plus 30 seconds" ExpiresByType image/x-icon "access plus 259200 seconds" ExpiresByType image/gif "access plus 259200 seconds" ExpiresByType image/jpeg "access plus 259200 seconds" ExpiresByType image/png "access plus 259200 seconds" ExpiresByType text/css "access plus 259200 seconds" ExpiresByType text/javascript "access plus 259200 seconds" ExpiresByType application/x-javascript "access plus 259200 seconds" </IfModule>
(259200 секунд = 3 дня)
И вот что говорит Google PageSpeed Insights: мне нужно добиться большего успеха в «использовании кэширования браузера». Хотя, как вы можете видеть, все файлы и изображения настроены на длительность.
http://m.addthisedge.com/…-55fe4c5f093b7938/_ate.track.config_resp (60 seconds) http://s7.addthis.com/js/300/addthis_widget.js (10 minutes) http://website.com/externalimage.jpg (2 hours) http://website.com/externalimage2.jpg (2 hours) https://www.google-analytics.com/analytics.js (2 hours) http://example.com/img/menu.png (3 days) http://example.com/img/nextpage.png (3 days) http://example.com/img/search.png (3 days) http://example.com/img/signup.jpg (3 days) http://example.com/img/signup.png (3 days) http://example.com/logo.png (3 days) http://example.com/style.css (3 days) http://example.com/css.css (3 days)
Google пытается сказать, что 2 часа для некоторых из этих изображений и 3 дня для некоторых других файлов недостаточно длинные? Что я могу сделать, чтобы улучшить производительность для этого? И действительно ли он дает мне красный флаг для своего собственного файла google analytics.js? Есть ли способ улучшить кэширование внешних файлов addthis и аналитики? И я предполагаю, что на самом деле я бы не хотел кэшировать файл аналитики, который может конфликтовать с отслеживанием пользователей, может быть?
И есть ли способ, которым я могу изменить кэширование изображений, которые находятся во внешнем домене, которые в настоящее время установлены на 2 часа? Я хотел бы кэшировать их гораздо дольше.
Любая помощь в увеличении производительности моей страницы с этим очень ценится. Я не знаю, почему он помечает меня красным для этих файлов, которые уже установлены для кэширования. Спасибо.
Автор: Michael d Источник Размещён: 26.03.2017 04:41issue.life
CakePHP Google PageSpeed Insights Используйте кеширование браузера
Я использую CakePHP 2.6 и в данный момент я пытаюсь исправить предупреждения Google PageSpeed, я застрял на этом:
Использование кэширования в браузере Установка даты истечения срока действия или максимального срока действия в заголовках HTTP для статических ресурсов> указывает браузеру загружать ранее загруженные ресурсы с локального диска>, а не по сети.
Это мой файл app / webroot / .htaccess на данный момент
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
<ifModule mod_deflate.c>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
<files *.ctp>
SetOutputFilter DEFLATE
</files>
</ifModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 24 hours"
ExpiresByType application/javascript "access plus 24 hours"
ExpiresByType image/x-ico "access plus 24 hours"
ExpiresByType image/jpg "access plus 24 hours"
ExpiresByType image/jpeg "access plus 24 hours"
ExpiresByType image/gif "access plus 24 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType text/css "access plus 24 hours"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
issue.life
PageSpeed Insights. Используйте кеш браузера
Любой сайт, в том числе созданный и работающий на движке Вордпресс, должен загружаться быстро. Это нужно для:
- удержания пользователей на стадии загрузки сайта;
- комфортной работы людей с вашим ресурсом.
Предлагаю наиболее эффективные решения, которые опробовал лично сам.
Проверяем скорость загрузки сайта
Для начала нам нужно выяснить, насколько наш сайт быстр в плане загрузки: как на компьютерах, так и мобильных устройствах. Я предпочитаю пользоваться PageSpeed Insights от Google. Но есть и другие сервисы, например, этот.
Как видите, мой сайт необходимо ускорить.
Ускорение сайта через кеширование
При прохождении теста в PageSpeed Insights, может быть дана рекомендация “Используйте кеш браузера“.
Если на сайте указаны дата или срок действия статических ресурсов, браузер загружает полученные ранее ресурсы с локального диска, а не из Интернета.
Что это значит? Ваш сайт будет загружаться быстрее за счет обращения к локальным ресурсам, а не сетевым.
Вариант 1
Чтобы выполнить рекомендацию “Используйте кеш браузера”, необходимо добавить в файл .htaccess (лежит в корневой директории вашего сайта на сервере) следующий код:
# Включаем кэш в браузерах посетителей
<ifModule mod_headers.c>
# Все html и htm файлы будут храниться в кэше браузера один день
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
<span data-mce-type="bookmark"></span><<span data-mce-type="bookmark"></span>/FilesMatch>
# Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# Все флэш файлы и изображения будут храниться в кэше браузера один месяц
<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>Пройдите тест PageSpeed Insights заново, результат должен улучшиться.
Вариант 2
В файл .htaccess:
FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> </ifmodule>
Включаем Gzip-сжатие файлов
Gzip-сжатие для файлов CSS, JS, HTML, CSS, JS, HTML включаем также через внесение кода в файл .htaccess:
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ 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>
Вновь проходим тест PageSpeed Insights, оцениваем результат.
Плагин WP Super Cache
Если Вам так и не удалось ускорить ваш сайт, задействуем еще один вариант, на этот раз железный: устанавливаем и активируем плагин WP Super Cache.
Уверен, что результат вы получите хороший. У меня получилось так:
Но ускорить загрузку сайта на мобильных устройствах нам не удалось. Посоветуйте, что можно сделать?
Почитайте также “PageSpeed Insights. Как удалить код JavaScript”
wpxa.ru
Используйте кэш браузера при загрузке сайта
Продолжая тему ускорения сайта, хочу разобраться с советом, который даёт мне в этом отношении 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>Как видите, список внушительный, тут в основном файлы стилей и скрипты. Может это всё и не так уж сильно ускорит сайт, но хочется разобраться из принципа.
Люди пишут, что не все хостинги поддерживают эту функцию на уровне сервера, возможно, мой хостинг тоже. Я написал в техническую поддержку и стал ждать ответа. Ответа пока нет:(
Только что ответили, после моего ещё одного сообщения. Ответ был таков:
Доброго времени суток!
Кэш работает как надо, не кэшируются только одномоментные удаленные библиотеки которые забираются с твиттера, твимга и т.д. на сколько видите, с остальным все нормально.
Ну я пока поверю, что так все оно и есть. У вас есть мысли по этому поводу? Одно из решений этой проблемы я описал в ЭТОЙ СТАТЬЕ…
Не нашли ответ? Воспользуйтесь поиском по сайту
zmoe.ru
Предложение PageSpeed: использование кэширования браузеров… Как? — caching
У меня есть сайт WordPress с настраиваемой темой, которую я создал сам. В настоящее время я работаю над предложениями «Google PageSpeed Insights», чтобы улучшить пользовательский опыт на моем веб-сайте.
PageSpeed предлагает «Использовать кэширование браузера». Ниже приведены результаты:
**Leverage browser caching** Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Leverage browser caching for the following cacheable resources: http:.//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 minutes) http:.//pagead2.googlesyndication.com/pagead/osd.js (60 minutes) http:.//www.google.com/…callback%22%3A%22__gcse.sacb%22%7D%5D%7D (60 minutes)
Итак, в основном, это предлагает мне установить «время истечения срока» для кеша скриптов Adsense до 60 минут.
Я попытался проверить статус кэширования своего веб-сайта с помощью REDbot. Ниже приведены результаты:
Общие
Правильно настроены серверные часы.
Консолидация контента
Ресурс не передает последовательно Vary.
Поддерживается согласование содержимого для сжатия gzip, сохраняя 72%.
Кэширование
Этот ответ позволяет хранить все кеши.
Этот ответ позволяет кешу назначать собственное время жизни свежести.
Мое понимание результатов заключается в том, что мой сайт позволяет кэшировать и позволяет кешу назначать собственное время обновления. Я не использую HTML-теги «meta» для кэширования, поэтому в основном мой сервер настроен таким образом.
Теперь мой вопрос: как бы вручную установить время истечения срока действия скриптов на 60 минут. Я знаю, как использовать файл .htaccess для установки продолжительности кеширования для разных типов файлов ((используя FilesMatch)). Но, по-видимому, этот метод работает для типов файлов, а не для отдельных скриптов в файлах «.php». Итак, как я могу изменить время истечения срока кеширования сценариев adsense?
((Это мой первый вопрос о стеке, поэтому, если есть какая-либо ошибка или недостаток, пожалуйста, укажите его для меня.. Спасибо))
UPDATE:
После ответа от «Andrew» я добавил следующее в мой файл .htaccess.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 hour"
ExpiresByType image/jpeg "access plus 1 hour"
ExpiresByType image/gif "access plus 1 hour"
ExpiresByType image/png "access plus 1 hour"
ExpiresByType text/css "access plus 1 hour"
ExpiresByType text/html "access plus 1 hour"
ExpiresByType text/x-javascript "access plus 1 hour"
ExpiresByType image/x-icon "access plus 1 hour"
ExpiresDefault "access plus 1 hour"
</IfModule>
## EXPIRES CACHING ##
Но это дало мне странные результаты. Pagespeed теперь снизил мой балл и теперь имеет следующие рекомендации:
Использовать кеширование браузера Установка даты истечения срока действия или максимального возраста в HTTP-заголовки для статических ресурсов инструктируют браузер загружать ранее загруженные ресурсы с локального диска, а не сеть. Использовать кеширование браузера для следующих кешируемых ресурсы:
http.://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 minutes) http.://pagead2.googlesyndication.com/pagead/osd.js (60 minutes) http.://www.google.com/…callback%22%3A%22__gcse.sacb%22%7D%5D%7D (60 minutes) http.://www.mananatomy.com/…heme/images/mananatomy_logo_modified.jpg (60 minutes) http.://www.mananatomy.com/…mages/mananatomy_logo_modified_small.jpg (60 minutes) http.://www.mananatomy.com/…s/mananatomy-theme/images/sidebar_bg.jpg (60 minutes) http.://www.mananatomy.com/…ontent/themes/mananatomy-theme/style.css (60 minutes) http.://www.mananatomy.com/…t/uploads/2010/12/basic-anatomy-logo.jpg (60 minutes) http.://www.mananatomy.com/…nt/uploads/2010/12/body-systems-logo.jpg (60 minutes) http.://www.mananatomy.com/…ntent/uploads/2010/12/histology-logo.jpg (60 minutes)
Так что это стало еще более запутанным. Любая помощь???
qaru.site