Як усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки
Під час створення веб-сайту є кілька аспектів, які мають першочергове значення, щоб запропонувати користувачам зручну роботу. Одним із цих аспектів є час завантаження. Веб -сайт, який швидко завантажується, завжди цінується відвідувачами, які хочуть якомога швидше знайти те, що шукають. Щоб отримати швидкий час завантаження, вам слід навчитися усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки.
На швидкість веб-сайту може впливати багато факторів, але найбільший вплив мають фактори, які обговорюються в цій статті. Рівняння ідеального веб-сайту може бути складним для вирішення, оскільки певні елементи не залежать від ваших дій. Вони продиктовані кожною конкретною ситуацією (наприклад, географічне розташування, швидкість Інтернету). Однак ви можете оптимізувати доставку CSS, змінюючи елементи, якими ви можете повністю керувати. Дізнайтеся більше про цю тему нижче в статті, створеній нашою командою wpDataTables.
Визначення блокування візуалізації та вмісту у верхній частині сторінки
Блокування візуалізації
Блокування візуалізації стосується елементів, які перешкоджають завантаженню важливого вмісту веб-сайту (наприклад, основного тексту статті) до того, як буде завантажено всю сторінку. Гарним прикладом такого елемента є будь-який додатковий JavaScript або CSS, який додається на веб-сайт. Цей код може перешкоджати користувачеві бачити будь-що у своєму веб-переглядачі, доки код не буде повністю виконано, таким чином блокуючи відтворення.
Вміст у верхній частині сторінки
Коли відвідувач заходить на веб-сайт, його вітає певна частина сайту – тобто найвища частина. Щоб побачити решту, користувачеві доведеться прокрутити вниз або виконати інші дії на сайті. Вміст, який відвідувачі бачать одразу після доступу до нього, називається вмістом у верхній частині сторінки.
Про блокування візуалізації в JavaScript і CSS
Браузери читають HTML, щоб відобразити сайт. Це процес, який складається з кількох етапів. Якщо браузер натрапляє на елементи, які посилаються на сценарій/таблицю стилів, для читання коду потрібні додаткові дії. Браузеру потрібно буде запитати файл, дочекатися відповіді, завантажити файл із сервера, а потім виконати файл.
Звичайно, ці додаткові дії можуть сповільнити час завантаження. Майте на увазі, що деякі теми WordPress включають не лише один файл CSS або JavaScript. Через ці файли час завантаження може значно сповільнитися. Ось чому вам потрібно буде видалити ресурси, які блокують візуалізацію, зі свого сайту. Найчастіше це не критичні файли, тому ви можете відкласти аналіз JavaScript, щоб зменшити блокування візуалізації сторінки, таким чином підвищивши швидкість на вашому сайті.
Виявлення JavaScript і CSS, які блокують рендеринг
Щоб усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки, вам потрібно буде визначити, що це за елементи. Один із найпростіших способів їх виявити — відкрити свій веб-сайт за допомогою інструмента швидкості сторінки, який повідомляє вам, з якими проблемами він стикається під час завантаження. PageSpeed Insights від Google є одним із таких інструментів, який допоможе вам знайти файли, які блокують відтворення на вашому сайті. Після того, як ви з’ясували, що це за файли, ви можете продовжити видалення або зміну порядку JavaScript, який блокує рендеринг.
Як усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки?
У цій ситуації у вас є два варіанти: дізнатися, як самостійно усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки, або використати для цього плагін. Якщо ви технічно підковані та бажаєте дізнатися, як усунути ресурси, що блокують візуалізацію, застосуйте один із цих методів:
Очистіть JavaScript із критичного шляху візуалізації
Критичний шлях візуалізації має містити лише ті елементи, які є важливими для веб-сайту. Ви можете перемістити непотрібні ресурси JavaScript із цього шляху. Це робиться шляхом додавання певних атрибутів, де потрібен JavaScript. Атрибути:
- Async: цей атрибут повідомляє веб-переглядачу, що він повинен почати завантаження ресурсів негайно, щоб уникнути повільного завантаження. Коли ресурси стають доступними, розбір HTML тимчасово призупиняється, а ресурси завантажуються.
- Відкласти: цей атрибут повідомляє браузеру відкласти завантаження ресурсів до завершення процесу аналізу HTML. Після завершення браузер завантажить і відобразить сценарії в порядку їх появи на веб-сайті.
Перевірте, як надаються ресурси CSS, і оптимізуйте їх
Щоб усунути ресурси, що блокують візуалізацію, у CSS, вам доведеться:
- Визначте ресурси, необхідні для вмісту у верхній частині сторінки, і вставте стилі CSS у HTML.
- Використовуйте інший атрибут, щоб визначити ресурси CSS, які абсолютно необхідні (атрибут медіа).
- Завантажуйте ресурси CSS асинхронно (використовуючи описані вище атрибути).
Список плагінів, які можуть допомогти вам усунути JavaScript, що блокує відтворення
Автооптимізувати
Щоб усунути JavaScript і CSS, які блокують відтворення, у вмісті у верхній частині сторінки WordPress, ви можете використовувати такі плагіни, як Autoptimize. Цей плагін покращує час завантаження вашого сайту WordPress, об’єднуючи фрагменти коду, зменшуючи блоки коду шляхом видалення непотрібних символів (стиснення) тощо. Завдяки внесенню цих змін код легше читати, а розмір файлу зменшується, таким чином скорочується час завантаження на кілька сотень мілісекунд або навіть секунд.
Щоб установити цей плагін, вам просто потрібно отримати доступ до інформаційної панелі WordPress і перейти на вкладку «Плагіни». Потім виберіть опцію «Додати новий», яка розташована у верхній частині вікна. Після цього ви можете шукати Autoptimize або інші плагіни в рядку пошуку. Натисніть «Установити зараз», активуйте його для потрібного веб-сайту, і все готово.
Загальний кеш W3
Autoptimize має багато інших альтернатив, які можна використовувати для видалення ресурсів, що блокують рендеринг, з WordPress. Плагін W3 Total Cache є одним із кращих. Цікавим у цьому плагіні є те, що він містить кілька додаткових функцій для оптимізації WordPress. Кешування – це процес, у якому певні файли зберігаються на комп’ютері користувача, щоб покращити його роботу з веб-сайтом. Наступні відвідування стануть легшими, а час завантаження покращиться.
Speed Booster Pack
Ще один варіант – Speed Booster Pack. Після встановлення ви зможете отримати доступ до налаштувань і вибрати параметри, які відповідають вашим потребам. Плагін пропонує кілька параметрів конфігурації, як-от переміщення сценаріїв у нижній колонтитул або відкладення аналізу файлів JavaScript. Вибравши їх, ви можете видалити JavaScript і CSS, які блокують відтворення, у вмісті у верхній частині сторінки лише за пару клацань.
Оптимізація JCH
JCH Optimize — це плагін, який поєднує JavaScript і CSS, одночасно зменшуючи розмір файлів. Він має багато інших функцій, які можуть бути корисними в довгостроковій перспективі, але він чудово усуває ресурси, які блокують рендеринг. Перейдіть між налаштуваннями та активуйте функції, які здаються актуальними для вашого веб-сайту.
Незважаючи на те, що це вимагає певної уваги, вирішення цієї проблеми матиме великий вплив на ваш сайт. Коли ви дізнаєтесь, як видалити JavaScript і CSS, які блокують рендеринг, у вмісті у верхній частині сторінки, якнайшвидше видаліть усі елементи, які можуть уповільнити роботу веб-сайту.
Якщо вам сподобалося читати цю статтю про те, як усунути блокування JavaScript і CSS у вмісті у верхній частині сторінки, вам слід переглянути цю статтю про те, як змінити шрифти в WordPress.
Ми також писали про кілька пов’язаних тем, як-от як вставити iframe WordPress, як знайти ідентифікатор сторінки в WordPress, як завантажити медіа-бібліотеку WordPress, як зупинити DDoS-атаку та як приховати назву сторінки в WordPress.