Сім із десяти сайтів, що провалюють PageSpeed Insights, гальмують через чужий JavaScript. Сторонні скрипти, аналітика, рекламні мережі, чати, шрифти, cookie-банери блокують рендеринг і відтягують First Contentful Paint на секунди. А вимикати їх не можна: аналітика годує маркетинг, чат приносить ліди, без cookie-банера сайт не пройде аудит.

Рішення є: відкладене завантаження. Скрипт підвантажується лише тоді, коли основний контент уже показано користувачеві. Браузер не чекає, метрики Core Web Vitals потрапляють у зелену зону, а функціональність сайту не страждає.

Зібрали всі робочі способи, від вбудованих атрибутів HTML до програмних технік і плагінів для WordPress. З прикладами коду, які можна скопіювати та застосувати вже сьогодні.

💡 Швидкий огляд:

• Розберіться з defer та async: таблиця наочно покаже різницю між атрибутами
• Опануйте програмне завантаження за подією load: сучасна версія методу Патріка Секстона
• Налаштуйте Intersection Observer для скриптів нижче лінії згортання: чати, карти, коментарі
• Оптимізуйте WordPress без правлення коду: плагіни Flying Scripts та Asset CleanUp

Як сторонні скрипти гальмують завантаження

Браузер парсить HTML згори донизу. Коли він зустрічає <script src="..."> без атрибутів, парсинг зупиняється: браузер завантажує скрипт, виконує його і лише потім продовжує розбір сторінки. Це і є render-blocking, блокування рендерингу.

Для користувача результат, білий екран. Метрика First Contentful Paint (FCP), час до першого відображуваного контенту, напряму залежить від того, як швидко браузер пройшов через усі блокуючі скрипти. FCP входить до Core Web Vitals і безпосередньо впливає на пошуковий рейтинг.

Сторонні скрипти б’ють болючіше за власні: вони лежать на чужих серверах, і ви не контролюєте ані швидкість їхньої віддачі, ані доступність. DNS-запит, TCP-рукопотискання, TLS-хендшейк, завантаження, кожен етап додає десятки й сотні мілісекунд. За даними HTTP Archive за 2024 рік, медіанний сайт на мобільних пристроях завантажує 21 зовнішній скрипт, і три з них, блокуючі.

Вихід, дати браузеру чітку інструкцію: «завантаж скрипт у фоні, а виконай пізніше». Саме для цього вигадані атрибути defer та async.

Defer та async: два вбудовані механізми

Обидва атрибути прописуються в тегу <script> і змінюють поведінку завантаження. Принципово по-різному.

Defer: відкладене виконання з гарантією порядку

Атрибут defer каже браузеру: «завантажуй скрипт у фоні, виконуй після повного парсингу HTML». Порядок виконання зберігається, скрипти відпрацьовують точно в тій послідовності, в якій зазначені в розмітці.

1
<script src="https://example.com/analytics.js" defer></script>
2
<script src="https://example.com/chat-widget.js" defer></script>

Ідеальний вибір для скриптів, які мають виконуватися у визначеній черговості: бібліотека, потім її плагін, потім ініціалізація. defer гарантує, що DOM уже готовий на момент виконання. Подія DOMContentLoaded спрацює після всіх defer-скриптів.

Async: повна незалежність

async завантажує скрипт паралельно з парсингом і виконує його негайно після завантаження, не чекаючи на інші. Порядок не гарантований: який скрипт першим завантажився з сервера, той першим і виконався.

1
<script src="https://example.com/independent-widget.js" async></script>

Підходить для повністю незалежних скриптів: лічильники відвідувань, кнопки соцмереж, рекламні банери. Якщо скрипт не залежить від DOM і не залежить від інших скриптів, ставте async.

Важливий нюанс: async-скрипт може виконатися до побудови DOM. Якщо він звертається до елементів сторінки, яких ще немає, отримаєте null і помилку в консолі. Завжди перевіряйте.

Програмне завантаження за подією load: метод Патріка Секстона

Що робити, якщо скрипт не підтримує defer/async або ви не контролюєте розмітку? Наприклад, скрипт вставляється через Google Tag Manager або жорстко зашитий у чужий плагін. На допомогу приходить програмний метод.

Ідея проста: створюємо елемент <script> через JavaScript і додаємо його в DOM лише після повного завантаження сторінки. Автор підходу, Патрік Секстон, який уперше описав техніку на varvy.com.

Сучасна версія цього коду:

1
function loadScriptOnPageLoad(src) {
2
  const script = document.createElement('script');
3
  script.src = src;
4
  script.async = false;
5
  document.body.appendChild(script);
6
}
7
 
8
window.addEventListener('load', () => {
9
  loadScriptOnPageLoad('/wp-content/plugins/chat/chat.js');
10
  loadScriptOnPageLoad('/wp-content/plugins/analytics/tracker.js');
11
});

Дві ключові відмінності від коду десятирічної давнини. Перше: слухаємо load, а не DOMContentLoaded. Подія load настає пізніше, коли завантажені всі зображення, стилі та шрифти. Відкладений скрипт гарантовано не вплине ані на FCP, ані на LCP. Друге: жодного window.attachEvent. Цей метод був потрібен лише для Internet Explorer 8 і старіших, яких більше не існує. Сучасний addEventListener працює в усіх актуальних браузерах.

Три ситуації, де програмний підхід незамінний

defer та async працюють лише для тегів <script>, прописаних у HTML безпосередньо. Програмний метод рятує, коли:

• Скрипт вставляється через Google Tag Manager або інший менеджер тегів, ви не бачите розмітки.
• Не можна редагувати шаблон: чужий плагін або тема з жорсткою структурою.
• Потрібне умовне завантаження: наприклад, скрипт форми зворотного зв’язку, лише на сторінках із формою.

Intersection Observer: завантаження на вимогу

Для деяких скриптів навіть defer занадто рано. Віджет чату не потрібен, поки користувач не доскролив до футера. Карта, поки не дійшли до блоку з адресою. Коментарі, поки не дочитали до секції обговорення.

Intersection Observer API вирішує саме це завдання: скрипт завантажується лише тоді, коли цільовий елемент з’являється в області видимості.

1
const chatTarget = document.getElementById('chat-container');
2
 
3
if (chatTarget) {
4
  const observer = new IntersectionObserver((entries) => {
5
    entries.forEach((entry) => {
6
      if (entry.isIntersecting) {
7
        const script = document.createElement('script');
8
        script.src = '/wp-content/plugins/chat/chat.js';
9
        document.body.appendChild(script);
10
        observer.unobserve(entry.target);
11
      }
12
    });
13
  }, { rootMargin: '200px' });
14
 
15
  observer.observe(chatTarget);
16
}

Параметр rootMargin: '200px' завантажує скрипт за 200 пікселів до появи елемента на екрані, користувач не помічає затримки. Раніше розробники роками використовували scroll-слухачі з getBoundingClientRect(), але ті сіпалися на кожен піксель прокручування й перевантажували головний потік.

Intersection Observer працює асинхронно і практично не навантажує браузер. Підтримка, усі сучасні браузери, включно з Safari від версії 12.1. IE11 не підтримується, але його частка на червень 2026 прямує до статистичної похибки.

WordPress: відкладене завантаження без редагування коду

Якщо сайт на WordPress, реалізувати відкладене завантаження можна трьома шляхами, від найпростішого до найгнучкішого.

Плагіни для відкладеного завантаження скриптів

Два робочих варіанти, перевірених на тисячах сайтів.

Flying Scripts, безплатний плагін від Gijo Varghese, 30 000+ активних встановлень, версія 1.2.4 (оновлений у травні 2026). Вміє відкладати JavaScript до першої взаємодії користувача: рух миші, клік, скрол, дотик на мобільному. Ви вказуєте ключові слова з URL скрипта, і плагін затримує його виконання. Є таймаут, якщо користувач не взаємодіє зі сторінкою, скрипти виконаються через заданий час. Максимальний виграш за метриками, але чат або форма зворотного дзвінка мають бути виключені із затримки, вони потрібні одразу.

WP Rocket, преміум-плагін кешування, в який вбудовано функцію відкладеного завантаження JavaScript. Додає defer або async до вибраних скриптів через інтерфейс адмінки. Ви вказуєте URL, плагін змінює атрибут під час виведення сторінки. Підходить тим, хто вже користується WP Rocket для кешування і не хоче множити плагіни.

Хук script_loader_tag у functions.php

Якщо не хочете встановлювати окремий плагін, WordPress дозволяє фільтрувати виведення тегів <script> через хук script_loader_tag. Код нижче додає defer усім скриптам, крім jQuery та адмінпанелі:

1
add_filter('script_loader_tag', function($tag, $handle) {
2
    if (is_admin()) {
3
        return $tag;
4
    }
5
    $skip = ['jquery', 'jquery-core', 'jquery-migrate'];
6
    if (in_array($handle, $skip, true)) {
7
        return $tag;
8
    }
9
    return str_replace(' src', ' defer src', $tag);
10
}, 10, 2);

Розмістіть код у functions.php дочірньої теми або через плагін Code Snippets. Перед застосуванням, резервна копія. defer на jQuery зламає будь-який код, який викликає $() або jQuery() до DOMContentLoaded. Починайте з окремих скриптів, перевіряйте консоль на помилки після кожної зміни.

Повний контроль: Asset CleanUp

Asset CleanUp, безплатний плагін (версія 1.4.0.4, оновлений у травні 2026), який показує ВСІ скрипти та стилі, завантажені на сторінку. Із зазначенням розміру та джерела. Можна вимкнути конкретний скрипт на конкретній сторінці, змінити атрибут завантаження на defer/async або повністю вивантажити непотрібний асет.

Головна перевага перед Flying Scripts: Asset CleanUp дає повну картину по кожній сторінці. Ви бачите, що саме вантажиться, і ухвалюєте рішення точково. Pro-версія додає умовне завантаження за типом екрана та перенесення скриптів між HEAD і BODY. Працює в парі з будь-яким кешувальним плагіном, WP Rocket, W3 Total Cache, WP Fastest Cache.

Глибший розбір прискорення WordPress, в окремому матеріалі: 21 порада для покращення показників PageSpeed Insights. Якщо проблема не лише в скриптах, а й у загальній швидкості хостингу, зазирніть у способи зменшити час завантаження сторінки WordPress. А виміряти реальний ефект від оптимізації допоможуть інструменти для перевірки продуктивності WordPress.

Відео: async і defer на практиці

П'ятихвилинний розбір від каналу xplodivity, з візуальними схемами завантаження та живими прикладами коду:

⁉️🤔 Поширені запитання

defer** чи async, що обрати для Google Analytics?**

async. Analytics.js і gtag.js повністю незалежні від DOM, порядок виконання їм не потрібен. GA4 офіційно рекомендує async, бібліотека сама обробляє відкладену ініціалізацію.

Чим відрізняється подія load від DOMContentLoaded?

DOMContentLoaded спрацьовує, коли HTML повністю розібрано і DOM-дерево побудовано, стилі та зображення можуть ще завантажуватися. load настає пізніше: коли завантажено геть усе, включно із зображеннями, шрифтами й таблицями стилів. Для відкладеного завантаження скриптів load безпечніший: сторінка на цей момент уже точно показана користувачеві.

Чи можна додати defer інлайн-скрипту?

Ні. Атрибут defer працює лише для зовнішніх скриптів з атрибутом src. Інлайн-скрипт (<script>код</script>) з defer буде проігноровано, браузер виконає його як звичайний блокувальний. Щоб відкласти інлайн-код, обгорніть його в слухач DOMContentLoaded або load.

Чи безпечно ставити defer на всі скрипти WordPress-сайту?

jQuery з defer зламає будь-який код, що викликає $() або jQuery() до DOMContentLoaded. Саме тому в наведеному вище фрагменті jQuery виключено з обробки. Починайте з некритичних скриптів: чат, соцмережі, реклама. Розширюйте список поступово, перевіряючи консоль на помилки після кожної зміни.

Intersection Observer чи defer, що краще?

Вони вирішують різні завдання. defer, для скриптів, які потрібні на сторінці завжди, але не критичні для першого рендеру: аналітика, A/B-тести. Intersection Observer, для скриптів, прив'язаних до конкретного блоку: мапа, чат у футері, віджет коментарів. Просте правило: скрипт у верхній частині сторінки, defer; скрипт нижче лінії згину, Intersection Observer.

Що робити, якщо Flying Scripts зламав функціональність?

Виключіть проблемний скрипт зі списку затримки в налаштуваннях плагіна. Flying Scripts дозволяє вказати ключові слова для включення, приберіть ключове слово проблемного скрипта, і він завантажуватиметься як зазвичай. Для критичних елементів на кшталт форм і чатів це обов'язковий крок перед активацією затримки.

Що ставити на ваш сайт: матриця вибору

Вибір зводиться до простої таблиці ухвалення рішень:

• Скрипт прописано в HTML, ви контролюєте теги, defer, якщо залежить від порядку, async, якщо повністю незалежний.
• Скрипт вставляється через GTM або чужий плагін, теги недоступні, програмне завантаження за подією load.
• Скрипт прив'язаний до блоку нижче лінії згину, Intersection Observer з rootMargin: '200px'.
• WordPress, потрібно без коду, Flying Scripts (безплатно, 30 000+ сайтів) або Asset CleanUp для повного контролю над асетами.

Почніть із найпростішого: відкрийте PageSpeed Insights, знайдіть блокувальні зовнішні скрипти й додайте їм defer. Один атрибут, і FCP може перейти з червоного в зелений. А коли розберетеся з атрибутами, зазирніть у наш огляд інструментів для перевірки продуктивності WordPress, він допоможе виміряти реальний ефект.