❗️ Я много раз писал, что самая ресурсоемкая операция - это установка нового соединения. Сегодня мы обсудим отложенную загрузку внешних скриптов. В отличии от отложенной загрузки изображений, внешние скрипты откладывают по первому действию пользователя, например движению мыши, клику, ресайзу, скроллу, и тд. Это повышает оценку Google PageSpeed Insights. Получаем значительное улучшения показателей, но давайте рассмотрим, что же произойдет, когда пользователь пошевелит мышкой или сделает клик.

Обычная реализация: задается функция, которая создает элемент <script> со стороннего домена, или выполняет код. Далее эта функция вызывается на действие пользователя. Самые частые ошибки здесь:

1. Функция выполняется на каждое действие пользователя. Каждое смещение мыши или клик добавляют на страницу элемент, что неправильно, так как это нужно сделать всего один раз.
2. Элемент добавляется один раз, но прослушиватели остаются. Это лучше, чем предыдущий пункт, но также влияет на быстродействие. Удаляем события после срабатывания.
3. Все скрипты выполняются на одно и то же действие и буквально одной кучей. Системы синтетических замеров не увидят, но у пользователя основной поток будет заблокирован при первом же действии. Нужно разносить по времени, и постоянно смотреть во вкладку Performance в Google Chrome.
4. Загружается слишком много скриптов, что приводит к блокировке основного потока при загрузке с медленных устройств. Избавляемся от ненужных скриптов.

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

⚠️ Чтобы полностью избавиться от негативного влияния внешних скриптов, нужно ПОЛНОСТЬЮ убрать их с сайта. Любой сторонний скрипт нужно добавлять, предварительно замерив как это влияет на быстродействие сайта. Если не сильно, то можно откладывать по предложенному ниже примеру.

✅ Пример на CodePen

Только сегодня при переходе на оплату курса Дмитрия Шахова "Старт в SEO" применяется ссылка 6666 рублей. То есть курс будет стоить 18334р вместо 25000:
https://lbvf.ru/shakhovstartseohtml?gcpc=b5903

Разбирайте последние места в пятом потоке моего курса "Старт в SEO". Идеально для тех, кто хочет разобраться, как работает поисковая оптимизация и делать ее для своего сайта. Либо хочет большей эффективности от своего фрилансера или подрядчика. Экономлю деньги на консультациях и аудитах, учу тому, по каким признакам понять, куда двигаться лучше и объясняю, почему так. В обучение включена личная консультация по вашему проекту.
Начинаем сразу после выходных. Регистрация по ссылке: https://lbvf.ru/shakhovstartseohtml