Конкурс инструкций

Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске - Часть 2

Приветствую!

В предыдущей статье мы обсудили как ускорить работу своего сайта самостоятельно, как включить кеширование статических файлов, как оптимизировать JS и CSS, зачем нужен CDN и lazy loading, и почему всё это так важно.

Во второй части статьи мы подробно остановимся на следующем вопросе. Что делать с счетчиками Яндекс.Метрика, Google Analytics, пикселями ретаргетинга социальных сетей и прочими внешними скриптами, которые мы не можем кешировать на стороне сервера?

Зачем нужен Google Tag Manager

Размещать коды аналитики, пиксели социальных сетей и прочие внешние JS напрямую в коде сайта - не самое лучше решение. Как минимум потому, что эти блоки кодов нельзя оптимизировать и они будут замедлять скорость работы сайта. Об этом нужно думать ещё на этапе разработки.

Для быстрого управления множеством скриптов и оптимизации скорости загрузки сайта есть инструмент - Google Tag Manager (GTM).

Сам по себе контейнер GTM без каких-либо тегов оказывает минимальное влияние на скорость загрузки сайта. Но, если бездумно добавлять в контейнер множество тегов, то это может существенно замедлить работу сайта, особенно на смартфонах.

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

Даже асинхронные скрипты влияют на скорость работы сайта. Использование асинхронной загрузки JS не является гарантией попадания в зелёную зону теста PageSpeed Insights.

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

События в GTM

Всего в GTM существует три события, разобравшись в которых, мы выберем наилучший момент для активации скриптов, которые сильно тормозят загрузку сайта.

1. «Page View - просмотр страницы - gtm.js».

Данное событие означает, что контейнер GTM загружен.

2. «DOM Ready - объектная модель документа построена - gtm.dom».

Это событие говорит нам о том, что весь HTML-код страницы загружен и готов к рендерингу в браузере. У браузера есть все пути для изображений, JS и CSS файлов.

3. «Window Loaded - окно загружено - gtm.load».

Страница сайта полностью отрисована в браузере пользователя.

Схематически загрузка страницы сайта с контейнером GTM будет выглядеть вот так:

На этой наглядной схеме видно, что лучшим момент для отложенной загрузки кодов аналитики - это событие «Window Loaded - окно загружено - gtm.load».

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

Бывают сервисы, которые требуют загружать их внешние скрипты сразу после «DOM Ready». Если скрипты этих сервисов отказываются работать, то тут без вариантов, отложить их выполнение не получится и они будут замедлять скорость работы сайта.

Настраиваем отложенную загрузку в GTM

1. Создаем в GTM новый тег.

Заходим в GTM, слева в меню нажимаем «Теги», далее нажимаем кнопку «Создать».

Имя тега – произвольно, например, AfterLoad.

Конфигурация тега – Пользовательский HTML.

Содержимое конфигурации тега:

<script> (function() { try { window.setTimeout( function(){ dataLayer.push({'event': 'afterLoad'}); }, 1500); } catch (err) {} })(); </script>

«1500» - это 1,5 секунды, время, на которое откладываем загрузку внешних скриптов.

«afterLoad» – имя события, которое будет использовано далее.

Расширенные настройки – никаких дополнительных настроек устанавливать не нужно.

Секция триггеры – создаем новый триггер с произвольным именем, например, WindowLoaded, в настройках триггера выбираем тип «Окно загружено».

Сохраняем настройки. Настройка нового тега завершена.

2. Создаем в GTM новый триггер.

Заходим в GTM, слева в меню нажимаем «Триггеры», далее нажимаем кнопку «Создать».

Имя триггера - произвольно, например, AfterLoad.

Тип триггера – пользовательское событие.

Имя события – afterLoad.

Условия активации триггера – Все специальные события.

Сохраняем настройки. Настройка нового триггера завершена.

3. Настраиваем теги аналитики и рекламных систем.

Заходим в GTM, слева в меню нажимаем «Теги», выбираем код Яндекс.Метрика.

В секции «Триггеры» выбираем ранее созданный триггер с именем «AfterLoad».

После публикации новой версии контейнера Яндекс.Метрика будет загружаться через 1,5 секунды после полной отрисовки страницы сайта, не замедляя скорость.

Аналогичные действия делаем с остальными тегами аналитики, пикселями социальных сетей для ретаргетинга, и так далее, выполнение которых хотим отложить на 1,5 секунды.

Вместо заключения

Полторы секунды - это много или мало? В современных реалиях - это целая вечность.

Недавно со мной рядом летела пассажирка, которая устроила целый скандал на борту самолёта, потому что она не могла смотреть видео с Youtube на своём iPad в разрешение 4К.

В HD 1080 проблем нет, а в 4К видео постоянно прерывается из-за недостаточной скорости интернет-соединения.

Сидя в мягком кресле на высоте 11 000 метров и перемещаясь со скоростью 850 км/ч пользователя не устраивает просмотр видео через wi-fi сеть в HD 1080.

Запросы пользователей постоянно растут.

Уменьшение времени загрузки сайта на 2,5-1,5 секунды могут увеличить количество конверсий и транзакций, а так же уменьшить количество отказов с органического или платного трафика.

Всё это в конечном итоге влияет на деньги.

Вычистите весь мусор и неиспользуемые теги из GTM, если таковые имеются.

Проверьте, не установлено ли несколько счетчиков Яндекс.Метрика, Google Analytics или несколько пикселей ретаргетинга Вконтакте. Сделайте ревизию и поддерживайте порядок в контейнере GTM.

Очень надеюсь, что разработчики Google в скором времени реализуют отслеживание на стороне сервера GTM, а не в браузере пользователей. Разработка этого решения началась в январе 2020 года.

Вместо того, чтобы выполнять скрипты аналитики на стороне пользователя, их выполнение можно перенести в Google Cloud Platform. Это существенно увеличит производительность сайта и не будет нагружать лишними процессами смартфоны и ПК пользователей.

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

До встречи!

0
22 комментария
Популярные
По порядку
Написать комментарий...
Mikhail Bryzghunov

Простой и изящный способ.
Стало лучше.
Спасибо!

Ответить
1
Развернуть ветку
Vyacheslav Rubanyuk

Спасибо за подробные инструкции! Пишите ещё :)

Ответить
0
Развернуть ветку
Сантех Марка

Внёс изменения по инструкции - скорость загрузки ещё немного упала. С чем может быть связанно? Сайт: https://santehmarka.ru/

Ответить
0
Развернуть ветку
Артем Акулов

Здравствуйте, на вашем сайте не счетчики тормозят загрузку, а неоптимизированные css (4,96 сек), долгий ответ сервера (1,8 сек), неоптимизированные картинки и шрифты. Нужно проводить комплект работ по внутренней оптимизации и кешированию, затем подключать сервис Cloudflare. Все это значительно ускорит работу интернет-магазина.

Ответить
0
Развернуть ветку
Павел Александрович

сделал тоже саоме в сайт  https://oformlenoe-zemli.ru эффекта на 5 пунктов

Ответить
0
Развернуть ветку
Ventana

Оптимизировал все что возможно на сайте, обычная статика на nginx. Закешировал, подключил keep-alive, встроил стили в html. Но в тесте my site на thinkwithgoogle показывает что мой сайт ventana.kz - скорость средняя. Что ещё нужно, я уже не понимаю?

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Olga Timofeeva

Добрый день, большое спасибо за подробную и столь ценную информацию! Скажите, пожалуйста, то еще можно исправить на нашем сайте? Оценка загрузки всего 6 для мобильных устройств: http://shop.canadadrives.ca/ ?

Ответить
0
Развернуть ветку
Константин Чураков

Если брать ситуацию со счетчиком Я.Метрика, то сам Яндекс не хочет такого сценария, т.к. пишет, что если будем ставить в Window Loaded, то потеряем часть аналитики.

Если человек не дождался события Window Loaded и сделал какое-то действие или банально ушел, то мы его потеряем.

Ответить
0
Развернуть ветку
Артем Акулов

Мало ли что он там не хочет. У меня все работает отлично.
"Человек" который не дождался Window Loaded нам в принципе не интересен.

Ответить
0
Развернуть ветку
Olga Timofeeva

Можно ли заменить триггер All Pages на afterLoad? Спасибо!

Ответить
0
Развернуть ветку
Артем Акулов

нужно

Ответить
0
Развернуть ветку
Angela Babuhina

По пункту 3. Настраиваем теги аналитики и рекламных систем. — совсем не поняла. Откуда Яндекс метрика в тегах, если до этого в первых 2 пунктах, ничего про ЯМ не было написано. Как код счетчика добавить?

Ответить
0
Развернуть ветку
Roman Lipatov

Второй шаг - 2. Создаем в GTM новый триггер
непонятен.
Ведь когда мы создали тег с триггером, то в триггерах уже есть тот самый триггер.

Ответить
0
Развернуть ветку
Roman Lipatov

Да, и как убедиться, что отложенная загрузка работает?

Ответить
0
Развернуть ветку
Ivan Ze

Сделал все по инструкции, но теперь google tag manager грузится столько же, сколько yandex до этого.
Сайт - https://autokool.info
В чем может быть причина?

Ответить
0
Развернуть ветку
Дмитрий Вальковский

"Заходим в GTM, слева в меню нажимаем «Теги», выбираем код Яндекс.Метрика."
Откуда он там взялся, если на предыдущих этапах про него ни слова?
На каком этапе и куда вставляется код счетчика метрики? Совершенно непонятно. Ниже задают тот же самый вопрос. Спасибо!

Ответить
0
Развернуть ветку
Фарид Ниязов

Заходите в Теги, нажимаете Создать, нажимаете на Конфигурация тега, затем клик "В Галерее шаблонов сообщества вы сможете найти ещё больше типов тегов.", там ищем Яндекс.Метрику и настраиваем её.

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Олег

Если не ошибаюсь при таком подходе погрешность при измерениях GA - 7%. Где то было такое исследование. Так что если для Вас важна статистика и аналитика в дальнейшем - не советую так делать. Таким способом, setTimeout - можете подгружать другие скрипты типа чатов и т. д.

Ответить
0
Развернуть ветку
Артем Акулов

Очередные диванные исследования подъехали. Где пруфы?

Ответить
0
Развернуть ветку
Олег

Я не критик, такой метод отлично подойдет для отложенной загрузки чатов, коллбеков от CRM и т. д.
По поводу пруфов - Demi Murich на одной конференции говорил о таких искажениях.

Ответить
0
Развернуть ветку
Артем Акулов

Ахахахха. Нашли кого слушать.

Ответить
0
Развернуть ветку
Олег

Ну не знаю, как по мне человек эксперт в своей нише.

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Читать все 22 комментария
Александр Аузан: «Креативность отвечает на вызов искусственного интеллекта»

Федерация креативных индустрий была создана в феврале 2021 года. Чего удалось добиться за время существования организации, какое значение для отрасли имеет утвержденная правительством Концепция развития творческих индустрий, что мешает нашей стране выйти на первые места в области науки и технологий, IPQuorum обсудил с председателем правления…

Кейс: запустить шрифт для дислексиков и увеличить количество скачиваний приложения на 70%

Зачем — рассказывают дизайнер, логопед и агентство.

Путин поддержал идеи Минфина о регулировании криптовалют и разрешении на майнинг в отдельных регионах — Bloomberg Статьи редакции

Майнинг могут разрешить в Иркутске, Карелии и Красноярске, сообщили источники издания.

«Эталон» требует доплаты в 300 тысяч после оформления ДДУ и выдачи ипотеки из-за ошибки в их калькуляторе

Добрый день!

Возникла неприятная ситуация с застройщиком «Эталон». В ноябре 2021 года было принято решение приобрести квартиру в жилом комплекте от застройщика «Эталон», обратилась напрямую в отдел продаж, без агентов и риэлторов. Процесс выбора несколько затянулся т.к. предложенные изначально варианты не устраивали по планировке или цене, к концу…
Кейс: как продвигать услуги по строительству элитных домов, где каждый клиент приносит миллионы рублей выручки

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

Почему отключение SWIFT не разрушит российскую банковскую систему, и чего действительно стоит бояться

С 2014 года мы слышим о возможном отключении России от системы SWIFT. В последние недели эти разговоры все чаще звучат в медиа и серьезно влияют на настроения в банковской среде. CBDO Банка 131 Анна Кузьмина рассказала, почему блокировка SWIFT в России не смертельный сценарий, и какие санкции против банков на самом деле вызывают беспокойство.

Удобство и забота: за что пользователи любят приложение BestDoctor

Приложение BestDoctor — единое окно для получения всех услуг нашей экосистемы медицинских сервисов: записи в клинику, проведения онлайн-консультаций с врачом, страхования путешествий и многих других. 80% пользователей BestDoctor регулярно обращаются к нему и оставляют хорошие отзывы. В этой статье мы расскажем, как медицинские сервисы BestDoctor…

Я запарился перебирать онлайн-кинотеатры и создал агрегатор «Кино.Вино»

Есть такая проблема в век официальных/модных/современных (нужное подчеркнуть) онлайн-кинотеатров — их стало много, а выбрать где смотреть, да ещё и по более выгодной цене когда контент платный, занятие утомляющее.

Инвестиции в IPO: научно доказанный способ зарабатывать 18% в день, или как акулы Уолл-стрит наживаются на Цукербергах

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

Как снизить стоимость за установку приложения с помощью тестирования креатива: кейс Joom и Aitarget Tech

Может ли цвет креатива или расположение цены влиять на стоимость установки приложения? Эти и другие гипотезы платформа Aitarget Tech позволяет тестировать для Joom, одного из крупнейших маркетплейсов в Европе и Азии. Делимся результатами тестирования гипотез и рассказываем о подходе, который позволяет автоматизировать процесс.

«Альфа-Банк» выдает кредиты онлайн-мошенникам без должной идентификации клиентов и отказывается аннулировать договор
null