Как ускорить скорость загрузки сайта, метрика и движовосайт тянут вниз?

Question

[Константин]

Установили на сайт метрику и чат jivosite и скорость загрузки увеличилась с 3 сек до 8 (*в мобильной версии ).
К сожалению чаты и метрика нам жизненно необходимы, но и загрузка долгая мешает жить.
Как можно решить проблему скорости загрузки?

Answer 1

[Игорь Воротнёв]

Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});

Comments

[Vladiiimiiir]

Дядя ты просто лучший! Хорошего вечера!

[verelar]

А можно ли пример работающего скрипта для вставки в футер?
Пример с несколькими счетчиками, а то упихать только один jivosite получается, если размещаешь 2 скрипта то не грузится ни один.

[Игорь Воротнёв]

verelar, так в ответе как раз и есть пример работающего скрипта. В setTimeout ставите все, что нужно. Если ошибки лезут - то это конфликты самих скриптов.

[Алексей Махметхажиев]

Проверяйте после такого решения цели чтобы срабатывали. Если они настроены в метрике и ГА.

[Игорь Воротнёв]

Алексей Махметхажиев, а что с целями может случиться?

[Алексей Махметхажиев]

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

[Игорь Воротнёв]

Алексей Махметхажиев, если они перестали собираться, то проблема 99.99% не в этом откладывании - здесь очень простой код который никак не может влиять на сами цели. Скорее всего у вас конфликт в другом месте.

[Den299]

Игорь Воротнёв, добрый день!
Не могли бы вы указать пример кода Яндекс.Метрики для вставки в ваш скрипт и пример подключения js файла.
Заранее спасибо!

[Игорь Воротнёв]

Den299, вставляете код прямо вот там где комментарии. Тот код, который вам яндекс дал, то что внутри тегов script

[Den299]

Игорь Воротнёв, спасибо!
А как js файл подключить подскажите, пожалуйста.

В плагинах на Joomla просто вставляю /is/test.js или в виде ссылки https на файл.

[Игорь Воротнёв]

Den299, гуглите как подключать скрипты в WordPress. Это есть и в официальной документации. wp_enqueue_scripts().

[Игорь Воротнёв]

Alexs7, идея с removeEventListener мне нравится, а вот слушать mousemove - не уверен. Впрочем, без тестов хз насколько это ок или нет. Из опыта могу сказать что статистика до и после перехода на этот скрипт по многим проектам нигде не проседала, все в порядке.

[amir21]

Игорь Воротнёв, а как и где подключить этот код?

[Игорь Воротнёв]

amir21, в основной js-файл вашей темы (там где ваши кастомные скрипты) или в отдельный js-файл которий будете грузить отдельно

[Сергей Арсентьев]

увы не получилось, добавил внутрь коды счетчиков (яндекс, google и moclients), но ничего не произошло.
менял задержку с 1000 на 9000, все равно тот же moclients мгновенно показывается, как будто и не действует задержка. Вот такой у меня код в футере: prnt.sc/tp8y51
Может что не так сделал?

[Игорь Воротнёв]

Сергей Арсентьев, у вас теги script внутри тегов script. Для начала изучите основы HTML и JavaScript, тогда все встанет на свои места. Или наймите кого-то на фрилансе для этой задачи.

[Сергей Арсентьев]

Игорь Воротнёв, ну я и чувствовал, что бредово )) но мало ли...
у меня теги грузятся конкретным готовым кодом, я не могу их изменить, они хранятся в базе шаблона (своя специфика). Могу только обернуть во что-то. Может есть скрин где ваш код работает с яндекс и google счетчиками, я бы по нему понял, подойдет ли решение или нет для меня, спасибо.

[Игорь Воротнёв]

Сергей Арсентьев, не бредово, а просто не соответствует базовому синтаксису языка. Не нужно пытаться говорить умными фразами, не бойтесь и не стесняйтесь признать, что вы в этом не разбираетесь на достаточном *техническом* уровне - в этом нет ничего плохого. Дело не в том где они хранятся (тем более "в базе шаблона" - такого "хранилища" не существует), дело не в изменении и не в оборачивании. Вам нужно понимать javascript, чтобы корректно вставить нужный код в нужном месте. Мой скрин вам вряд ли поможет, но если настаиваете - вот пример яндекс-метрики:

[Сергей Арсентьев]

да, я js почти не знаком, но смысл то понятен, в "базе шаблона" я имел ввиду в базе данных, то есть сам код счетчика там хранится неизменно, и я не могу его разбирать на отдельные элементы. Спасибо за скрин, по нему сразу понял, что мне это решение, к сожалению, не подойдет, попробую что-нибудь еще поискать )

[Alexey Gnevyshev]

Игорь Воротнёв, во-первых, спасибо за Ваш вариант!
Во-вторых, тоже подумал о движении мышью, и может клике, как предложил Alexs7. Не всегда надо подключать Метрику только после скролла.
А если страница небольшая и скролл особо не делают? А если это главная, вверху меню, слайдер, и нам как бы хотелось бы, чтобы метрика фиксировала клики по ним?
(карта кликов, да и просто статистика переходов)
Получается, если мы привязываемся только к скроллу, то эти данные мы теряем.

[Alexey Gnevyshev]

Но если рассматривать не для Метрики, а к примеру для виджета чата - скролл самое то!!!

[Игорь Воротнёв]

Алексей Гневышев, вы совершенно правы! Я дал лишь пример реализации, а уже конкретные ивенты, на которые подвешивать код – дело каждого конкретного случая.

[Андрей]

Игорь Воротнёв, тут есть один большой минус, вы не увидите статистику отказов. Т.е. не узнаете сколько пользователей зашли и не поскролив сразу вышли.

[Игорь Воротнёв]

Андрей, Да, часть данных теряется. Так же как часть будет утеряна из-за блокировщиков рекламы. Тот же Safari теперь из коробки к чертям режет часть аналитики, а это 17% пользователей. Firefox вроде тоже собирается (или уже).

Вам критически важна точная статистика отказов? Тогда не используйте подобный метод. Любая оптимизация подразумевает компромисс.

[Андрей]

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

[Миржалол Мирхомитов]

Игорь Воротнёв, Привет. Сделал как на скрине.
Код добавил в footer
Но все равно не работает. PageSpeed ругается

[Raimond]

Скажите а прикрутить такую конструкцию можно для яши if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
тем самым чтобы в метрике была зеленая метка по проверки счетчика...

[Северное Сияние]

Миржалол Мирхомитов, привет, через какой сервис проверял сайт, что на скриншоте?

[Миржалол Мирхомитов]

Северное Сияние, https://pagespeed.web.dev/ на этом сайте

Answer 2

[Артур]

Отложить их загрузку на секунд 5?

Comments

[Константин]

Думаете поможет? У меня стоит <script async>

[Роман]

Тоже самое хотел предложить)

[Артур]

Константин, у себя и рекламу и счетчик загружаю через 5 сек, и получаю 98-99 баллов в пейджспид

[Константин]

Артур, можно пример кода?

[Артур]

setTimeout(function () { /* тут код счетчика */  }, 5000)

Для подключения внешнего файла, живосайт например тудаже в таймаут можно написать что-то типо:

s = document.createElement('script');
s.src = '/js/compiled.js';
s.async = true;
document.body.appendChild(s);

В src кладете то, что нужно

[Артур]

Константин, еще вариант, без таймаута, в футере прописать подключение после загрузки страницы

document.addEventListener('DOMContentLoaded', function () {
/*подключаем скрипты*/
})

[Константин]

Артур, спасибо

[Константин]

Артур,

document.addEventListener('DOMContentLoaded', function () {
<script async src="//code.jivosite.com/widget.js" jv-id="zJJgiBOGYO"></script>
})

Как правильно вписать 2-ю строчку?)

[Antonio Solo]

в чем смысл такого "ускорения" ? функционал метрики и живосайта все равно будет недоступен пока не загрузится?

[Константин]

Antonio Solo, смысл в том что google paga speed даст лучше оценку, соответственно 1 из 200 факторов ранжирования преодолен

[Antonio Solo]

Константин, спасибо, не знал

[Артур]

Константин, я же привел пример подключения внешнего файла, нужно лишь совместить)

document.addEventListener('DOMContentLoaded', function () {
s = document.createElement('script');
s.src = '/js/compiled.js'; /// Тут в src положите путь подключаемого файла
s.async = true;
document.body.appendChild(s);
})

[Mysterion]

[offtop]результат google pagespeed не влияет на ранжирование[/offtop]

[Артур]

Mysterion, pagespeed показывает скорость сайта, а скорость влияет на ранжирование.

[Adamos]

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

[Mysterion]

Артур, скорость влияет только отчасти и результат pagespeed вообще не роляет на ранжирование и никак не связан с реальной скоростью загрузки. У вас сайт на какую аудиторию рассчитан? Откуда скорость pagespeed проверяет? Из той же страны? Сайт будет плохо ранжироваться если человек его откроет и в течение короткого промежутка времени закроет и уйдет на другой. А не если он будет долго грузиться.

[Артур]

Mysterion, а если сайт будет долго открыться, он его не закроет?
Как раз скорость очень влияет на поведенческие)
Pagespeed как один из инструментов измерения скорости. Вы что хотите сказать, что не надо его юзать?

[Mysterion]

Артур, я хочу сказать, что не стоит загоняться из-за пары секунд в результатах pagespeed. Тем более из-за времени полной загрузки сайта. Если упомянутые виджеты в подвале сайта, то визуально сайт у пользователя прогрузится раньше, чем загрузится полностью. И это нормально.

Answer 3

[Андрей]

Мой вариант:

window.onReadyState = (e, t) => {
  const a = ["loading", "interactive", "complete"],
    o = a.slice(a.indexOf(e)),
    n = () => o.includes(document.readyState);
  n() ? t() : document.addEventListener("readystatechange", (() => n() && t()))
}
window.onReadyState("complete",function(){(function(m,e,t,r,i,k,a)..... })

Comments

[Андрей]

метрика загрузится после полной загрузки контента

[Игорь Воротнёв]

Андрей, да, тоже интересное решение. И менее радикальное. Надо будет поэкспериментировать с ним.

[Gerich4444]

А куда в данном случае метрику засунуть? Сам ее код. Если можно, скиньте, пожалуйста, полный пример с кодом метрики

[Андрей]

Gerich4444, function(){(function(m,e,t,r,i,k,a)..... } я жетам написал

[Gerich4444]

window.onReadyState = (e, t) => {
const a = ["loading", "interactive", "complete"],
o = a.slice(a.indexOf(e)),
n = () => o.includes(document.readyState);
n() ? t() : document.addEventListener("readystatechange", (() => n() && t()))
}
window.onReadyState("complete",function(){(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://mc.yandex.ru/metrika/tag.js", "ym"); ym(57194593, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });

Так? А это куда?

[Gerich4444]

Андрей,

<noscript><div><img src="https://mc.yandex.ru/watch/57194593" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

[Андрей]

Gerich4444, обернуть в тег

[Андрей]

Gerich4444, это под

<script>
window.onReadyState = (e, t) => {
const a = ["loading", "interactive", "complete"],
o = a.slice(a.indexOf(e)),
n = () => o.includes(document.readyState);
n() ? t() : document.addEventListener("readystatechange", (() => n() && t()))
}
window.onReadyState("complete",function(){(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://mc.yandex.ru/metrika/tag.js", "ym"); ym(57194593, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/57194593" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

[Gerich4444]

Андрей, я конечно извиняюсь, но можете вставить как надо? может кому-то еще пригодится. совсем не силен в яве. Вот что я имею:

<!-- Yandex.Metrika counter --> <script type="text/javascript" > (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://mc.yandex.ru/metrika/tag.js", "ym"); ym(57194593, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/57194593" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->

[Gerich4444]

Андрей, спасибо большое!

[Gerich4444]

Только метрика теперь горит красным (неактивна), это нормально?

[Андрей]

Gerich4444, это норма

[Dmaw]

Спасибо!
Чисто ваш код уменьшил число баллов, добавил внутрь setTimeout на 1 сек, стало 96-98 баллов.
Посмотрим как метрика будет работать.

[William]

Каким образом можно вставить яндекс конструктор карты?

[Михаил Погосян]

Google page speed перестал ругаться на метрику, но и метрика перестала регистрировать посещения+вдобавок в консоле браузера ошибка "Unexpected end of input"
Вот мой код:

<script>
window.onReadyState = (e, t) => {
const a = ["loading", "interactive", "complete"],
o = a.slice(a.indexOf(e)),
n = () => o.includes(document.readyState);
n() ? t() : document.addEventListener("readystatechange", (() => n() && t()))
}
window.onReadyState("complete",function(){
	(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(ХХХХХХХ, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });
</script>

<noscript><div><img src="https://mc.yandex.ru/watch/1111111" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

Может что не так вставил?

[Lord-Ifrit]

Gerich4444,
Подскажите пожалуйста как удалось решить проблему?

Answer 4

[Антон Р.]

Как можно решить проблему скорости загрузки?

Попробовать Разные сервисы с чатами. Envybox например.

Comments

[Константин]

К сожалению в чата платежки завязаны, (дживосайт оплата) , а компания не поворотливая, есть стандарты.

Answer 5

[Xtray]

1. А метрика разве не асинхронно грузится?
2. На скрине проблема не со временем загрузки, а со временем выполнения.

Answer 6

[shevelevdesign]

Рабочий скрипт отложенной Яндекс метрики с примером кода есть здесь