Google pagespeed Insights, как включить кэш браузера внешних файлов

Всем привет! Сегодня я хочу рассказать, как сделать кэш внешних элементов в Google PageSpeed Insights, для увеличения скорости вашего сайта. Суть будет заключаться в том, чтоб скачать js и другие подгружаемые файлы с внешних ресурсов к себе на сайт.

Google PageSpeed Insights - как включить кэш браузера

Как включить кэширование файлов в браузере

Прежде, чем писать о том, как подключить кэширование файлов для вашего сайта в браузере на стороне пользователя, хочу пояснить, что такое кэш.

Кэш — хранение просмотренных файлов на вашем компьютере, что в свою очередь увеличивает скорость загрузки страницы, либо сайта при повторном его просмотре. Кэш имеет свой срок хранения, после чего он обновляется, либо удаляется.

С тем, что такое кэш мы разобрались. Теперь, давайте проверим наш сайт в сервисе PageSpeed и убедимся, что google рекомендует нам использовать кэш браузера. Вот выдержка из сообщения google PageSpeed Insights.

Используйте кэш браузера

Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.

Используйте кэш браузера

Если эти файлы расположены на вашем ресурсе, то вы можете прописать код кэширования браузера в файле 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"
 
# Включаем кэширование изображений и флэш на месяц
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 и текстовых файлоф на одну неделю
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 файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
 
# Включаем кэширование xml файлов на десять минут
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>

Вставив этот код в файл htacces, вы можете перепроверить свой сайт в сервисе google PageSpeed
Insights. Если в разделе «используйте кэш браузера» всё отлично, значит, у вас там будут
только ссылки на внешние ресурсы, такие как аналитика, Яндекс метрика, социальные
кнопки и прочее.
Лично, я параллельно с этим кодом использую возможности своего хостинга для кэширования файлов на стороне пользователя. Это выглядит следующим образом.Кэш браузера на хостинге

Как видите, мой хостинг позволяет включить кэширование на стороне браузера и выставить уровень сжатия и период хранения файлов. Также, я использую плагин для быстрой загрузки страниц wp super cache, но о нём я, может, как-то расскажу своим читателям, подписавшимся на обновления блога.

Как включить кэш внешних файлов в Google PageSpeed Insights

Если вы выполнили рекомендации для кэширования файлов у себя на блоге. Вы должны, в инструменте Google PageSpeed Insights, увидеть только ссылки на внешние ресурсы. У вас должно быть, что-то схожее.google pagespeed InsightsКак видно из скриншота, Google PageSpeed Insights ругается на внешние ресурсы, такие как Яндекс метрика, google аналитика и другие. Сейчас я вам расскажу, как исправить эту ошибку и сделать ссылки на внешние ресурсы внутренними и кэшируемыми на стороне вашего сервера.

Используем кэш браузера для внешних ресурсов

Так, как файлы внешних ресурсов не принадлежат нашему сайту их необходимо в первую очередь скачать. Для того чтоб скачать внешний файлы со сторонних ресурсов, мы должны создать файл kesh_js.php со следующим кодом. Советую, пользоваться блокнотом Notepad++ для быстрого и корректного добавления кода в файл.

<?php function 

downloadJs($file_url, $save_to)
{ $content = file_get_contents($file_url); file_put_contents($save_to, $content); }

// Указываем URL, затем папку от корня сайта и имя файла с расширением.
// Проверьте чтобы на папке были права на запись 777/755 

// Метрика 
downloadJs('https://mc.yandex.ru/metrika/watch.js', realpath("./js") . '/watch.js'); 
// Google Analytics 
downloadJs('http://www.google-analytics.com/analytics.js', realpath("./js") . '/analytics.js'); 

// Для скриптов без расширения 
downloadJs('http://code.jivosite.com/script/widget/NuT1gBLsC6', realpath("./js") . '/NuT1gBLsC6'); ?>

Для того чтоб прописать нужный нам код. берем, копируем эту ссылку:

downloadJs(сюда вставьте ссылку из PageSpeed/metrika.js, realpath(«./papka_js«) . ‘/metrika.js — сюда вставьте конечный файл’);

Таким образом, вы можете добавлять множество запросов. Единственное не забывайте следить, чтоб у вас не было повторяющихся файлов в папке. В этом случае, используйте один файл для нескольких скриптов, как правило, это один и тот же скрипт, либо переименуйте его.

После, того, как добавили код в файл kesh_js.php, вы можете назвать его иначе. Его необходимо залить в корень нашего сайта. Также в корне сайта, необходимо создать папку papka_js, либо под другим именем с правами доступа 777/755. Для того чтоб выставить права доступа папке, советую использовать Fillizille.

Для этого просто открываем программу fillizilla. Далее, выбираем папку и выставляем права доступа, обязательно 777, после чего меняем обратно на 755. Это также можно сделать в панели управления вашего хостинга, если нет желания использовать эту программу. Я покажу, скриншот выставления прав доступа в программе Fillizilla.как выставить права доступаПосле чего открываем раздел «права доступа к файлу» и вводим наше значение 777/755.

выставляем права доступаДальше, нам необходимо запустить наш файл для скачивания внешних скриптов и изображений в папку papka_js. Для этого, просто введите в адресную строчку https://адрес вашего сайта/kesh_js.php. Примерно, через 5-10 минут, можете проверить содержимое папки, если оно пустое, значит, вы сделали что-то не так. Ищите ошибку. В папке papka_js, должны быть скрипты, необходимые для кэширования на стороне браузера, через наш сайт. Вот, как это выглядит у меня.

кэш внешних файлов

Как включить планировщик заданий для сайта (cron)

Следующим шагом, нам нужно включить планировщик заданий для нашего сайта, чтоб наш скрипт https://адрес вашего сайта/kesh_js.php запускался, ежедневно. Благодаря, этому на нашем сайте, будет всегда актуальная версия файлов с внешних ресурсов. Даже, если разработчики внесут изменения в свой код, мы всегда будем иметь рабочую версию на сайте, благодаря планировщику заданий.

Для того чтоб запланировать задания для вашего сайта, вам нужно перейти в панель управления своим хостингом и прописать один из вариантов кода.

запуск задания через GET. При необходимости запуска cron-задания с учётом контекста движка:

GET https://site.ru/script.php

где site.ru — имя вашего домена, а script.php — имя файла с заданием;

запуск задания через WGET. Альтернативный вариант запуска cron-задания с учётом контекста движка:

wget -q -O - https://site.ru/script.php&gt; /dev/null 2&gt;&amp;1

где site.ru — имя вашего домена, а script.php –— имя файла с заданием;

В нашем случае, мы должны прописать:

GET https://адрес вашего сайта/kesh_js.php

Либо выбрать альтернативный вариант, я лично остановился на первом.

С тем, что прописывать мы разобрались, теперь открываем наш хостинг и переходим в панель управления им. Я использую, панель управления ISPmanager, если у вас другая ищите вкладку планировщик задания, либо cron.

ХостингПосле выбираем нашу услугу, у меня сейчас HOST-0. Это стартовый тариф хостинга, который в любой момент можно сменить на более мощный, доплатив разницу.

вход в хостинг

Далее, нам нужно выбрать вкладку «планировщик», либо cron.

Планировщик задания

Теперь, открываем вкладку «создать».

Создать планировщик

Теперь дело за малым, добавить этот код в планировщик задания нашего хостинга.

 GET https://адрес вашего сайта/kesh_js.php 


Планировщик cron
При желании, вы всегда можете изменить запланированные действия. Для этого выберите вашу задачу и перейдите во вкладку «изменить».
Планировщик задания
Вот так вот, просто можно настроить планировщик задания у себя на хостинге.

P. S. Не забываем сменить URL, возможно синтаксис команды у вас будет другой. Проверьте примеры cron команд в справке вашего хостинга или утоните в тех.поддержке.

Теперь, нам остается изменить вызов наших js и других внешних файлов на внутренние с нашего сайта.

Меняем путь внешнего ресурса на свой, для увеличения скорости pagespeed Insights

После, всех действий сделанных выше, нам остаётся найти вызов внешних файлов и заменить их ссылки на свои внутренние.

Для этого мы опять открываем инструмент PageSpeed и копируем внешнюю ссылку, типа https://mc.yandex.ru/metrika/watch.js, ищем, где она у нас выводится, и заменяем его на путь внутри сайта, например https://ваш сайт.ru/js/watch.js.

очистить кэш браузера

После чего чистим кэш браузера. Для Google Chrome, используем сочетание клавиш ctrl+shift+delete и проверяем работу сайта. Также, рекомендую ещё раз прогнать ваш сайт через инструмент PageSpeed Insights.

На этом у меня все, желаю вам хорошего показателя индекса качества сайта, благодаря этому способу ускорения страницы. В следующей статье, я расскажу, как создать красочную кнопку подписки youtube для своего блога, так что не забудьте подписаться на обновления. Всем пока!

Рекомендую прочесть:  Как изменить название youtube канала и вывести кнопку «подписаться»
Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Роман

    Здравствуйте, сейчас метрика дает такой код как у гугла с тегом
    https://mc.yandex.ru/metrika/tag.js
    вместо
    https://mc.yandex.ru/metrika/watch.js
    ……………………..

    как решить вопрос с этим ?

    Используйте кеш браузера для следующих ресурсов:
    https://mc.yandex.ru/metrika/advert.gif (60 минут)

    откуда он его подтягивает непонятно, и с инете нет ответов….

    1. Лютов Олег (автор)

      Здравствуйте, по-поводу advert.gif (он его берет с этого запроса https://mc.yandex.ru/watch/26162535 и трансформирует), честно сказать пока не разобрался и оставил, как есть. Если, смогу решить в будущем эту проблему, то обязательно о ней напишу. По первому вопросу: вам главное, указать путь к файлу на вашем хостинге, к примеру //ваш сайт/js/tag.js, либо //ваш сайт/js/watch.js, после чего поменяйте путь в исходном коде на свой.

Добавить комментарий