Як відкласти 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 за допомогою коду (без плагінів)
Додайте цей код до дочірніх тем functions.php застосовувати відкласти для всіх сценаріїв, крім 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, ви можете використовувати асинхронний замість цього — просто змініть `defer` на `async` у коді вище. Але будьте обережні: деякі скрипти залежать від порядку завантаження і можуть зламатися.
Використання плагінів (з обережністю)
Якщо ви не хочете торкатися коду, ці плагіни дозволяють відкласти або асинхронізувати JS:
- **WP Rocket** – простий інтерфейс, добре працює, але платний.
- **Asset CleanUp** – дозволяє вручну відкласти або вимкнути певні сценарії.
- **Літаючі сценарії** – легкі та орієнтовані на відкладення JS після затримки.
⚠️ Завжди тестуйте після ввімкнення — відкладення неправильного сценарію може порушити макет або функціональність вашого сайту.
Як перевірити вплив
- Використовуйте PageSpeed Insights або GTmetrix до/після
- Відкрийте свій сайт у вікні анонімного перегляду, щоб виявити будь-які видимі проблеми
- Використовуйте DevTools → вкладка «Мережа» → перевірте порядок завантаження та час
Висновок: відкласти стратегічно
Відкладення JavaScript є одним із найпростіших, але найпотужніших методів для прискорення вашого сайту WordPress. Почніть із безпечних сценаріїв, уникайте відкладення jQuery (якщо ви не вбудовуєте його) і ретельно тестуйте.
Хочете піти далі? Надішліть запит на безкоштовний аудит ефективності від SpeedWP Pro і ми допоможемо оптимізувати ваші сценарії та стратегію завантаження для отримання максимальних результатів.