Отложенная загрузка кода Яндекс.Метрики

В процессе оптимизации нескольких сотен сайтов и в погоне за зелёными попугаями Google PageSpeed выработал для себя сниппет для отложенной (Lazy Load) вставки кода Яндекс.Метрики.

Несмотря на то, что код Яндекс.Метрики недавно стал намного быстрее, Google PageSpeed всё равно ругает на него благим матом, поэтому попробуем решить данный вопрос.

Есть несколько способов отложить выполнение JavaScript на странице:

  • По счётчику через setTimeout
  • По событию загрузки DOM дерева DOMContentLoaded
  • По пользовательскому событию: scroll, touchstart, click, mouseenter

Попробуем объединить это всё это в одну кучу и посмотрим, что из этого выйдет.

add_action(
	'wp_footer',
	function() {
		?>
		<script type="text/javascript">
            ( function () {
                'use strict';

                // Флаг, что Метрика уже загрузилась.
                var loadedMetrica = false,
                    // Ваш идентификатор сайта в Яндекс.Метрика.
                    metricaId     = 123456789,
                    // Переменная для хранения таймера.
                    timerId;

                // Для бота Яндекса грузим Метрику сразу без "отложки",
                // чтобы в панели Метрики были зелёные кружочки
                // при проверке корректности установки счётчика.
                if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
                    loadMetrica();
                } else {
                    // Подключаем Метрику, если юзер начал скроллить.
                    window.addEventListener( 'scroll', loadMetrica );

                    // Подключаем Метрику, если юзер коснулся экрана.
                    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
	}
);

Данный сниппет можно вставить в functions.php вашей активной темы (дочерней темы) или создать новый плагин с данным кодом или создать mu-plugins, используя данный сниппет.

Для тех, кто не понимает, что тут происходит выше по коду, мы сделали простой и бесплатный плагин под WordPress для отложенной загрузки Яндекс.Метрики, Google Analytics и LiveInternet.

Источник: https://www.kobzarev.com/technical-seo/yandex-metrika-lazy-load/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: