Используем кеш браузера для Google PageSpeed

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

Для тех кто оптимизировал сайт по рекомендациям инструмента от Google PageSpeed Insights, сталкивались в проблемой невозможности закешировать js скрипты сторонних сайтов.

По сути это не столь важный показатель для оптимизации, это как переносить из шапки сайта в футер CSS и JS элементы, хотя у самого Google с этим пунктом проблемы 🙂

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

О чем сегодня поговорим:

Кеш браузера своих элементов

Для начала сделаем кеш для своих скриптов, для примера посмотрим на блог Devaka.ru (на момент написания статьи)

  • https://devaka.ru/assets/copyright.min.js (не указан срок действия)
  • https://devaka.ru/assets/i/566.jpg (не указан срок действия)
  • https://devaka.ru/assets/i/icons.png (не указан срок действия)
  • https://devaka.ru/assets/i/postcomm-left.png (не указан срок действия)
  • https://devaka.ru/assets/i/postcomm-right.png (не указан срок действия)

Чтобы исправить эту проблему, нужно зайти в файл .htaccess и вставить в самый низ этот код:

После этого можете выполнить проверку своего сайта в инструменте Page Speed и если все хорошо, там должны остаться ссылки на яндекс.метрику, аналитику, социальные сети и т.д.

Если будут ссылки на левые домены, то вполне возможно, что вас взломали и встроили свои скрипты (редиректы, подписки..), для того чтобы такого не повторялось почитайте предыдущую статью о самостоятельной защите сайта от вирусов и удалите подозрительный код в шаблоне.

Примеры сторонних скриптов

Если в первом шаге, все сделали верно, должны увидеть примерно такой список:

Используйте кеш браузера для следующих ресурсов

  • https://apis.google.com/js/api.js (30 минут)
  • https://apis.google.com/js/platform.js (30 минут)
  • https://mc.yandex.ru/metrika/watch.js (60 минут)
  • http://www.google-analytics.com/analytics.js (2 часа)
  • http://code.jivosite.com/script/widget/NuT1gBLsC6 (не указан срок действия)
  • https://static.doubleclick.net/instream/ad_status.js (15 минут)
  • http://connect.facebook.net/ru_RU/all.js (20 минут)
  • http://an.yandex.ru/system/context.js (60 минут)
  • http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 минут)
  • https://pagead2.googlesyndication.com/pagead/osd.js (60 минут)
  • http://disqus.com/next/config.js (60 секунд)
  • И т.д.

Правда может быть всего несколько URL на метрику и аналитику например, но это не столь важно, рецепт исправления для всех один и тот же.

Кеш сторонних элементов

Изначально хотел статью написать только с этим пунктом, но чувствую будет много вопросов, а теперь к сути.

Мы ни как не можем повлиять на время кеша стороннего сайта, но мы можем делать это внутри своего сайта. Самый логичный ход в этой ситуации, скачивать автоматически свежие скрипты метрики, аналитики и т.д. к себе на сайт с помощью крона (скрипт присутствует)

Давайте теперь по порядку!



Шаг 1. Копируете список всех скриптов, которые показывает Google PageSpeed в блокнот или можно прямо с браузера.

Шаг 2. Создаем файл на хостинге с расширением php и вставляем в него следующий код:

Обращаем внимание на вызов функции:

Их в коде для примера 3, но вы можете их создать сколько нужно, просто копируйте и вставляйте ниже или удалите лишние.

В этой строке меняем 3 значение:

Правим1. Скрипт который будем закачивать к себе на сайт

2. Путь куда сохранять файл:

В моем случае это папка js, т.е. точный путь к ней будет vasilenko.info/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)

3. Имя скрипта, если с расширением .js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.

Шаг 3. Заливаем отредактированный файл на сервер

И переходим по прямой ссылке, например https://vasilenko.info/downloadjs.php, если все сделали правильно, в папке JS (или какую вы указали в файле), будет лежать нужный файл/файлы.

Нужные файлы

Шаг 4. Ставим файл на крон для автоматического обновления файлов

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

Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а так же указываем время раз в час/сутки или любое другое время.

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

Шаг 5. Меняем путь к JS в счетчике или скрипте

Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например https://vasilenko.info/js/watch.js

Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.

Остались вопросы, задавайте в комментариях!