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. Заходим на сервер в корневую папку сайта.

Корневая папка сайта, если по простому, это папка на сервере где хранятся файлы вашего сайта. Если, к примеру, вы полжите в неё файл robots.txt, то он появится по адресу https://ВАШ_ДОМЕН/robots.txt

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

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

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

Если в вашем счётчике яндекс.метрики нету https://mc.yandex.ru/metrika/tag.js, значит счётчик старый. Зайдите в метрику в настройки и получите новый код.

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. Старый счётчик яндекс.метрики был быстрее.

 

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

TTY
Ответ написан 31 марта 2020 в 00:01. · Изменить грАватар

После проделанных манипуляций общая оценка Page Speed Insight одной страницы
Было 84
Стало 58
Нет, некоторые показатели улучшились, уменьшение влияния стороннего кода удалось,
но в общем целом незачет получился — вернул как было

Doctor Lexium
Ответ написан 2 апреля 2020 в 18:11. · Изменить грАватар

У каждого сервера и сайта своя структура. Кому-то этот вариант помогает, как мне например. Кому-то нет.
Я использовал этот способ на нескольких сайтах и там был прирост скорости. Небольшой, конечно, но всё-же.

Ответ написан 29 мая 2020 в 15:49. · Изменить грАватар

Все так запутано, нет ли какого-нибудь способа попроще?

Doctor Lexium
Ответ написан 31 мая 2020 в 12:20. · Изменить грАватар

Как не быть? Есть. Я добавлю его к этому посту.

Ответ написан 17 июня 2020 в 12:39. · Изменить грАватар

а где в коде счетчика найти эту конструкцию?

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

Doctor Lexium
Ответ написан 19 июня 2020 в 10:19. · Изменить грАватар

В коде счётчика)) Она либо там есть, либо нет. Если нет, значит у вас старый счётчик.

Ответ написан 28 июля 2020 в 08:53. · Изменить грАватар

День добрый.
За инфу спасибо.
Но есть вопрос.

У нас сайт на WP (https://dl-navigator.by). Для установки метрики используем плагин https://ru.wordpress.org/plugins/yandex-metrica/

Почему плагин? Он позволяет настройками исключить посещение сайта пользователями-админами.

Ваш способ это не позволяет. Или есть возможность организовать аналогичный функционал?

Doctor Lexium
Ответ написан 30 июля 2020 в 14:38. · Изменить грАватар

Насколько мне известно, в настройках самой метрики можно указать IP адреса которые следует игнорировать. Обычно SEO-специалисты именно так и делают.
Что касается плагина. Я не лазил в его код, но уверен, что он всего-лишь определяет админ ли пользователь. Если админ, код счётчика на страницах сайта не выводится вовсе. Без плагина это можно сделать двумя строчками кода. При том, вторая строка это фигурная скобка.
Однако, такой способ хуже поскольку до авторизации администратора, код метрики будет присутствовать на страницах, а значит все шатания неавторизованного админина зафиксируются счётчиком метрики.

Подробнее тут.

Ответ написан 21 сентября 2020 в 12:23. · Изменить грАватар

Когда же Гугл перестанет учитывать метрику при оценке скорости загрузки? Свои коды наверняка не считает.

Doctor Lexium
Ответ написан 21 сентября 2020 в 13:35. · Изменить грАватар
  • Скрипт Яндекса необходим для работы сайта и аналитики? Нет. Для всего этого есть аналогичные сервисы Гугла.
  • Скрипт увеличивает время загрузки сайта? Увеличивает.
  • Гуглу выгодно не учитывать скрипты Яндекса и прочих конкурентов? Нет. Не выгодно.

Пока такая ситуация сохраняется, Гуглу нет никакого смысла не учитывать скрипты Яндекса.

Следить за темой по RSS

Напишите комментарий