Вчера на вебинаре по аудиту скорости загрузки сайтов Антона Белогородцева спросили про то, как сделать отложенную загрузку внешних скриптов. Он прислал мне ссылку на свой пост, в котором все подробно описано. #скоростьзагрузки

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

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

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

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

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

✅ Пример на CodePen