Блокування JavaScript і CSS у WordPress: 5 плагінів, які це виправлять

Не так давно Google оголосив, що веб-сайти, які завантажуються більше трьох секунд, не є зручними для SEO.

У цю еру Інтернету та цифрового маркетингу вам потрібен найшвидший веб-сайт, якщо ви хочете ефективно конкурувати з тисячами конкурентів у всьому світі. Немає сумніву, що швидший веб-сайт має кращі шанси залучити відвідувачів і підвищити їхню зацікавленість вмістом.

Запуск веб-сайту WordPress означає значну кількість сценаріїв, які виконуються одночасно, щоб зробити ваш сайт доступним.

Однак не всі ці предмети завжди необхідні для завантаження. Якщо ви коли-небудь перевіряли ефективність свого веб-сайту за допомогою Google Insights PageSpeed, ви, мабуть, стикалися з параметром JavaScript і CSS, який блокує відтворення, що впливає на його швидкість.

Сьогодні ми поговоримо про ці сторонні файли та розповімо вам, як їх видалити, щоб покращити свій сайт.

 

Що таке JavaScript і CSS, що блокують рендеринг?

Підсумовуючи, JavaScript і CSS, що блокують рендеринг, — це серія таблиць стилів і сценаріїв, які необхідно повністю запустити, перш ніж сайт завантажиться і стане видимим.

Теми та плагіни, які ви встановлюєте на своєму веб-сайті WordPress, додають багато цих файлів до зовнішнього розділу вашого веб-сайту. І, як ви вже здогадалися, деякі з них уповільнюють час завантаження сторінки та перешкоджають відображенню ваших сторінок.

Коли відвідувач веб-сайту відкриває ваш веб-сайт, інтернет-браузер спочатку завантажує необхідні файли JavaScript і CSS перед HTML.

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

Хитрість тут полягає в тому, що ви можете відкласти завантаження деяких сценаріїв, не створюючи проблем з тим, що бачать відвідувачі, відкриваючи вашу сторінку.

Власники веб-сайтів можуть вносити зміни до свого сайту, щоб веб-браузери не завантажували будь-які коди, окрім того, що необхідно для верхньої частини сторінки, яку користувач одразу бачить.

Іншими словами, браузери завантажують лише необхідні файли для цього розділу, перш ніж користувач прокрутить сторінку вниз. Ця область веб-сторінок називається ATF, що означає Above the Fold. Інші частини, які вимагають від користувачів прокручувати вниз, щоб мати можливість побачити, це розділ не ATF.

Таким чином, якщо ваш веб-сайт завантажує коди JavaScript і CSS, пов’язані з розділами, що не є ATF, для завантаження сторінок потрібно більше часу. І тому Google намагається сказати вам припинити запуск непотрібних ресурсів у кодах вашого сайту.

 

Знайдіть JavaScript і CSS, які блокують візуалізацію

Найпростіший спосіб дізнатися про цю проблему — запустити тест швидкості за допомогою Google PageSpeed ​​Insights. Після відвідування сторінки все, що вам потрібно зробити, це ввести свою URL-адресу в обов’язкове поле, а потім натиснути кнопку «Аналізувати».

Якщо ця проблема виникла на сторінці, ви побачите пропозицію, яка скаже вам усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки.

Було б найкраще, якби ви не забували, що більшість рейтинг сайтів десь між 70 і 90, і навіть найефективніші рідко досягають цифри, близької до 100. Тож ви ніколи не повинні змушувати свій сайт досягати 100. Робіть усе можливе, щоб отримати найвищий бал, не впливаючи на взаємодію з користувачем негативно.

Деякі сценарії залежать від теми та інструментів, які ви використовуєте на своєму сайті необхідні для ідеального UX ви маєте пропонувати своїй аудиторії. Тому абсолютно нерозумно видаляти їх, намагаючись досягти трохи вищого результату на сторінці результатів цього інструменту Google.

 

Виправте JavaScript і CSS, які блокують відтворення

Існує багато стратегій для усунення JavaScript, який блокує рендеринг. Основними методами є Async і Defer. Перший метод дозволяє браузеру користувача завантажувати JavaScript під час аналізу інших частин HTML.

Хоча він не припиняє аналіз повністю під час завантаження файлу, Синтаксичний аналізатор HTML призупиняється для виконання сценарію під час його завантаження. З іншого боку, підхід Defer дозволяє браузеру завантажувати JavaScript під час розбору інших частин HTML і не виконувати сценарій, доки розбір HTML не закінчено.

Усунути CSS, що блокує візуалізацію, складніше, оскільки ви можете затримати необхідні коди для завантаження вмісту ATF. Процедура дещо складна і вимагає хорошого розуміння веб-розробки.

Тим не менш, ми звертаємося до пересічних користувачів, які самостійно керують своїм веб-сайтом.

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

 

Найкращі плагіни WordPress для вирішення проблем JavaScript і CSS, які блокують рендеринг

У наступних параграфах ми представимо п’ять найефективніші плагіни WordPress які допоможуть вам найглибше вирішити цю проблему.

Увага: Перш ніж використовувати будь-який із наведених нижче інструментів, обов’язково створіть резервну копію веб-сайту, щоб запобігти ймовірній втраті даних.

 

Autoptimize

Команда Autoptimize плагін спеціально розроблено для вирішення проблем, які пропонують інструменти аналізу веб-сайтів, такі як Google PageSpeed ​​Insights. Це покращує доставку файлів JavaScript і CSS без особливої ​​уваги до інших аспектів продуктивності веб-сайту.

Якщо ви шукаєте основні функції оптимізації, цей плагін дасть вам те, що вам потрібно. Значна частина цього інструменту полягає в тому, що він перетворює зображення вашого веб-сайту в оптимізований формат WebP.

Після встановлення та активації Autoptimize потрібно встановити прапорці «Оптимізувати код JavaScript» і «Оптимізувати код CSS» у налаштуваннях плагіна. Будьте обережні, щоб не поставити прапорці під цими двома параметрами, які об’єднують файли CSS і сценаріїв.

Хоча цей плагін доступний безкоштовно, ви також можете придбати пакети преміум-класу, які допоможуть вам налаштувати веб-сайт.

 

WP Rocket

WP Rocket це добре відоме ім’я серед інструментів оптимізації WordPress, яке допомагає вам у різних аспектах, таких як модифікація JavaScript і CSS, налаштування відкладеного завантаження. Процес налаштування WP Rocket досить простий, але вам може здатися важко зрозуміти, як все відбувається в інтерфейсі.

Він готовий одразу після встановлення та застосовує оптимальні налаштування на вашому веб-сайті одразу після встановлення. Враховуючи неминучість збоїв у роботі веб-сайту через зміни сценарію, плагін за замовчуванням не активує параметри JavaScript і CSS, які блокують візуалізацію.

Але ви можете легко ввімкнути цю функцію, переглянувши налаштування плагіна та знайшовши відповідні параметри в розділах «Файли CSS» і «Файли JavaScript».

Основний плагін коштує 49 доларів на рік, а також рік підтримки. Крім того, ви можете знайти кілька безкоштовні додатки також для основного плагіна WordPress.

 

RabbitLoader

RabbitLoader це передовий плагін для оптимізації продуктивності WordPress, розроблений для того, щоб веб-сайт працював швидше, плавніше та ефективніше.

Подібно до широко відомої WP Rocket, RabbitLoader не тільки підвищує продуктивність вашого сайту, але також пропонує деякі інноваційні функції, які відрізняють його від інших гравців у грі.

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

Оптимізація зображення: Зображення можуть значно уповільнити веб-сайт, але функція оптимізації зображень RabbitLoader змінює правила гри. Він автоматично стискає та змінює розміри зображень до оптимального розміру без шкоди для якості, забезпечуючи швидке завантаження вашого сайту без шкоди для візуальної привабливості.

Відкладене завантаження: І WP Rocket, і RabbitLoader пропонують відкладене завантаження для зображень та фреймів, але RabbitLoader йде далі, пропонуючи відкладене завантаження JavaScript.

Сумісність: RabbitLoader розроблений для бездоганної роботи з широким спектром тем і плагінів WordPress, як і WP Rocket. Незалежно від того, чи є у вас простий блог чи складний веб-сайт електронної комерції, RabbitLoader розроблено для покращення продуктивності вашого сайту без конфліктів.

 

W3 Total Cache

W3 Total Cache є надійним покращувачем продуктивності, який вирішує не лише проблеми з кешуванням, але й проблеми, спричинені сценаріями та таблицями стилів.

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

Далі вам слід натиснути вкладку «Усунути ресурси, що блокують рендеринг» і скопіювати повну адресу посилання необхідних файлів для блокування сценаріїв і таблиць стилів. Тепер ви можете використовувати ці посилання та вводити їх у розділі «JS» сайту Продуктивність>Зменшити Вкладка.

W3 Total Cache має понад мільйон активних інсталяцій, і ви можете безкоштовно завантажити його на свій сайт із веб-сайту WordPress.org.

 

Speed ​​Booster Pack

Speed ​​Booster Pack це надійний інструмент для оптимізації таблиць стилів, JavaScript, відкладеного завантаження та видалення безладу. Команда розробників постійно оновлює цей плагін, щоб підтримувати його в актуальному стані за допомогою останніх оновлень і заходів безпеки.

Якщо ви продаєте продукти та послуги в Інтернеті, Оптимізація для WooCommerce Функції Speed ​​Booster Pack дуже допоможуть вам у підвищенні видимості вашого магазину в Інтернеті.

Ви можете швидко виправити JavaScript і CSS, які блокують відтворення, на вашому веб-сайті WordPress, натиснувши вкладку «Додатково» в меню Speed ​​Booster Pack панелі адміністратора.

Для JavaScript активуйте параметри «Перемістити сценарії до нижнього колонтитула» та «Відкласти розбір файлів JavaScript». Далі перейдіть до меню «Оптимізація CSS» і виберіть один із доступних параметрів для покращення продуктивності вашого сайту.

Speed ​​Booster Pack — це безкоштовне рішення, доступне на веб-сайті WordPress.org.

 

JCH Оптимізація

JCH Оптимізація є останнім пунктом у цьому списку запропонованих плагінів, який оснащений корисними інструментами для прискорити завантаження сторінки. Наприклад, це допомагає вам зменшити кількість HTTP-запитів, необхідних для завантаження ваших сторінок, і водночас зменшити розмір цих сторінок.

Генератор спрайтів ще одна захоплююча функція, доступна в цьому плагіні, яка зменшує кількість HTTP-запитів для завантаження фонових зображень.

Використовуючи JCH Optimize, ви можете видалити JavaScript і CSS, які блокують візуалізацію, якщо оновитесь до преміум-плану. Все, що вам потрібно, це активувати параметри «Преміум» або «Оптимальний» у розділі «Автоматичні налаштування». Налаштування доставки CSS також доступні лише у версії Pro.

Ви можете безкоштовно встановити цей плагін із WordPress.org, але вам потрібно придбати преміум-план, щоб повністю розкрити його потенціал. Цінові плани починаються від 29 доларів США на шість місяців і досягають 99 доларів США за довічний доступ.

 

Підсумки

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

Елемент JavaScript і CSS, який блокує візуалізацію, є однією з найпоширеніших пропозицій, які ви можете побачити під час використання потужного інструменту Google. Ви можете легко вирішити цю проблему, встановивши один із п’яти плагінів, які ми представили в цій статті прискорити завантаження ваших сторінок значною мірою.

Сподіваємося, що цей підручник буде для вас корисним, і веб-сайт, який швидко завантажується, допоможе отримати найкращі результати.