- Что не так с Яндекс Метрикой?.
- За счёт чего можно ускорить Яндекс Метрику?
- Оригинальный код ускорения Яндекс Метрики, предлагаемый для установки в
functions.phpWordPress - Моя модификация кода ускорения Яндекс Метрики
Что не так с Яндекс Метрикой?
Время постоянно укоряется и мобильные телефоны сейчас мощнее большинства офисных компьютеров. Однако, поисковые машины всё время заворачивают гайки для сайтов и выкручивают руки вебмастерам, требуя всё больших и больших скоростей от обычных сайтов. Видимо, чтобы выдавить их совсем из интернета так, чтобы остались только топовые поисковые сервисы и не менее топовоые социальные сети. Тогда можно будет в полную силу развернуться и нажиться на этом... Ну а пока имеем то, что имеем, - ужесточение требований к сайтам.
Итак, Google PageSpeed Insights выдаёт красные и оранжевые попугайские крылышки тем, кто не перевёл свой сайт на Турбо-страницы (от Яндекса или от Google). А почему? А потому что мощности у гигантов IT-индустрии конечно и сервера мощнее, и кабеля толще, и капитализация больше. Ну весь смысл в этом (как я вижу) в том, чтобы иметь возможность полностью контролировать трафик и действия пользователей в Интернете. На чужих серверах не особо забалуешь, а вот на своих можно творить всё, что захочется (в рамках законов физики и умения программистов-наёмников).
И вот тут начинается "самое интересное". Стоит поставить бесплатный сервис сбора статистики Яндекс Метрику или всю ту же Google Analytics, как скорость загрузки сайта резко падает. (С их то мощностями, да такие вот провалы. Но что имеем, то имеем.) Есть вариант написать собственный сервис обработки статистики у себя на сервере (или взять готовый), но это дополнительные ресурсы, которые нужны ещё много для чего, помимо замены бесплатных, но тормознутых сервисов от IT-гигантов на собственные локальные.
И вот, в очередной раз измерив количество попугайских крылышек, я озадачился этим вопросом и нашёл интересную статью по ускорению работы Яндекс Метрики. Вернее, по уменьшению её тормозов. Через некоторое время опробовал свой модифицированный вариант "смазки" этих тормозов. И он оказался рабочим. Им и поделюсь ниже.
За счёт чего можно ускорить Яндекс Метрику?
Немного теории (из статьи по ссылке выше)...
Код Яндекс.Метрики работает на JavaScript (что не удивительно), поэтому нужно отталкиваться от того, что есть события, которые хорошо бы отложить до того, как все попугайские крылышки поисковыми ботами будут посчитаны.
А конкретно, есть несколько способов отложить выполнение JavaScript на странице:
- По счётчику через
setTimeout. - По событию загрузки DOM дерева
DOMContentLoaded. - По пользовательскому событию:
scroll,touchstart,click,mouseenter.
В итоге получим предварительную проверку на все эти события, и если ничего не происходит, то Яндекс Метрику не запускаем!
Ну и конечно же нужна проверка на то, что страницу просматривает пользователь, а не робот-шпион от Яндекса, который может доложить начальству, что мы тут что-то мухлюем... И непонятно, чем для нас это может кончится, так что лучше перестраховаться.
Оригинальный код ускорения Яндекс Метрики, предлагаемый для установки в functions.php WordPress
В принципе, всё ясно из комментариев:
add_action(
'wp_footer',
function() {
?>
<script type="text/javascript">
( function () {
'use strict';
// Флаг, что Метрика уже загрузилась.
var loadedMetrica = false,
// Ваш идентификатор сайта в Яндекс.Метрика.
metricaId = 0123456789,
// Переменная для хранения таймера.
timerId;
// Для бота Яндекса грузим Метрику сразу без "отложки",
// чтобы в панели Метрики были зелёные кружочки
// при проверке корректности установки счётчика.
if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
loadMetrica();
} else {
// Подключаем Метрику, если юзер начал скроллить.
window.addEventListener( 'scroll', loadMetrica, {passive: true} );
// Подключаем Метрику, если юзер коснулся экрана.
window.addEventListener( 'touchstart', loadMetrica );
// Подключаем Метрику, если юзер дернул мышкой.
document.addEventListener( 'mouseenter', loadMetrica );
// Подключаем Метрику, если юзер кликнул мышкой.
document.addEventListener( 'click', loadMetrica );
// Подключаем Метрику при полной загрузке DOM дерева,
// с "отложкой" в 1 секунду через setTimeout,
// если пользователь ничего вообще не делал (фоллбэк).
document.addEventListener( 'DOMContentLoaded', loadFallback );
}
function loadFallback() {
timerId = setTimeout( loadMetrica, 1000 );
}
function loadMetrica( e ) {
// Пишем отладку в консоль браузера.
if ( e && e.type ) {
console.log( e.type );
} else {
console.log( 'DOMContentLoaded' );
}
// Если флаг загрузки Метрики отмечен,
// то ничего более не делаем.
if ( loadedMetrica ) {
return;
}
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym");
ym( metricaId, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true });
// Отмечаем флаг, что Метрика загрузилась,
// чтобы не загружать её повторно при других
// событиях пользователя и старте фоллбэка.
loadedMetrica = true;
// Очищаем таймер, чтобы избежать лишних утечек памяти.
clearTimeout( timerId );
// Отключаем всех наших слушателей от всех событий,
// чтобы избежать утечек памяти.
window.removeEventListener( 'scroll', loadMetrica );
window.removeEventListener( 'touchstart', loadMetrica );
document.removeEventListener( 'mouseenter', loadMetrica );
document.removeEventListener( 'click', loadMetrica );
document.removeEventListener( 'DOMContentLoaded', loadFallback );
}
} )()
</script>
<?php
}
);Моя модификация кода ускорения Яндекс Метрики
Т.к. я очень люто отношусь к WordPress, предпочитая по крайней мере Joomla, то, естественно, мне потребовалось более универсальное решение:
<script type="text/javascript">
( function () {
'use strict';
var loadedMetrica = false,
metricaId = 0123456789,
timerId;
if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
loadMetrica();
} else {
window.addEventListener( 'scroll', loadMetrica, {passive: true} );
window.addEventListener( 'touchstart', loadMetrica );
document.addEventListener( 'mouseenter', loadMetrica );
document.addEventListener( 'click', loadMetrica );
document.addEventListener( 'DOMContentLoaded', loadFallback );
}
function loadFallback() {
timerId = setTimeout( loadMetrica, 1000 );
}
function loadMetrica( e ) {
if ( e && e.type ) {
console.log( e.type );
} else {
console.log( 'DOMContentLoaded' );
}
if ( loadedMetrica ) {
return;
}
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(metricaId, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true,
trackHash:true
});
loadedMetrica = true;
clearTimeout( timerId );
window.removeEventListener( 'scroll', loadMetrica );
window.removeEventListener( 'touchstart', loadMetrica );
document.removeEventListener( 'mouseenter', loadMetrica );
document.removeEventListener( 'click', loadMetrica );
document.removeEventListener( 'DOMContentLoaded', loadFallback );
}
} )()
</script>- В этом решении используется версия счётчика Яндекс Метрики актуальная на конец февраля 2024 года. Но, если она снова обновилась, нужно всего лишь вставить полученный код от Яндекса вместо строчек 31...42.
- Чтобы всё было универсальным, нужно в строке 5 поставить свой ID Яндекс Метрики (в переменную
metricaId). - Ну, и чтобы наверняка, можно увеличить время активации Яндекс Метрики на странице, выстави таймер не на
1000, а на4000.
После внесения правок у себе на сайт, можно через день-два попробовать снова запузомерить показатели с помощью Google PageSpeed Insights и сравнить количество попугайских крылышек. Особенно это актуально для мобильных версий сайта.
Ещё раз спасибо Кобзарёву Михаилу Николаевичу за почти готовое решение по получению дополнительных попугайских крылышек от Google PageSpeed Insights, который жутко не любит никакие (даже от Google) сторонние счётчики статистики на сайтах.
