Как добавить на сайт счётчики аналитики не ухудшая скорость загрузки?

Question

[Deyle]

Добрый день
Стоит задача настроить ретаргетинг во всех соц.сетях
Соответственно нужно поставить пиксели/счетчики отслеживания, но они все замедляют сайт, учитывая сколько их:
Яндекс Метрика
Гугл Аналитикс
Пиксель ФБ
Пиксель ВК
Пиксель Майтаргет

Как их лучше установить без вреда скорости сайта? Чтоб не навредить SEOшке, да и пользователям

Answer 1

[pcdesign]

Что на счет такого варианта:

<script>
  setTimeout(function(){
      // Код счетчиков
    }, 5000); 
</script>

Даем на загрузку страницы 5 секунд и только 5 секунд спустя подгружаем все это барахло.

Comments

[Aza Broflovski]

ахахах

[Sergey]

Это барахло должно загрузиться максимально быстро - иначе оно бессмысленно ))

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

Так точно не надо. 5000 слишком много. Начинать разгружать основной поток загрузки надо с 100мс и дальше, но нельзя делать только по времени.

[sasmoney]

так тогда сами боты не смогут его загрузить

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

sasmoney, всё смогут

[vada]

Алексей Махметхажиев, нет, не смогут. Практика показала, что яшка при значении большем 1500 мс не может отработать и данные не собираются.

[pcdesign]

vada, а у меня работает.

[vada]

pcdesign, какое значение ставите?

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

vada, а зачем 1500мс? От 100мс надо начинать, но как бы тоже надо с умом делать. Не только Яндекс, но и другие скрипты и на разное время, размазывать по потоку загрузки.
Кстати, если метрика красная, то это не значит что данные не собираются.

Answer 2

[Александр Фалалеев]

1. Вышеуказанный совет использовать Tag Manager верен, но всё-равно счётчики будут замедлять сайт.

2. Настоящие индейцы вполне могут обходиться без всех этих счётчиков. Для всех задач достаточно связки из трёх компонентов:

Яндекс.Вебмастер
SearcheConsole

goaccess your.domain.ru.access.log -o report.html --log-format=COMBINED

Comments

[AstonMartin]

Как с этими компонентами сделать ретаргетинг?

[Александр Фалалеев]

AstonMartin, "мелочи" и даже "середнячкам" ретаргетинг нафиг не упёрся. А "крупняки" используют или Битрикс с его модулем "Веб-аналитика", либо самописные, либо другие системы аналитики но строго расположенные на самих своих серверах - никакого стороннего чужого кода они на сайт не тащат.

[AstonMartin]

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

[Александр Фалалеев]

AstonMartin, Триггерные рассылки в модуле "Email-маркетинг" Битрикса работающие в связке с модулем "Веб-аналитика" ну если это не ретаргетинг то я совсем не в теме :)

И ни одного стороннего кода на сайте нет :) !

[AstonMartin]

Александр Фалалеев, при чем тут вообще рассылки?))

Сделайте, например, рекламу в ФБ на лукалайк аудиторию, такую как те, кто был на вашем сайте за прошлый месяц.

[Александр Фалалеев]

Чем реклама по email от рекламы в ФБ отличается по сути ?

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

Всё тоже самое что и с рекламой обычной.

Триггерность = ретаргетинг (по принципу действия)

[Stensed]

Александр Фалалеев, выглядит, будто вы пытаетесь продвинуть битрикс, упоминая его тут во всех ответах.
Чтоб был емейл человека его нужно собрать. А если человек зашел в инет.магазин, посмотрел товар и ушел. И как теперь его по почте догнать ? верно, никак, ведь почту мы не знаем.
Бред предлагать рассылку по емейлу, когда задача совсем другая стоит.

[Александр Фалалеев]

Stensed,

1. Битрикс как пример селф-хостинг аналитики. И он такой отнюдь не один. Если меркетоулухи знают только ГА, Метрику и без ФБ Пикселя жить не могут то это проблемы владельца бизнеса что халатно относится к кадровому вопросу.
2. Разговор про ретаргетинг я не начинал.

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

))) этот подход не будет работать в обычном мире, где маркетологи и разработчики работают над одним проектом

Answer 3

[Пума Тайланд]

Все счётчики асинхронные и никак на скорость загрузки сайта не влияют

Comments

[Deyle]

Кто то говорил что в Я.Метрике может стоять некая "пауза" которая ждет пока юзер не начнет скроллить, насколько это реально?

[Пума Тайланд]

Deyle, Глупости, вы же видите код ничего такого там нет, зачем выдумывать когда можно самому посмотреть что и как

[neol]

Думаете асинхронные счётчики грузятся через libastral?

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

Причем тут асинхронность? Про загрузку основного потока почитайте.

[Пума Тайланд]

Алексей Махметхажиев, при том что они грузятся после того как все загрузится у меня на всех сайтах стоят эти счётчики и все сайты грузятся быстро, если бы они замедляли сайты я бы давно нахрен снёс бы все счётчики не задумываясь

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

Пума Тайланд, нет, это не так работает

[Пума Тайланд]

Алексей Махметхажиев, а как по вашему это работает ?

[Пума Тайланд]

Алексей Махметхажиев, Ну вот например один из сайтов
https://cheapvps.ru/
в гугл пейджспиде выдает 99 баллов из ста
https://developers.google.com/speed/pagespeed/insi...
стоит гугл аналитикс и яндекс метрика

можно посмотреть вотерфол как все грузится на том же пейджтесте
https://www.webpagetest.org/result/210615_BiDcAQ_e...

В каком месте я не прав тыкните меня мордой.

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

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

ассинк не дает ничего для счетчиков, их откладывать надо иначе

[Пума Тайланд]

Алексей Махметхажиев, а смысл
Я вам показывал пример где стандартная встреча счётчика, и выдает 99 баллов по пейджспиду Гугла, куда ещё лучше то?

[svm]

Пума Тайланд, 99 баллов для компьютера. Для мобильных 83-85 выдает.

[Пума Тайланд]

svm, ну вы же видите в отчёте что это никак не связано со счётчиками)))

[svm]

Пума Тайланд, Потому что у вас другого хватает. Надо сначала добиться 100 баллов без счетчиков и стороннего кода, чтобы с уверенностью это говорить.

[Пума Тайланд]

svm, ну так на десктопе же 99 со счётчиками, если их убрать будет так же. В каком месте вы увидели что проблема в счётчиках на мобильной версии, вс целом можно там с минификацией поработать, но там будет больше баллов но медленнее работать скорее всего

[svm]

Пума Тайланд, Ну так я об этом и говорю (и вы об этом говорите), что в вашем случае это не сработает. Нужно без счетчиков сначала добиться 100 баллов (ну может не 100, но точно выше 90 на мобильных) и уже после этого подключить аналитику и метрику. Вот только тогда вы увидите разницу.
В вашем случае много чего нужно изменять и конкретно в вашем случае действительно менять ничего не надо - в плане подключения счетчиков.

[Пума Тайланд]

svm, а какая логика?
Зачем увеличивать если и так быстро работает? Выше я вам продемонстрировал что счётчики на скорость и баллы не влияют

[svm]

Пума Тайланд, Создайте простую (или пустую) страницу, которая будет выдавать 100 баллов и подключите туда счетчики. Сначала делаете замер без счетчиков, потом со счетчиками. Я все о том же, что для показанного выше сайта оптимизация загрузки счетчиков ничего не даст.
Ответ на вопрос "Зачем":
Обычно так стоит заморачиваться только для SEO. Гугл точно учитывает это как фактор ранжирования. Яндекс под вопросом (для меня).

[Пума Тайланд]

svm, так там и так 99 процентов, куда больше то)))

[Пума Тайланд]

svm, на сео Гугла и Яндекса однозначно счётчик не влияет, они же сами выдают код для вставки и не будут же они замедлять работу сайтов

[svm]

Пума Тайланд, Гуглу пофиг на свои счетчики в результатах теста, не говоря уже о яндексе.
Так же яндексу пофиг на гугл. Свое они может быть и учитывают, а чужое точно нет.

Вы выше смотрели сообщения? 99 для компьютера. Для мобильного другая вкладка.
Там две вкладки, а не одна. Сейчас все с телефонов сидят. Ориентироваться надо именно на мобильные.

[svm]

Пума Тайланд,

Скрин

[Пума Тайланд]

svm, так причем тут ориентироваться, тут же вопрос влияют ли счётчики на загрузку, и там четкий пример для десктопа, этот сайт я вообще ещё не оптимизировал, просто глянул что есть из сайтов ум меня с показателем 90+ чтобы показать что человек неверную информацию выдает про счётчики

[svm]

Пума Тайланд, Вы сначала проверьте верную или неверную информацию он выдает. Я даже написал как это проверить.

[Пума Тайланд]

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

[Александр Маджугин]

Пума Тайланд, для компьютеров не счетово. Для мобил 86 - даже не в зеленой зоне.
Счетчики - одна из главных претензий со стороны gs.

[Александр Маджугин]

Пума Тайланд, возможно человек имеет ввиду как раз гуглпейджспид, когда говорит "тормозят".
Тормозят с точки зрения человека - это одно, с точки зрения gps другое. Как бы сложно сделать сайт реально работающий быстро и набирающий 100 в gps даже для компов.

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

ПК вообще не надо измерять. Выкиньте это из головы. В замере с ПК нет тротлинга, а только при нем оголяются все проблемы со скоростью загрузки. Пк.._))

Answer 4

[svm]

Касательно яндекс.метрики:
Не включайте вебвизор, если он не нужен. TTI в Lighthouse значительно проседает.

Касательно гугл аналитики:
Подключайте через analitics.js, а не через gtag.js

Не нужно делать setTimeout на подключение - не поможет. Асинхронного подключения достаточно.
Для того же lighthouse setTimeout может навредить. И если значение поставить слишком высокое, то сама аналитика будет уже искаженные данные показывать, а из этого следует вывод - зачем тогда вообще нужна аналитика, если её подключать через 5 секунд, как здесь советуют?

По поводу размещения скриптов на своем сайте:
Антон вполне прав и это не чушь. Размещая скрипты на своем сервере, можно задать свои заголовки кэширования, что позволяет дольше хранить скрипты у пользователя. И CDN чаще может дольше отвечать, чем свой правильно настроенный сервер.
Для обновления достаточно нужный скрипт в крон добавить (загружать через wget или curl). Никакую инфраструктуру для этого не надо разворачивать.

На счет пикселей ФБ, ВК и прочих - по мне это лишнее уже, реально.

Comments

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

Асинхронность не помогает в том, что скрипты забивают основной поток.

[svm]

Алексей Махметхажиев, Да, я об этом и имею ввиду, что асинхронного кода достаточно. Конкретно на измерители скорости это ни на что не влияет. Да, это помогает для определения приоритета загрузки, чтобы на отображение не влияло, но на измерители скорости - ни setTimeout, ни асинхронность - не влияют.
Я сам долго бился над этим lighthouse, в итоге все портит сторонний код (метрики, реклама, аналитики и прочее).
Если измерять без них, то 100 баллов можно получить без проблем. После подключения стороннего кода - невозможно.

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

svm, нет, всё наоборот. Размазать в потоке внешние соединения не только можно, а обязательно нужно.
Это делается без проблем. Как именно, я описал в отдельном комментарии тут.

[svm]

Алексей Махметхажиев, Алексей, очень приятно. Я именно по вашим рекомендациям и старался следовать из этого ролика
https://www.youtube.com/watch?v=VQD0PgLQpVs
Точно не помню в каком месте, но помню, что здесь рекомендовали подключать внешние скрипты буквально через 100 миллисекунд (могу ошибаться с точной формулировкой). Когда настала пора опробовать данный метод, я с большим удивлением обнаружил, что особо результата никакого не дало. Без внешних скриптов, подчеркну, 100 баллов без проблем получается.
После подключения сразу проседает TTI и TBT. При этом хоть как подключай, все равно одни и те же результаты.
Более-менее нормальные результаты стали получаться после отключения вебвизора и подключение аналитики через analytics.js по советам отсюда: https://github.com/GoogleChrome/lighthouse/issues/8144
Правда, после подключения рекламы, снова просело )))
Вариант с подключением после события не рассматривал, достаточно интересный подход. Надо попробовать.

Answer 5

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

Хороший вопрос от автора.
Правильный ответ примерно такой:

Работать над оптимизацией внешних подключений важно. Асинхронность по умолчанию должна быть, но она не спасает от перегрузки основного потока.
У нас на проекте стоит не только Яндекс Метрика, Гугл Аналитика, пиксель ФБ, пиксель ВК, но и Hotjar и utmstat и они совершенно не мешают ничему. Подключать всё надо грамотно, откладывая по времени и по событиям. Если событие наступило, то счетчик времени отключается. Важно найти то время, на которое откладывать скрипт. Чтобы не поехали цели в метрике или в GA. Следите за приоритезацией загрузки, чтобы всё осталось в рабочем состоянии, но не влияло на скорость загрузки.

Подробно, как правильно подключать внешку, мы показывали с этой минуты: https://youtu.be/_3c0aPSkNdc?t=1480.
Там же есть пример скрипта обработчика.

Алексей из loading.express

Answer 6

[Антон]

Просто грузить надо скрипты себе на сайт, обновляя их по крону раз в сутки, а не грузить со сторонних серверов

Comments

[Кирилл Горелов]

Ради любопытства, я просто не знаю, разве это будет работать?

[Антон]

Кирилл Горелов, раньше работало, сейчас перестал пользоваться метриками. Может до сих пор этот способ работает. По крайней мере, гугл спидтест был доволен. Если вам кто то что то будет втирать про скорость, то задумайтесь, а нафига скорость в загрузке скриптов больше, чем скорость загрузки страницы сайта. От того, что скрипты прогрузятся быстрее с забугорных серверов, вашим пользователям не легче, потому что они ожидают увидеть контент. Потому вполне можно грузить и со своего сервера, тем более я часто наблюдаю, как фэйсбучное дерьмо не может прогрузиться.

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

Так тоже не надо.)

Answer 7

[Олег Громель]

Использовать отложенную загрузку счетчиков по действию "scroll", "touchstart", "click".

Пример подключения:
Отложенная загрузка кода Яндекс.Метрики

Использую на своих проектах.

По одному проекте мониторил контрольный пул запросов.

1. Внес правки (много всего, не только скрипты аналитики), показатели Google Page Speed были ~35/65 стали 100/100.
2. В search-console гугла, в разделе "Основные интернет-показатели"/"Мобильный", отправил на перепроверку страницы с низкими показателями. Занимает 28 дней.
3. Спустя пару месяцев с момента правок, был прирост устоявшихся позиций по гуглу — из диапазона 5-7 сдвинулись в 3-5.

Без ленивой загрузки метрики, показатели Google Page Speed были ~92/98. Основная причина — сторонний код заблокировал основной поток.

Answer 8

[Али Профи]

Лучший способ - это сделать так, чтобы код скрипта метрики начинал подгружаться после начала скроллинга страницы. У меня так на сайте стоит https://aliprofi.ru можете проверить скорость моего сайта в Google Speed :)

Вот как выглядит мой код метрики:

<script type="text/javascript" >
var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {

(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(32194894, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); 

}, 1000)
    }
});
</script>

Comments

[RusyaMorra]

топ!!!

Answer 9

[bro-dev]

Для начало определите для себя что такое скорость загрузки, если это кб/с это ответ никак, обычно это время до взаимодействия с сайтом на 3г скорости, а для этого достаточно html и критический css загрузить, все остальное можно потом и не влияет понятие скорость загрузки сайта.

Comments

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

Неправда. Влияет на скорость загрузки всё. И приличную часть отъедают внешние скрипты.

Answer 10

[Sergey]

1) проверьте асинхронность у скрипта
2) отключите вебвизоры - они для баловства

Comments

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

1. Асинхронность не спасает в разгрузке основного потока.
2. Вебвизор отключить правильное решение