Yandex Metrika: Сторонний код заблокировал основной поток

Для веб-мастеров не секрет, что Google’s PageSpeed Insights снимает баллы за код счётчика Яндекс.Метрики. Почему? Банально из за того, что файл tag.js грузится со стороннего ресурса достаточно медленно. У меня показывает 600+ микросекунд.

Убрав счетчик Yandex Metrika, я получаю примерно на 4 балла больше. Это, на минутку, ускорение загрузки на 4%! Но Яндекс.Метрика необходима, как удобный инструмент веб-аналитики, а потому выпиливать её не вариант.

Что остаётся?

Способ №1

Остаётся скачать файл tag.js к себе на сервер, скажем, в папку metrika и использовать его оттуда.

Вот так выгладили баллы в Google’s PageSpeed Insights до этой правки.

А вот так — после.

Очевидно, эффект есть. Но есть и минус. Файл tag.js может меняться, а значит время от времени его нужно скачивать. Руками… Фи!…

Руками качать не будем. Пусть этим занимается Крон. Не тот, который титан из греческой миффологии, а который CronTab на хостинге. Скажем, раз в час.

А теперь пошаговая инструкция на примере хостинга Бегет.

Итак, если Google’s PageSpeed Insights ругается, что сторонний код заблокировал основной поток и винит в этом счетчик Yandex Metrika, мы делаем следующее:

Шаг 1: Создаём в корне сайта папку metrika.

Для этого заходим в корень сайта с помощью FTP-клиента и… Если вы не знаете что такое корень сайта или FTP-клиент, то у вас есть три выхода:

• проконсультироваться у специалиста,
• нанять специалиста
• заняться самообразованием или пойти на курсы.

К слову, вместо FTP, можно использовать SSH-клиент или даже Файловый менеджер, который есть в панели управления хостингом (у Бегета он точно есть).

Шаг 2: Скачиваем tag.js и копируем его в папку metrika, созданную в предыдущем шаге.

Тут тоже всё просто. Ссылка на файл есть в коде счётчика Яндекс Метрики. Вот она https://mc.yandex.ru/metrika/tag.js

Просто переходим по ней, а когда файл откроется в браузере, сохраним его комбинацией клавиш Ctrl-S, а затем просто скопируем в папку.

Шаг 3: Вносим правку в код счётчика Яндекс Метрики.

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

Было (window, document, «script», «https://mc.yandex.ru/metrika/tag.js», «ym»);

Стало (window, document, «script», «/metrika/tag.js», «ym»);

Сохраняем и идём дальше.

Шаг 4: Узнаём полный путь к корню сайта на сервере.

В вебе корень сайта начинается с /. В файловой системе сервера путь до корня может выглядеть примерно так /r/username/sitename/public_html/.

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

Лично я решил не заморачиваться и прописал в подвале сайта вот такой код <?=’Путь к корню: ‘.$_SERVER[‘SCRIPT_FILENAME’]?>, сохранил, обновил страницу в браузере, нажал Ctrl-U и отмотал открывшийся код страницы в самый низ. Там я увидел следующую строчку «Путь к корню: /home/w/redalert/sitename.ru/public_html/index.php».

Убираю index.php, остаётся /home/w/redalert/sitename.ru/public_html/. Это и есть нужный мне путь.

Теперь, когда путь известен, не забываем убрать <?=’Путь к корню: ‘.$_SERVER[‘SCRIPT_FILENAME’]?> из подвала сайта!

Шаг 5. Настраиваю задание для крона.

Не знаю как у вас, а на Бегете достаточно зайти в панель управления хостингом и нажать кнопку CronTab.

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

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

wget -O /home/w/redalert/sitename.ru/public_html/metrika/tag.js https://mc.yandex.ru/metrika/tag.js

/home/w/redalert/sitename.ru/public_html/ — это тот путь к корню сайта, который я получил в шаге 4.

/metrika/ — это папка где мы будем хранить tag.js и откуда он будет грузиться на сайте.

Теперь раз в час крон будет обновлять tag.js без нашего участия.

Собственно, сохраняю и иду измерять скорость в Google’s PageSpeed Insights.

Ура! Она на 4% выше, как и ожидалось.

Способ №2

Ну а теперь, для самых стойких, способ номер 2. Подойдёт тем кому лень заморачиваться с кроном.

1. Заходим на сервер в корневую папку сайта.

2. Создаём там папку metrika.

3. Кладём в папку metrika файл tag.php

4. В коде счётчика меняем https://mc.yandex.ru/metrika/tag.js на /metrika/tag.php

5. В файл tag.php прописываем вот этот код.

<?php
$sorce_url = 'https://mc.yandex.ru/metrika/tag.js';
$filename = 'tag.js';
if (file_exists($filename)) {
	echo file_get_contents($filename);
	$current_datetime = new DateTime();
	$files_datetime = new DateTime(date("F d Y H:i:s.", filectime($filename)));
	$difference = $current_datetime->diff($files_datetime);
	if ($difference->i > 50 || $difference->h > 0) {
		get_tag_js($sorce_url, $filename);
	}
}else{
	echo get_tag_js($sorce_url, $filename);
}

//Выкачиваем tag.js, отображаем его содержимое и кладём в папку
function get_tag_js($sorce_url, $filename) {
	$sorce_data = file_get_contents($sorce_url);
	if ($sorce_data != '') {
		file_put_contents($filename, $sorce_data);
		return $sorce_data;
	}else{
		return 'console.log("Не удаётся получить содержимое файла tag.php");';
	}
}

или скачиваем архив с готовым файлом по ссылке /up/metrika.zip и распаковываем в корень сайта (там уже есть нужная папка и даже tag.js в ней имеется).

6. Тестируем результат.

Как это работает?

При обращении к tag.php, если tag.js отсутствует в папке metrika или с момента его последнего обновления прошло больше часа, tag.js будет скачан с серверов яндекса и его содержимое подставится в tag.php.

Если tag.js свежий, то его содержимое будет подставлено в tag.php сразу.

Просто, очень просто, примитивно даже. Создали папку, кинули туда файл, заменили строчку в счётчике и всё.

Тест

А теперь полевые испытания. Есть у меня сайт wowm.ru. Он не оптимизирован, а значит идеально подходит для эксперимента.

Замеряю скорость до изменений.

Ставлю новый код счётчика (оказывается там был старый), меняю в нём путь к tag.js на свой. Ну и далее по инструкции.

И вот вам результат.

Миленько так. Т.е. стало медленнее.

Может дело в старом коде счётчика?

Ок. Тестируем скорость на новом счётчике, где tag.js берется с серверов яндекса. А затем тестируем скорость с tag.php

Вывод

1. Сообщение «Сторонний код заблокировал основной поток» исчезло.
2. Прироста в скорости, при использовании способа №2, не наблюдается, а даже наоборот.
3. Старый счётчик яндекс.метрики был быстрее.

А с вами был Доктор Лексиум.
Спасибо за внимание.