Используем кеш браузера для 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. Заливаем отредактированный файл на сервер

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

Нужные файлы

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

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

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

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

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

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

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

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



  • http://freethinker.ru/ Сергей FreeThinker

    Ох не думаю я, что геморрой с дополнительной нагрузкой на сервер и подключением крона стоит того, чтобы скачивать себе сторонние скрипты. Тем более для большинства из них время жизни указано. Не спроста же сам Google для своих скриптов ставит время жизни 30-60 минут – значит так надо.

    А внутри сайта время жизни можно указать лишь добавив в конце url знак вопроса с любым параметром – хоть внутри css, хоть в блоке вызова. Например:
    icons.png?0
    Is.js?o

  • http://vasilenko.info/ CaHbKa

    На счет нагрузки, только что с примера выше взял все скрипты (11 штук) и отследил программно время выполнения php скрипта, результат: Скрипт выполнялся 2.4809 сек. От того что cron будет “кушать” 2 секунды раз в день, ничего страшного не будет.

    Тем более у большинства скриптов явно меньше, если это коммерция, то только метрика, аналитика +/- пару скриптов. В этом случаи скрипт выполнялся за 0.5981 сек.

    > для своих скриптов ставит время жизни 30-60 минут

    Можно и крон ставить на столько 🙂 Но, я ставлю на раз в сутки, полет нормальный.

    > А внутри сайта время жизни можно указать лишь добавив в конце url знак вопроса с любым параметром

    Вот этого не знал, спасибо. Правда если устанавливаешь новый плагин, то сразу нужно вносить правку в вызов скрипта, легче раз код прописать в htaccess и спать спокойно.

  • http://freethinker.ru/ Сергей FreeThinker

    ОК, напишу по-другому: если уж такие асы оптимизации, как wikimart, ozon, да и сам Google (проверь хотя бы https://www.google.com/webmasters/ или тот же https://developers.google.com/speed/pagespeed/insights/ !) не парятся по поводу времени жизни (читай “кеша”) сторонних источников, то простым смертным тем более не стоит заморачиваться. 🙂

  • http://vasilenko.info/ CaHbKa

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

  • Yura Yevtikhov

    Здравствуйте! Сделал всё, как описано выше. В папке /js создаются файлы скриптов (папка-755, скрипты-644), но они пустые, а при вызове downloadjs.php выдает ошибку “Warning: file_get_contents(https://www.google-analytics.com/analytics.js): failed to open stream: Connection timed out in /home/uХХХХ/public_html/downloadjs.php on line 5″. Может потому, что сайт на https?
    Буду благодарен за ответ, поскольку php не владею.

  • Yura Yevtikhov

    Разобрался. Нужно указывать адрес https://google-analytics.com/analytics.js

  • http://vasilenko.info/ CaHbKa

    Видимо у себя что-то поменяли, раньше с www работало.

  • Yura Yevtikhov

    Но появилась новая фишка: “Включите сжатие для следующих ресурсов, чтобы уменьшить объем передаваемых данных на 15 КБ (58 %).

    Сжатие страницы https://XXXXXXXXX.XXX/js/analytics.js уменьшит ее размер на 15 КБ (58 %).”, хотя на сайте и сервере сжатие включено. Возможно при скачивании можно указать сжатие?

  • ONE

    Спасибо большое! Очень годная статья!

  • kirpich

    Для тех, у кого WordPress 4+ можно в functions.php прописать такой код, который будет качать скрипты метрики и гугл аналитикс на Ваш сайт. Плюс этого варианта в том, что не нужно трогать крон на хостинге, т.к. работать будет встроенный в WordPress крон. Т.е. и сайт перенести будет проще на другой хост и другие важные мелочи приятные.

    //Закачка скриптов по крону

    add_action(‘wp’, ‘my_activation’);
    function my_activation() {
    if( ! wp_next_scheduled( ‘js_scripts_download’ ) ) {
    wp_schedule_event( time(), ‘daily’, ‘js_scripts_download’); //закачивать скрипты раз в сутки
    }
    }

    add_action(‘js_scripts_download’, ‘downloadJs’);
    function downloadJs($file_url=”, $save_to=”) {
    if(!empty($file_url) && !empty($save_to)){
    $content = file_get_contents($file_url);
    file_put_contents($save_to, $content);
    } else {
    downloadJs(‘https://mc.yandex.ru/metrika/watch.js’, $_SERVER[‘DOCUMENT_ROOT’] . “/js_s/watch.js” ); //путь и имя для скачиваемого скрипта яндекс-метрики на Ваш сайт.
    downloadJs(‘https://google-analytics.com/ga.js’, $_SERVER[‘DOCUMENT_ROOT’] . “/js_s/ga.js” ); //путь и имя для скачиваемого скрипта гугл аналитикс на Ваш сайт.
    }
    }

    Т.е. теперь скрипты будут качаться раз в сутки и они будут у Вас всегда в актуальном состоянии.
    Не забудьте, что в html-коде нужно изменить адрес с yandex.ru на ваш_домен.ru/js_s/watch.js
    Для гугл аналитикса всё точно также будет, нужно поменять пути.
    Делов, на самом деле, 10-15 минут.
    —-

    А также весьма полезным будет дерегистрировать все js-скрипты, а потом заново их регистрировать и сувать именно в подвал, это создаст у посетителя ощущение того, то сайт быстро грузится.
    Первым из скриптов будет jQuery, а потом него ПОСЛЕДОВАТЕЛЬНО будут подгружаться остальные скрипты по важности по убыванию.

    Скажу так. Страница моего сайта коммерческого открывается за 800 миллисекунд.
    Та же страница, но на мобильной версии, генерируется иногда даже за 500 миллисекунд.

    По Google PageSpeed Insights набирает 100/100 баллов по всем показателям.

    Имейте в виду, что этот форум обрезал ссылки и добавил в конце ссылки апостроф ‘
    Поэтому прежде чем запускать скрипт, поправьте это всё
    Всего всем хорошего.

  • http://vasilenko.info/ CaHbKa

    Спасибо, хороший способ!

  • Crypto Rotator

    Подскажи, через какое время после установки кода, закачает скрипты, а то страницу периодически обновляю – пустая папка для закачки

  • kirpich

    Во-первых, вряд ли скачает, если ты ЗАЛОГИНЕН в админке.
    Во-вторых, скрипт настроен на раз в сутки.

  • Crypto Rotator

    ну-ну, какая разница, кто обновит станицу ))) не работает код твой короче

  • kirpich

    Не работает? Ок. Я удалил код, чтобы никто не наткнулся на него, он весь такой неправильный и только у меня на двух сайтах работает.

  • Crypto Rotator

    ну вообще-то давно уже есть куча плагинов, которые выполняют PHP код повремени, имитируя Cron, твой код не работает в самой последней версии WordPress. версия PHP 5.6

  • http://wsjoom.ru/ Pavel Mankov

    Здравствуйте!
    Перенёс скрипт к себе на сайт (https://mc.yandex.ru/metrika/watch.js). Теперь инспектор кода показывает кучу ошибок. Видимо в скрипте есть запросы к файлам, которых нет у меня на сайте.

  • https://aliall.ru/ Aliexpress на русском

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

  • Александр Чумаков

    всем привет предлагаю бесплатный тренинг открытия магазина
    прибыль 100000 р в месяц https://goo.gl/r5i8oV

  • Роман Крамар

    Так понимаю, Ваш код с этим поможет

    Объяснение:

    Используйте кеш браузера для следующих ресурсов: (https://developers.google.com/speed/docs/insights/LeverageBrowserCaching)

    http://toursector.org.ua/wp-content/gallery/foto_morshyn/thumbs/thumbs_mor01.jpg (не указан срок действия)

    http://toursector.org.ua/wp-content/gallery/foto_morshyn/thumbs/thumbs_mor02.jpg (не указан срок действия)

    http://toursector.org.ua/wp-content/gallery/foto_morshyn/thumbs/thumbs_mor03.jpg (не указан срок действия)

  • Роман Крамар

    И такого 172 штуки, все jpg

  • Роман Крамар

    Почему спрашиваю. У вас в описании кода это “# сжатие text, html, javascript, css, xml:” а вот jpg, png код сожмет )

  • http://vasilenko.info/ CaHbKa

    Не сжимает, а кеширует. Для картинок есть правило:

    ExpiresByType image/jpeg “access plus 4 weeks”
    ExpiresByType image/png “access plus 30 days”

    Если у вас не работает этот код, обратитесь в службу поддержки хостинга

  • Сергей Грицков

    А если в скрипте используется относительная адресация на файлы размещённые на том же сервере? После копирования скрипта себе на сервер он ведь не сможет найти те файлы, так как уже будет искать их у нас, а не на том сервере с которого его скопировали.
    Я конечно не силён в работе с js-скриптами, но разве я не прав?

  • Рома Шкабко

    Если кому нужно, можете подключать эти JS (обновляются каждый день)
    http://static.flamix.info/cron/js/analytics.js (гугл)
    http://static.flamix.info/cron/js/watch.js (яндекс)

    На своем сайте сделал, добился 100% оптимизации – https://ru.flamix.software/
    Может оно и не надо, но мне приятно 🙂

  • Galina Rampova

    спасибо!!! яндекс с гуглом ушли. а живосайт продолжает писать 24 часа и гугл pagespeed на это продолжает ругаться. до этого на живосайт ругался тк вообще не было срока действия. сейас 24 часа. подскажите как можно увеличить, чтобы ошибка совсем ушла?

  • http://vasilenko.info/ CaHbKa

    Так же само поставьте скрипт jivosite на крон

  • Galina Rampova

    так и сделал :-))) но гугл ругается именно на файл сохраненый кроном на моем сайте.
    Пишет, что ему 24 или 48 часов осталось всего.

  • http://vasilenko.info/ CaHbKa

    Настройки в htaccess эти прописаны?

    ExpiresByType text/javascript “access plus 604800 seconds”
    ExpiresByType application/javascript “access plus 604800 seconds”
    ExpiresByType application/x-javascript “access plus 604800 seconds”

  • Galina Rampova

    да, прописан. но именно этот js от живосайта никак не поддается почему-то 🙁

  • Рома Шкабко

    Ссылки также доступны и по https

  • Sergey Lidoff

    отличная статейка)

  • https://seovedenie.ru/ Александр Шмаков

    Здравствуйте Александр!
    Спасибо за столь логичное решение. Ваша статья очень помогла мне достичь 100 из 100 в Google Page Speed https://seovedenie.ru/

  • Вилы Выкидные

    Не нужно ничего скачивать никакими кронами, просто отшиваем юзерагента PageSpeed Insights в области кода, где у нас аналитика установлена, ггы..

    тут вставляем код гугл аналитики и (или) яндекс метрики

    радуемся, аве мне 🙂

  • http://www.eve-ua.com Антон Кулявец

    Спасибо большое, супер расписано. Но есть проблема.
    https://vk.com/fonts/opensans300.woff (не указан срок действия)
    https://vk.com/fonts/opensans400.woff (не указан срок действия)
    https://vk.com/fonts/opensans600.woff (не указан срок действия)
    https://vk.com/fonts/opensans700.woff (не указан срок действия)
    А в скрипте только путь к js, как с этим бороться?

  • http://vasilenko.info/ CaHbKa

    Что за скрипт? Нужно посмотреть, отпишите через форму контактов

  • mozilaFFF

    Были 2 ошибки
    https://mc.yandex.ru/metrika/watch.js
    https://static.doubleclick.net/instream/ad_status.js
    Все сделал по инструкции, в футере, где подключал метрику заменил путь к своему сайту и ошибка исчезла.
    Но никак не пойму где и как поменять путь, чтоб исчезла вторая ошибка. Скрипт создается, но его сайт не подхватывает, как я понимаю и берет данные по старому пути.

    P.S. на сайте стоит All in one seo pack вроде в нем чет похожее нашел (но это не точно)

  • http://vasilenko.info/ CaHbKa

    Если грешите на плагин какой-то, отключите его и посмотрите исчезла ошибка или нет. Как обнаружите плагин проблемный, уже в коде копайте.

  • http://vk.vom Дмитрий Давыдов

    Привет! Классная статья, с удовольствием прочитал) Перенес тут вчера файлы в облачное хранилище, установил заголовки, а гугл все равно ругается:
    https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2F220111.selcdn.ru%2Fupload-5ebd04715319860dce29f85890fc755a%2Fresizer2%2F21%2F001%2F001151616706ec90aaa0884a907f9014.png

    Но сторонний тест говорит, что с заголовками все хорошо:
    https://bertal.ru/index.php?a3477642/https://220111.selcdn.ru/upload-5ebd04715319860dce29f85890fc755a/resizer2/21/001/001151616706ec90aaa0884a907f9014.png#h

    И кому верить?)

  • http://inkognitod.ru Денис Михайлович

    Супер скрипт!
    У меня jivo не загружается, ошибку выдает Uncaught Error: Failed to evaluate the widgetId or configHost
    Как ты его победил?

  • Григорий Ефремов

    Добрый день. Не появляются файлы в папке /js и куда то пропал jivosite с сайта. Вроде все правильно делал

  • Григорий Ефремов

    Хотя Гугл Пэйдж спид на файлы ругаться перестал. Вот не знаю, теперь работает ли вообще аналтика…

  • Андрей Сиротин

    Большое спасибо за отличную статью. Небольшой вопросик.
    Как быть с такого рода кодом:
    На сайте выведена карта google
    https://maps.googleapis.com/maps/api/js?key=AIzaSyDdKj1nb4jN6ssQGyMYaYbmVleGwp0Ctu0

    Как именно здесь нужно поступить?

  • big_jacky

    Похоже действительно на PHP 5.6 не работает. Пол года над у себя запускал – работало. Сейчас хостинг перешёл на новую версию РНР – перестало работать.

  • Administrator

    Александр, сталкивались ли лично с закачкой на сайт JS скриптов VK и FB?
    В первую очередь интересует FB. Скорее всего этот номер с соц сетями не пройдёт.
    В первую очередь интересует http://connect.facebook.net/en_US/sdk.js

  • Olya

    Добрый день. Не работает фейсбук и незнаю как гугл карты апи вписать. Есть у кого решеные?

  • http://www.sila.bz/ Ренат Зайдуллин

    Спасибо! Отличная статья, пригодилась. Единственно не разобрался с кодом JivoSite – на хостинг он скачивается, но у него нет расширения. Какую конструкцию для него правильно написать в htaccess (что-то вроде ExpiresByType или еще как). А то теперь на него гугл ругаться стал
    … /nrDybLg3YO (24 часа) И кстати да, на сайте тоже отображаться консультант перестал.

  • http://www.sila.bz/ Ренат Зайдуллин

    И для яндекс.карт тоже не разобрался 🙁
    https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU (5 минут)

  • Alex

    Откройте консоль и смотрите на ошибки там

  • Yan Inoy

    Выдаёт 403 ошибку You don’t have permission to access downloadjs.php on this server. Наверное я что-то не так сделал?

  • Сергей Федотов

    Все отлично работает, но Jivosite отказывается работать.
    Выдает –
    Uncaught Error: Failed to evaluate the widgetId or configHost

    Стоит какая-то защита от запуска js на стороне сервера.

  • Павел Свирский

    Спасибо! Ценная инфа, пригодилась.
    Сделал кэш браузера по Вашему методу через htaccess только для своих картинок (jpg, gif, png) . Остальное (скрипты, css , сторонние скрипты) не трогал. Этого уже оказалось более чем достаточно. Скорость поднялась, PageSpeed Insights теперь показывает в пределах 86…93 из 100 (было 70…78 из 100).

    Единственное, не совсем понял. Вот если у меня была картинка на странице с именем например image1.jpg , кэш браузера у нас на 30 дней сохраняется, а я на следующий день эту картинку видоизменил (т.е. под image1.jpg у меня уже другой рисунок). Что тогда произойдет у пользователей , которые зашли вчера и автоматом закешировали себе image1.jpg (старое изображение), когда они зайдут завтра – что они увидят – старое изображение или новое ?
    Пробовал у себя – ГуглХром упорно показывает старую картинку , сколько ни нажимай кнопку “обновить” , а Яндекс-браузер сам сразу обновил картинку. Не понимаю, от чего это зависит.

    Может, нет смысла кешировать на 30 дней, а ставить 2 или 3 дня (если картинки часто меняются на сайте под тем же именем) ?

  • http://play-angry-birds.org/ Angry Bird

    Спасибо за ценную информацию! Этот Гугл со своими требованиями уже достал, честно говоря….

  • Дмитрий Кандауров

    Все прикольно, Но некоторые моменты не ясны:
    1) // Указываем URL, затем папку от корня сайта и имя файла с расширением. (Оставляем так же???
    // Проверьте чтобы на папке были права на запись 777/755???
    // Метрика???
    downloadJs(‘https://mc.yandex.ru/metrika/watch.js’, realpath(“./js”) . ‘/watch.js’);

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

  • Julia Randall

    Спасибо, очень пригодилось!

  • Alexandr Ostryanin

    спасибо, код для .htaccess очень помог.

  • Илья

    Добрый день!
    Вторая часть почему-то не работает.
    Создал каталог oblomow.ru/js/ и положил в него файл dw.php
    Содержание файла как у вас:

    Обращаюсь к этому файлу и ничего не происходит.
    Права у каталога и у файла 777
    Подскажите, пожалуйста, чём может быть дело?