Як відкласти JavaScript у WordPress, щоб покращити швидкість сторінки

Опубліковано

Увімкнено 15 квітня 2025 р

Коментарі Вимкнено

Однією з основних причин, чому сторінки WordPress повільно завантажуються, є JavaScript, який блокує рендеринг. Ці сценарії затримують швидкість відображення вмісту браузером, особливо у верхній частині сторінки. Відкладаючи завантаження JavaScript, ви можете покращити швидкість сторінки, взаємодію з користувачем і показники продуктивності в таких інструментах, як PageSpeed Insights.

Що таке JavaScript, що блокує візуалізацію?

Коли браузер зустрічає файл JavaScript у HTML <head>, він призупиняє рендеринг для завантаження, аналізу та виконання сценарію. Це затримує, як швидко сторінка стає видимою для користувача.

Поширені джерела JS, що блокує рендеринг:

Скрипти тем і плагінів (наприклад, слайдери, спливаючі вікна, анімація)
Зовнішні скрипти (Google Analytics, Facebook Pixel тощо)

Яка різниця між `defer` і `async`?

async: завантажує сценарій без блокування аналізу HTML. Виконує його одразу після завантаження — може спричинити конфлікти, якщо порядок має значення.
defer: також завантажується без блокування, але затримує виконання до завершення аналізу HTML — безпечніше та краще для залежних сценаріїв.

Як визначити проблемний JavaScript

Використовуйте ці інструменти, щоб дізнатися, які сценарії блокують відтворення:

PageSpeed Insights
Chrome DevTools → вкладка Lighthouse
Chrome DevTools → Мережа → фільтр за JS

Зосередьтеся на завантаженні файлів JS у <head> і позначено як «блокування візуалізації».

Як відкласти JavaScript у WordPress

Варіант 1: додайте Defer за допомогою коду (без плагінів)

Додайте цей код до дочірніх тем functions.php застосовувати defer для всіх сценаріїв, крім jQuery:

функція add_defer_attribute($tag, $handle) {
// Пропустити jQuery
if ('jquery-core' === $handle || 'jquery' === $handle) {
повернути $tag;
}
return str_replace('src', 'defer src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Варіант 2. Використовуйте Async

Подібно до defer, ви можете використовувати async замість цього — просто змініть `defer` на `async` у коді вище. Але будьте обережні: деякі скрипти залежать від порядку завантаження і можуть зламатися.

ПРОЧИТАЙТЕ Розумна оптимізація бази даних WordPress для усунення роздуття та підвищення швидкості

Використання плагінів (з обережністю)

Якщо ви не хочете торкатися коду, ці плагіни дозволяють відкласти або асинхронізувати JS:

**WP Rocket** – простий інтерфейс, добре працює, але платний.
**Asset CleanUp** – дозволяє вручну відкласти або вимкнути певні сценарії.
**Літаючі сценарії** – легкі та орієнтовані на відкладення JS після затримки.

⚠️ Завжди тестуйте після ввімкнення — відкладення неправильного сценарію може порушити макет або функціональність вашого сайту.

Як перевірити вплив

Використовуйте PageSpeed Insights або GTmetrix до/після
Відкрийте свій сайт у вікні анонімного перегляду, щоб виявити будь-які видимі проблеми
Використовуйте DevTools → вкладка «Мережа» → перевірте порядок завантаження та час

Висновок: відкласти стратегічно

Відкладення JavaScript є одним із найпростіших, але найпотужніших методів для прискорення вашого сайту WordPress. Почніть із безпечних сценаріїв, уникайте відкладення jQuery (якщо ви не вбудовуєте його) і ретельно тестуйте.

Хочете піти далі? Надішліть запит на безкоштовний аудит ефективності від SpeedWP Pro і ми допоможемо оптимізувати ваші сценарії та стратегію завантаження для отримання максимальних результатів.

Блог