Как отложить JavaScript в WordPress для повышения скорости загрузки страницы
Что такое JavaScript, блокирующий рендеринг?
Когда браузер обнаруживает файл JavaScript в HTML <head>, он приостанавливает рендеринг для загрузки, анализа и выполнения скрипта. Это замедляет скорость, с которой страница становится видимой для пользователя.
Распространенные источники JS-кода, блокирующего рендеринг:
- Скрипты тем и плагинов (например, слайдеры, всплывающие окна, анимация)
- Внешние скрипты (Google Analytics, Facebook Pixel и т. д.)
В чем разница между отложить и асинхронный?
асинхронный: Загружает скрипт, не блокируя парсинг HTML. Выполняет его сразу после загрузки — может вызвать конфликты, если порядок имеет значение.отложить: также загружает без блокировки, но откладывает выполнение до завершения анализа HTML — безопаснее и лучше для зависимых скриптов.
Как определить проблемный JavaScript
Используйте эти инструменты, чтобы увидеть, какие скрипты блокируют рендеринг:
- PageSpeed Insights
- Chrome DevTools → Вкладка Lighthouse
- Chrome DevTools → Сеть → фильтр по JS
Сосредоточьтесь на загрузке файлов JS в <head> и помечен как «блокирующий рендеринг».
Как отложить JavaScript в WordPress
Вариант 1: Добавить Defer с кодом (без плагинов)
Добавьте этот код в свою дочернюю тему функции.php применять отложить ко всем скриптам, кроме jQuery:
функция add_defer_attribute($tag, $handle) {
// Пропустить jQuery
если ('jquery-core' === $handle || 'jquery' === $handle) {
вернуть $tag;
}
return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
Вариант 2: использование асинхронности
Подобно defer, вы можете использовать асинхронный вместо этого — просто измените `defer` на `async` в коде выше. Но будьте осторожны: некоторые скрипты зависят от порядка загрузки и могут сломаться.
Использование плагинов (с осторожностью)
Если вы не хотите трогать код, эти плагины позволяют отложить или асинхронизировать JS:
- **WP Rocket** — простой интерфейс, работает хорошо, но платный.
- **Очистка активов** — позволяет вручную откладывать или отключать определенные скрипты.
- **Летающие скрипты** — легкие и ориентированные на отсрочку JS после задержки.
⚠️ Всегда проводите тестирование после включения — отсрочка неправильного скрипта может нарушить макет или функциональность вашего сайта.
Как проверить воздействие
- Используйте PageSpeed Insights или GTmetrix до/после
- Откройте свой сайт в режиме инкогнито, чтобы обнаружить видимые проблемы.
- Используйте DevTools → вкладка «Сеть» → проверьте порядок и время загрузки
Вывод: Стратегически отложить
Отсрочка JavaScript — один из самых простых, но мощных методов ускорения вашего сайта WordPress. Начните с безопасных скриптов, избегайте отсрочки jQuery (если только вы не встраиваете его) и тщательно протестируйте.
Хотите пойти дальше? Запросите бесплатный аудит производительности от SpeedWP Pro и мы поможем оптимизировать ваши скрипты и стратегию загрузки для достижения максимальных результатов.