Семь из десяти сайтов, проваливающих 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, он поможет измерить реальный эффект.