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 канала и вывести кнопку «подписаться»
Понравилась статья? Поделиться с друзьями:
Комментариев: 6
  1. Камилла

    Вот уж не думала что PageSpeed Insights меня может удивить, но ему это удалось! На днях, увидев новшество и потратив пол часа на его изучение, с ужасом обнаружила, что скачать оптимизированные изображения уже нельзя! Было не приятно, т.к. PageSpeed Insights обновился по тихому. Короче, что бы не быть мной, прочтите статью как раз об этом (ссылка в логине).

  2. Роман

    Здравствуйте, сейчас метрика дает такой код как у гугла с тегом
    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, после чего поменяйте путь в исходном коде на свой.

      1. Алексей

        Добрый день!
        Решение по поводу https://mc.yandex.ru/metrika/advert.gif, очень простое: создаем в каталоге еще одну папку, допустим papka_gif и помещаем туда файл /.gif — все работает проверено.

        1. Максим

          Будьте добры напишите подробнее тоже никак не могу избавиться от advert.gif

          1. Алексей

            Добрый день! Когда писал вроде работало, гугл не ругался, сегодня смотрю опять все сначала…. Так что приношу извинения. Рано обрадовался, если что то найду напишу.

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

;-) :sad: :roll: :razz: :mrgreen: :lol: :idea: :evil: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности блога Олега Лютова.