У сучасному цифровому світі, де конкуренція надзвичайно висока, швидкість завантаження веб-сайту відіграє вирішальну роль для успіху будь-якого онлайн-бізнесу. Пошукові системи, зокрема Google, надають перевагу сайтам, які швидко завантажуються, оскільки вони розуміють важливість позитивного досвіду для користувачів.
Дослідження підтверджують, що швидке завантаження сторінок сприяє збільшенню зацікавленості користувачів та покращенню коефіцієнта конверсії. Навіть невелика затримка, всього на одну секунду, може призвести до зменшення конверсії на 7%. З огляду на це, власники веб-сайтів повинні приділяти особливу увагу продуктивності своїх ресурсів.
Google бере до уваги ефективність веб-сайту при ранжуванні результатів пошуку. Веб-сайти з швидким завантаженням мають більшу ймовірність з’явитися на перших позиціях, що приваблює більше відвідувачів і, як наслідок, збільшує прибуток. Але яким чином можна відповідати вимогам Google і забезпечити швидке завантаження веб-сайту?
Однією з проблем можуть бути ресурси, які уповільнюють час завантаження, наприклад, файли CSS та JavaScript.
Видалення цих ресурсів може бути складним і потребувати значних зусиль, особливо для тих, хто не має технічних навичок.
У цій статті ми розглянемо, що таке ресурси, що блокують візуалізацію, як вони впливають на продуктивність веб-сайту, і надамо покрокові інструкції щодо їх усунення на сайті WordPress. Давайте розпочнемо оптимізацію вашого веб-сайту для досягнення швидкості та успіху!
Ресурси, що затримують відображення
Будь-який ресурс, який необхідно завантажити до того, як веб-сторінка буде відображена, вважається ресурсом, що блокує візуалізацію. Такі ресурси негативно впливають на продуктивність та ефективність веб-сайту, збільшуючи час завантаження сторінки.
Файл CSS або JavaScript може вважатися таким, що блокує відображення, якщо він затримує відображення веб-сторінки. Однак їхня важливість може змінюватись залежно від того, наскільки вони необхідні для відображення сторінки.
Коли користувач відкриває сторінку, браузер спершу обробляє HTML-код, щоб відобразити контент у верхній частині сторінки. Зустрівши файли CSS і JavaScript, він також їх завантажує та обробляє. Якщо ці файли містять додатковий або невикористаний код, це збільшує час завантаження веб-сторінки.
Типи ресурсів, що блокують відображення
Зазвичай файли CSS і JavaScript вважаються ресурсами, які затримують відображення у WordPress. Браузер сприймає їх як критичні і вимагає їх повного завантаження перед відображенням сторінки. Але існують й інші типи файлів, що впливають на цей процес.
Ось перелік основних ресурсів, що блокують візуалізацію:
Таблиці стилів CSS
Оформлення та вигляд веб-сторінки визначаються таблицями стилів CSS. Файл CSS буде ресурсом, що блокує візуалізацію, якщо він розміщений у розділі <head> HTML-сторінки.
Файли JavaScript у розділі <head>
JavaScript – це скриптова мова, що використовується для забезпечення динамічної поведінки та інтерактивності веб-сторінки. Файл JavaScript буде ресурсом, що затримує візуалізацію, якщо він розміщений у розділі <head> HTML-сторінки.
Шрифти
Тексти на веб-сторінці відображаються за допомогою різних шрифтів. Шрифти також є ресурсом, що блокує візуалізацію, якщо вони включені в розділ <head> HTML-сторінки і завантажуються з локального сервера або CDN.
Імпорт HTML
Це застаріла функція HTML, яка дозволяє веб-сторінкам включати елементи з інших HTML-документів. Хоча імпорт HTML зараз використовується рідко, його ще можна зустріти на старих сайтах. Імпорт HTML також вважається ресурсом, що блокує відображення.
Чому ресурси, що затримують відображення, шкідливі для веб-сторінок
Якщо на вашому сайті WordPress є ресурси, що блокують візуалізацію, це негативно впливає на позиції у пошукових результатах. Навіть якщо ви зараз знаходитесь на передових позиціях, більш ефективні сайти з часом вас випередять.
Сайти з ресурсами, що блокують відображення, змушені завантажувати додаткові файли під час відтворення. Користувачі повинні чекати, поки ці файли обробляться, перш ніж побачити веб-сайт. Ці ресурси впливають на такі показники ефективності веб-сайту:
- Largest Contentful Paint (LCP): показує, скільки часу потрібно для завантаження основного контенту сторінки.
- First Contentful Paint (FCP): час, необхідний браузеру для відображення першого елемента DOM (Document Object Model) на вашому веб-сайті.
- Total Blocking Time (TBT): оцінює час від першого відображення контенту до того, як сторінка стає повністю інтерактивною.
Хоча ресурси, що блокують відображення, не є обов’язковими для завантаження, вони можуть затримувати відображення веб-сторінки. Тому їх усунення є важливим для забезпечення комфортної навігації користувачів по вашому веб-сайту.
Давайте розглянемо детальніше, чому блокування відображення є серйозною проблемою для веб-сторінок:
Повільне завантаження сторінки
Ресурси, що блокують відображення, є однією з основних причин повільного завантаження веб-сайтів. Якщо веб-сторінка містить файли з непотрібними елементами, це уповільнює її завантаження. Як наслідок, це негативно впливає на позиції у пошукових результатах, зменшує залученість користувачів та збільшує показник відмов.
Заблоковане відображення
Веб-браузер часто зупиняє відображення веб-сторінки, коли зустрічає ресурси, що блокують відображення. Це відбувається тому, що браузер хоче спочатку завантажити та обробити ці ресурси.
Зрештою, користувачі розчаруються і покинуть ваш сайт, якщо сторінка не відповідає або відображається занадто повільно.
Крім того, якщо ресурс завантажується повільно, браузер може відмовитися від його завантаження. Це може призвести до пошкоджених сторінок або відсутності інформації.
Зменшення залучення користувачів
Затримки відображення негативно впливають на взаємодію з користувачем. Користувачі очікують швидкого завантаження, і зазвичай покидають сайти, що завантажуються повільно, переходячи на ті, що працюють швидше.
Повільне завантаження сайтів негативно впливає на задоволеність користувачів та репутацію бренду, що призводить до різкого зменшення трафіку веб-сайту та коефіцієнта конверсії.
Існує багато способів усунення ресурсів, що блокують відображення, з WordPress. Далі ми розглянемо ручні методи, а потім покажемо, як це можна зробити за допомогою деяких популярних плагінів WordPress.
Усунення ресурсів, що блокують відображення, вручну
Не хвилюйтесь, ви можете усунути цю проблему вручну. Цей розділ допоможе вам навчитись деяких методів оптимізації продуктивності WordPress. Але перед цим, подивіться відео, щоб ознайомитися з термінами, які будемо обговорювати.
#1. Визначення ресурсів, що блокують відображення
Перш ніж усувати ресурси, що блокують відображення, їх спочатку необхідно виявити. Для цього виконайте наступні дії:
- Перейдіть до Google PageSpeed Insights.
- Введіть URL-адресу вашого сайту у поле пошуку.
- Натисніть кнопку “Аналізувати”, щоб отримати звіт про ваш веб-сайт.
- Прокрутіть вниз і перевірте розділ “Можливості”.
- Якщо на вашій сторінці є ресурси, що блокують відображення, вони будуть там вказані.
#2. Використання атрибутів “defer” і “async” для JS
Визначивши ресурси, що блокують відображення, настав час їх усунути для покращення продуктивності. Одним з методів є використання атрибутів “defer” або “async” для файлів JavaScript.
Атрибут “defer” дозволяє браузеру завантажити JS файл і виконати його, але лише після того, як сторінка повністю завантажилась і готова до відображення контенту.
Таким чином, інші елементи на сторінці можуть завантажуватися паралельно з файлом JavaScript, що скорочує час завантаження сторінки.
Атрибут “async” дозволяє браузеру завантажувати JS файл одразу, як він стає доступним. При цьому не блокується завантаження інших елементів сторінки. Це прискорює процес завантаження.
Використання атрибутів “defer” або “async” дозволяє усунути ресурси, що блокують відображення, і підвищити швидкість вашого веб-сайту.
#3. Використання атрибута “media” для умовного CSS
Інший спосіб усунути ресурси, що блокують відображення, – використання атрибута “media” для умовного CSS. Цей атрибут дозволяє визначити окремі CSS-файли для настільних і мобільних браузерів.
Наприклад, ви можете включити CSS-файл для настільних пристроїв та інший для мобільних. Таким чином браузер буде завантажувати CSS для робочого столу при доступі з настільного пристрою.
Аналогічно, мобільний CSS буде завантажуватись лише при доступі з мобільних пристроїв. Завантажуючи окремий CSS для конкретних пристроїв, ви зменшите ресурси, що блокують візуалізацію, та покращите час завантаження сайту.
#4. Відкладання некритичного CSS
Крім використання атрибуту “media”, спробуйте відкласти некритичний CSS. Спочатку завантажується основний CSS, а решта CSS завантажується після завантаження сторінки.
Наприклад, у вас може бути великий CSS-файл, що містить усі стилі для сайту. Але для відображення контенту у верхній частині сторінки потрібна лише невелика його частина. Відкладання некритичного CSS дозволяє швидко відобразити контент у верхній частині сторінки, а решта CSS завантажиться після завантаження сторінки.
#5. Видалення невикористаних CSS і JS
Видалення непотрібних CSS та JavaScript файлів – це ще один спосіб видалити ресурси, що блокують відображення. Ці файли можуть збільшити розмір сторінки та час її завантаження.
Видаляючи непотрібні файли CSS і JS, ви зменшуєте кількість ресурсів, що блокують відображення. Використовуйте такі інструменти як PurifyCSS або UnusedCSS для видалення невикористаних CSS-файлів з вашого веб-сайту.
#6. Локальне завантаження спеціальних шрифтів
Користувацькі шрифти також можуть створювати ресурси, що обмежують відображення. Замість використання зовнішніх джерел, таких як Google Fonts, локально завантажуйте власні шрифти, щоб уникнути цих ресурсів.
Локальне завантаження шрифтів забезпечує швидке та ефективне завантаження, не уповільнюючи продуктивність сайту, що покращує досвід користувача.
#7. Мінімізація JS і CSS
Мінімізація CSS і JavaScript файлів також покращує роботу сайту. Мініфікація видаляє непотрібні символи, такі як пробіли та коментарі, зменшуючи розмір файлів та прискорюючи їх завантаження.
Використовуйте такі інструменти, як MinifyJS або CSSNano. Зберігайте копії оригінальних файлів на випадок, якщо вам потрібно буде їх змінити.
Усунення ресурсів, що блокують відображення, за допомогою плагінів
У цьому розділі розглянемо, як можна усунути ресурси, що блокують відображення, за допомогою плагінів WordPress. Ці плагіни є популярними і дозволяють швидко видалити такі ресурси. Найголовніше, що ви можете покращити ефективність сайту без спеціальних технічних знань.
#1. W3 Total Cache
W3 Total Cache (W3TC) покращує взаємодію користувача з веб-сайтом WordPress, усуваючи ресурси, що блокують відображення, та покращуючи SEO, основні веб-показники тощо. Плагін використовує такі функції, як інтеграція CDN, щоб реалізувати найкращі практики.
Для усунення ресурсів, що блокують відображення, інсталюйте та активуйте плагін W3 Total Cache, а потім виконайте наступні дії:
- Перейдіть до розділу “Продуктивність” на панелі управління WordPress і натисніть “Загальні налаштування”.
- Під заголовком “Зменшити” увімкніть “Зменшити” та виберіть “Вручну” як режим зменшення.
- Натисніть “Зберегти всі налаштування”.
- За допомогою Google PageSpeed Insights зберіть файли Javascript та CSS, які блокують відображення.
- Поверніться до “Performance” > “Minify”.
- У розділі js спочатку натисніть “Увімкнути” для налаштувань JS Minify. Потім у розділі “Операції в областях” виберіть “Не блокувати”, використовуючи тип “відкласти” для тегу “Before
<head>“. - Перейдіть до керування файлами JS, виберіть тему і натисніть “Додати сценарій”. Вставте URL-адреси Javascript, які ви знайшли у Google PageSpeed Insights.
- Прокрутіть до розділу CSS. Виберіть тему з випадаючого меню і натисніть “Додати таблицю стилів”. Скопіюйте і вставте URL-адреси, зібрані з PageSpeed Insights.
- Натисніть “Зберегти параметри та очистити”.
#2. JCH Optimize
JCH Optimize покращує продуктивність веб-сайту WordPress, використовуючи показники Google PageSpeed. Плагін покращує First Contentful Paint (FCP), Largest Contentful Paint (LCP), Speed Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) тощо.
Це значно покращує загальний досвід користувача та продуктивність веб-сайту.
Після встановлення та активації JCH Optimize виконайте наступні кроки, щоб усунути ресурси, що блокують відображення:
- Перейдіть до “Налаштування” > “JCH Optimize”, прокрутіть трохи вниз і перейдіть до “Основні функції”.
- Увімкніть оптимізацію доставки CSS, щоб усунути блокування візуалізації CSS. Ця функція автоматично визначає основний CSS для відображення контенту у верхній частині сторінки і вставляє його в розділ
<head>HTML.
- Посилання попереднього завантаження використовується для асинхронного завантаження об’єднаних CSS-файлів.
- Щоб видалити ресурси, які блокують відображення Javascript, включіть атрибути async або defer до тегу
<script>. JavaScript може вийти з ладу, якщо від них є якісь залежності. - На панелі керування JCH Optimize перейдіть до розділу “Автоматичні налаштування об’єднання файлів”.
- Натисніть “Оптимум”, що автоматично вмикає Defer/Async Javascript.
- Ввімкнення оптимального налаштування відкладає або завантажує JavaScript асинхронно.
- Якщо файли Javascript завантажуються динамічно, їх не можна відкласти.
#3. Speed Booster Pack
Для підвищення продуктивності вашого сайту та зручності його використання Speed Booster Pack – це ще один чудовий плагін WordPress. Ваш сайт отримає вищі позиції у пошукових системах, що призведе до збільшення трафіку та швидкості.
Після встановлення та активації Speed Booster, виконайте наступні кроки:
- Перейдіть до Speed Booster Pack на панелі управління WordPress.
- Щоб видалити ресурси, що блокують відображення JavaScript, натисніть “Активи” і прокрутіть вниз. Перейдіть до опції “Оптимізувати Javascript”. Ви можете відкласти всі файли JS, вбудований JS або вибрати налаштувати.
- Потім увімкніть “Перемістити JavaScript у нижній колонтитул”. Це переміщує всі JS-файли і вбудовані JS в нижню частину сторінки.
- Тепер натисніть “Оптимізувати CSS”, щоб видалити ресурси, що блокують відображення CSS.
- Ви отримаєте опції для ввімкнення критичного CSS, що оптимізує доставку CSS згідно з рекомендаціями Google. Ця опція відкладе усі CSS-файли і вбудує стилі контенту у верхній частині сторінки.
Ви можете увімкнути Inline all CSS, щоб вставляти усі CSS-файли у вивід HTML. Також можна зменшити усі вбудовані CSS.
- Після налаштування плагіна збережіть усі налаштування, щоб усунути ресурси, що блокують відображення.
#4. Autoptimize
Autoptimize – ще один плагін для оптимізації та легкого усунення ресурсів, що блокують відображення. Плагін оптимізує JS-скрипти та CSS-стилі, переміщуючи їх у нижній колонтитул, агрегуючи, мініфікуючи та кешуючи.
Він оптимізує CSS, вставляючи його у заголовок сторінки, вбудовуючи критичний CSS та посилаючись на повний агрегований CSS. Також автоматично мінімізує HTML.
Встановіть та активуйте плагін Autoptimize, а потім виконайте наступні кроки, щоб видалити ресурси, що блокують відображення:
- Перейдіть у “Налаштування” > “Автооптимізація” на панелі управління WordPress.
- У розділі “Параметри Javascript” поставте галочку “Оптимізувати код JavaScript?”.
- У розділі “Параметри CSS” поставте галочку “Оптимізувати код CSS?”.
- Натисніть “Зберегти зміни” та “Очистити кеш”.
Цього зазвичай достатньо, щоб усунути ресурси, що блокують відображення. Однак результат може змінитись в залежності від теми і плагінів. Запустіть ваш сайт через PageSpeed Insights, щоб переконатися, що проблеми вирішено. Для подальшої оптимізації виконайте наступні дії:
- В налаштуваннях Javascript і CSS доступно багато параметрів.
- Увімкніть також агрегатні файли CSS та агрегатні JS.
- Натисніть “Зберегти зміни”.
#5. WP Rocket
WP Rocket – це популярний преміальний плагін WordPress для оптимізації продуктивності кешування. Він включає видалення ресурсів, що блокують відображення. В результаті значно покращуються основні веб-показники та оцінка PageSpeed Insights.
Після встановлення та активації плагіна WP Rocket видаліть ресурси, що блокують відображення, виконавши наступні дії:
- Натисніть WP Rocket, перейдіть на вкладку “Оптимізація файлів” і розділ “Файли CSS”.
- Увімкніть оптимізовану доставку CSS.
- Перейдіть до розділу “Файл JavaScript” і виберіть “Завантажити JavaScript відкладено”. Ви також можете спробувати безпечний режим для Jaquery.
- Збережіть усі зміни, натиснувши “Зберегти зміни”.
Переваги видалення ресурсів, що блокують відображення, з веб-сайту
Швидший час завантаження сторінки значно впливає на SEO веб-сайту. Google надає перевагу сайтам, що завантажуються швидко. Сторінки з балом вище 90 завжди матимуть вищий пріоритет у пошукових результатах. Згадані плагіни дозволяють отримати наступні показники PageSpeed:
Швидкий час завантаження сторінки сприяє підвищенню активності користувачів, які з більшою ймовірністю залишаться на сайті. Таким чином, користувачі можуть комфортно переміщатися по сайту або швидко здійснювати покупки.
Видалення ресурсів, що блокують відображення, покращує взаємодію з мобільними користувачами, які часто використовують повільніші мережі з обмеженим трафіком.
Заключні думки
Ми розглянули як ручні, так і автоматичні процеси усунення ресурсів, що блокують відображення. Якщо ви хочете оптимізувати кожен аспект роботи сайту, ви можете зробити це вручну. Якщо ж ви хочете мінімізувати зусилля та досягти кращого результату PageSpeed, використовуйте плагіни, які ми згадали.
Ми бачили неймовірні показники ефективності на декількох веб-сайтах. Тепер ваша черга оптимізувати свій веб-сайт WordPress з мінімальними технічними знаннями та забезпечити винятковий досвід користувачам.
Також ви можете дослідити інші способи зробити завантаження сайту блискавичним.