Я багато разів писав, що найбільш ресурсоємна операція – це встановлення нового з’єднання. Сьогодні ми обговоримо відкладене завантаження зовнішніх скриптів.
На відміну від відкладеного завантаження зображень, зовнішні скрипти відкладають за першою дією користувача, наприклад, рухом миші, кліком, ресайзом, скролом тощо. Це підвищує оцінку Google PageSpeed Insights. Отримуємо значне поліпшення показників, але розгляньмо, що ж станеться, коли користувач поворухне мишкою або зробить клік.
Звичайна реалізація: задається функція, яка створює елемент <script> зі стороннього домену, або виконує код. Далі ця функція викликається на дію користувача. Найчастіші помилки тут:
- Функція виконується на кожну дію користувача. Кожне зміщення миші або клік додають на сторінку елемент, що неправильно, оскільки це потрібно зробити лише один раз.
- Елемент додається один раз, але “прослуховувачі” залишаються. Це краще, ніж попередній пункт, але також впливає на швидкодію. Видаляємо події після спрацьовування.
- Усі скрипти виконуються на одну й ту саму дію і буквально однією купою. Системи синтетичних вимірів не побачать, але у користувача основний потік буде заблокований при першій же дії. Потрібно розносити в часі, і постійно дивитися у вкладку Performance в Google Chrome.
- Завантажується занадто багато скриптів, що призводить до блокування основного потоку при завантаженні з повільних пристроїв. Позбавляємося непотрібних скриптів.
Появу чату можна відкласти за часом на 15 секунд сміливо. Аналітику можна відкласти на будь-яку першу дію користувача і за таймером через 2-3 секунди. Так, похибка буде, але виконуватися скрипти почнуть тільки у тих користувачів, хто не закрив вкладку на першій же секунді.
Щоб повністю позбутися негативного впливу зовнішніх скриптів, потрібно ПОВНІСТЮ прибрати їх із сайту. Будь-який сторонній скрипт потрібно додавати, попередньо замірявши як це впливає на швидкодію сайту. Якщо не сильно, то можна відкладати за запропонованим нижче прикладом.
