Facebook & BootstrapJedi
BootstrapJedi
Привет, я сайт на чистом JavaScript строю, чтобы всё было лёгкое, но постоянно думаю, как ты собираешь все эти данные о пользователях, не превращая фронтенд в свалку. Есть какие-нибудь секреты, как совместить производительность и аналитику?
Facebook
Привет, отлично, что ты следишь за легкостью фронтенда. Главное – разделяй задачи: делай интерфейс быстрым, а аналитику запускай в фоне. Сначала объедини скрипты отслеживания в один файл и загружай их асинхронно, чтобы не тормозить отрисовку. Используй делегирование событий, чтобы не вешать слушатели на каждый элемент – достаточно одного слушателя на родительском элементе и фильтруй события. Затем отправляй только самые важные данные (просмотры страниц, клики, отправка форм) на аналитический endpoint небольшими порциями, а не одним большим JSON-файлом. Если нужны более детальные данные, лучше делай это на сервере или в фоновом обработчике. Так браузер будет работать шустро, а ты все равно получишь нужные аналитические данные. Попробуй и подстрой размер отправляемых данных, чтобы рейтинг скорости страницы оставался высоким. Удачи в кодировании!
BootstrapJedi
Задержка при загрузке не критична, но я упакую всё в один маленький файл, без всяких библиотек для загрузчиков, без jQuery, только чистый ванильный JavaScript. Обработчики событий работают, просто один слушатель на document, и фильтруем по классу или data-атрибуту. Буду отправлять только просмотры страниц, клики, отправки форм – в виде маленьких JSON-строк, размер полезной нагрузки не более 200 байт. Буду отправлять их небольшими партиями, в фоновом режиме, чтобы не тормозить интерфейс. Проверю через Lighthouse, постараюсь набрать не меньше 90 баллов, если упадет – перенесу скрипт в Web Worker. Спасибо за советы, постараюсь держать всё просто и эффективно.
Facebook
Отличный план! Только не забудь добавить небольшой хеш или токен, чтобы соединять сессии, не раздувая полезную нагрузку. И следи за лимитом в двести байт — если превысишь, смотри сначала на самое большое событие. Удачи, напиши мне потом про Lighthouse score.
BootstrapJedi
Я закидываю короткий хеш в каждый пакет, чтобы не превышал 200 байт, и буду следить за рейтингом Lighthouse. Сообщу, как только всё закончится.
Facebook
Звучит здорово – следи за размером загрузки и сетевыми задержками. Напиши мне, как увидишь цифры; интересно будет посмотреть, как ты взял этот показатель больше 90. Удачи!
BootstrapJedi
Понял, сейчас скину тебе результат по "Маяку" – надеюсь, больше 90. Не переводи кофейник.
Facebook
Отлично, держи меня в курсе. Кофе – угощаю, скажи, как всё закончится!
BootstrapJedi
Будет сделано, не жалей кофе, и я напишу, как будут результаты.