У сучасному конкурентному цифровому середовищі швидкість веб-сайту має велике значення, коли йдеться про успіх онлайн-бізнесу. Такі гіганти пошукових систем, як Google, віддають перевагу сайтам, які швидко завантажуються, усвідомлюючи необхідність забезпечення бездоганної взаємодії з користувачем.
Згідно з дослідженнями, швидше завантаження сторінок підвищує залученість користувачів і рівень конверсії. Фактично, одна секундна затримка часу, необхідного для завантаження сторінки, може призвести до падіння конверсій клієнтів на 7%. Враховуючи це, очевидно, що власники веб-сайтів повинні приділяти велику увагу продуктивності веб-сайту.
Google серйозно ставиться до ефективності веб-сайту та враховує її під час визначення результатів пошуку. Отже, веб-сайти, які швидко завантажуються, з більшою ймовірністю з’являться першими в результатах пошуку, залучаючи більше відвідувачів і, зрештою, генеруючи більший дохід. Але як виконати вимоги Google і швидко завантажити веб-сайт?
Ви позбавляєтеся ресурсів, які можуть блокувати час завантаження веб-сайту, наприклад файлів CSS і JavaScript.
Однак видалення цих ресурсів може бути складним і трудомістким, особливо для осіб, які не мають технічних навичок.
У цій статті ми пояснимо ресурси, що блокують візуалізацію, і як вони впливають на продуктивність веб-сайту, а також надамо покрокові інструкції щодо їх усунення зі свого сайту WordPress. Отже, почнемо оптимізувати ваш веб-сайт для досягнення швидкості та успіху!
Ресурси, що блокують візуалізацію
Будь-який ресурс, який має бути завантажено перед відображенням веб-сторінки, вважається ресурсом, який блокує візуалізацію. Ці ресурси впливають на продуктивність і ефективність веб-сайту та збільшують час, необхідний для завантаження сторінки.
Файл CSS або JavaScript можна вважати ресурсом, який блокує відтворення, якщо цей файл блокує відтворення веб-сторінки. Однак важливість завантаження сторінки може змінюватися залежно від їх безпосередньої необхідності.
Коли користувач відкриває сторінку, браузер спочатку обробляє HTML-код, щоб відобразити її вміст у верхній частині сторінки. Коли браузер стикається з файлами CSS і JavaScript, він також завантажує та обробляє їх. Якщо файли ресурсів містять додаткові коди або невикористані частини, завантаження веб-сторінки займає більше часу.
Типи ресурсів, що блокують візуалізацію
Як правило, файли ресурсів, такі як CSS і JavaScript, вважаються ресурсами, які блокують рендеринг у WordPress. Браузер розглядає ці ресурси як критичні та вимагає завантаження, перш ніж сторінку можна буде показати. Але це не те; є більше файлів ресурсів, які блокують візуалізацію веб-сторінки.
Ось список ресурсів, які блокують візуалізацію:
Таблиці стилів CSS
Дизайн і подання веб-сторінки визначаються таблицями стилів CSS. Файл CSS розглядатиметься як ресурс, що блокує рендеринг, якщо його розміщено в розділі
сторінки HTML.Файли JavaScript у розділі
JavaScript — це мова сценаріїв, яку можна використовувати для забезпечення динамічної поведінки та взаємодії веб-сторінки. Файл JavaScript вважатиметься ресурсом, який блокує рендеринг, якщо розмістити його в розділі
сторінки HTML.Шрифти
Тексти на веб-сторінці відображаються різними шрифтами. Шрифти також вважаються ресурсом, що блокує рендеринг, якщо включені в розділ
сторінки HTML і завантажені з локального сервера або CDN.Імпорт HTML
Це старіша функція HTML, яка дозволяє веб-сторінкам включати елементи з інших документів HTML. Незважаючи на те, що імпорт HTML уже не використовується так часто, його все ще можна побачити на деяких старих сайтах. Імпорт HMTL також вважається ресурсом, який блокує рендеринг.
Чому ресурси, що блокують візуалізацію, шкідливі для веб-сторінок
Якщо ваш сайт WordPress містить ресурси, що блокують візуалізацію, ви відставатимете в результатах пошуку. Навіть якщо ви зараз на передовій, ефективніші сайти з часом переможуть вас.
Сайти з ресурсами, які блокують відтворення, завантажуватимуть додаткові файли під час відтворення сайту. Перш ніж побачити веб-сайт, користувачі повинні зачекати, поки обробляться файли. Ці ресурси вплинуть на такі показники ефективності веб-сайтів:
- Largest Contentful Paint: це визначає, скільки часу знадобиться для завантаження основного вмісту сторінки.
- Перше малювання вмісту: час, потрібний браузеру для створення першого вмісту об’єктної моделі документа (DOM) на вашому веб-сайті.
- Загальний час блокування: це оцінює, скільки часу потрібно від першого вмісту Pianto до того, скільки часу потрібно, щоб сторінка стала повністю інтерактивною.
Хоча ресурси, що блокують відтворення, не є необхідними для завантаження, вони можуть перешкоджати відображенню веб-сайту чи веб-сторінки. Тому вкрай важливо видалити такі ресурси, щоб запобігти ускладненню навігації користувачів вашим веб-сайтом.
Давайте детальніше розглянемо, чому блокування візуалізації є серйозною проблемою для веб-сторінок:
Повільне завантаження сторінки
Ресурси, що блокують візуалізацію, призведуть до того, що веб-сайт буде завантажуватися повільніше, що є одним із його головних недоліків. Веб-сторінка завантажується повільно, якщо містить файли ресурсів із непотрібними елементами. Отже, це вплине на вигляд результатів пошуку, знизить залучення користувачів і підвищить показник відмов.
Заблокований рендеринг
Часто веб-переглядач припиняє рендеринг веб-сторінки, коли натрапляє на ресурси, які блокують рендеринг, оскільки він хоче, щоб ресурси, які блокують рендеринг, були отримані й оброблені.
Зрештою, користувачі будуть дратуватися і залишать ваш сайт через те, що сторінка не реагує або повільно відображається.
Крім того, якщо ресурс завантажується повільно, браузер також може відмовитися і припинити спроби завантажити його. Це може призвести до пошкоджених сторінок або відсутності інформації.
Зменшення залучення користувачів
Коли виникають затримки візуалізації, взаємодія з користувачем погіршується. Користувачі завжди очікують швидкого завантаження, і вони зазвичай залишають сайт, що завантажується повільно. Тому вони потрапляють на сайт, який завантажується швидше.
Повільне завантаження сайтів згубно впливає на задоволеність споживачів і репутацію бренду. При цьому трафік веб-сайту та коефіцієнт конверсії також різко зменшуються.
Існують різні підходи до видалення ресурсів, які блокують візуалізацію, з WordPress. Однак ми познайомимо вас із ручними методами усунення ресурсів, які блокують рендеринг. Потім ми покажемо, як це можна зробити за допомогою деяких відомих плагінів WordPress.
Усуньте ресурси, що блокують рендеринг, вручну
Ви можете уникнути цього вручну, тому не засмучуйтесь. Але перегляд цього розділу напевно допоможе вам вивчити деякі методи оптимізації продуктивності WordPress. Але спочатку перегляньте це відео, щоб ознайомитися з обговорюваними термінами.
#1. Визначте ресурси, що блокують рендеринг
Ви повинні спочатку знайти ресурси, які блокують візуалізацію, перш ніж видаляти їх зі свого веб-сайту. Просто виконайте наведені нижче дії, щоб дізнатися про ресурси, які блокують візуалізацію, на вашому веб-сайті WordPress:
- Перейдіть до Google PageSpeed Insights.
- Введіть URL-адресу свого сайту в рядок пошуку.
- Натисніть кнопку «Аналізувати», щоб отримати статистику на своєму веб-сайті.
- Прокрутіть униз і перевірте розділ «Можливості».
- Якщо на вашій сторінці є ресурси, які блокують візуалізацію, вони будуть указані.
#2. Використання атрибутів «Defer» і «Async» для JS
Визначивши ресурси, які блокують візуалізацію, настав час усунути їх для покращення продуктивності веб-сайту. Серед різноманітних методів використання методу «defer» або «async» для файлів JavaScript є одним із підходів для цього.
Що стосується атрибута «defer», він дозволяє браузеру завантажувати файл JS, а потім виконувати його. Але це відбувається, коли сторінка закінчила завантажуватися і готова до відображення свого вмісту.
Таким чином, решта елементів на сторінці можуть завантажуватися паралельно з файлом JavaScript. В результаті скорочується час завантаження сторінки.
Іншим підходом є атрибут «async», який дозволяє браузеру завантажувати файл JS, коли він доступний. Це відбувається без блокування інших елементів сторінки. Отже, файл JS може завантажуватися паралельно з іншими елементами, що прискорює процес завантаження.
Ви можете позбутися ресурсів, які блокують візуалізацію, і підвищити швидкість веб-сайту, використовуючи атрибут «defer» або «async».
#3. Використання атрибута «Медіа» для умовного CSS
Використання атрибутів «медіа» для умовного CSS є іншим підходом до усунення ресурсів, які блокують рендеринг. За допомогою цього атрибута ви можете визначити унікальні файли CSS для настільних і мобільних браузерів.
Наприклад, ви можете включити файл CSS, призначений для настільних пристроїв, і інший файл CSS, призначений для мобільних пристроїв. Ви можете вказати браузеру, що файл CSS робочого столу завантажуватиметься під час доступу до нього через настільний пристрій.
Подібним чином мобільний CSS слід завантажувати, лише коли до нього звертаються через мобільні пристрої. Завантажуючи спеціальний CSS для певних пристроїв, ви можете зменшити ресурси, що блокують візуалізацію, і збільшити час завантаження вашого сайту.
#4. Відкладення некритичного CSS
На додаток до використання атрибута «media» для умовного CSS, спробуйте відкласти некритичний CSS. Для цього підходу вам потрібно насамперед завантажити основний 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. Ці плагіни відомі в WordPress і можуть швидко видалити ресурси, які блокують візуалізацію. Найприємніше те, що ви навіть можете покращити ефективність свого веб-сайту без будь-яких спеціальних знань.
#1. Загальний кеш W3
W3 Total Cache (W3TC) покращує взаємодію з користувачем веб-сайту WordPress. Він усуває ресурси, що блокують візуалізацію, і покращує пошукову оптимізацію, основні веб-показники тощо. Плагін використовує такі функції, як інтеграція мережі доставки вмісту, щоб реалізувати найкращі практики.
Щоб усунути ресурси, що блокують візуалізацію, інсталюйте та активуйте плагін W3 Total Cache і виконайте такі дії:
- Перейдіть до розділу «Продуктивність» на інформаційній панелі WordPress і натисніть «Загальні налаштування».
- Під заголовком «Зменшити» увімкніть «Зменшити» та виберіть «Вручну» як режим зменшення.
- Тепер натисніть Зберегти всі налаштування.
- Потім за допомогою Google PageSpeed Insights зберіть усі файли Javascript і CSS, які блокують візуалізацію.
- Потім повернемося до Performance > Minify.
- Тепер у розділі js спершу натисніть Увімкнути для налаштувань JS Minify. Потім у розділі «Операції в областях» виберіть «Неблокування», використовуючи тип «відкласти» для тегу «Before ».
- Тепер перейдіть до керування файлами JS, виберіть тему, яку ви активували, і натисніть кнопку «Додати сценарій». Тепер зберіть URL-адреси Javascript, які мають проблеми, проскановані Google PageSpeed Insights. Вставте URL-адреси в призначене поле, як показано на зображенні.
- Тепер прокрутіть трохи вниз до розділу CSS. Виберіть свою тему зі спадного меню в розділі керування файлами CSS і натисніть «Додати таблицю стилів». Тепер ви просто виконуєте попередній крок і скопіюйте та вставте URL-адреси, зібрані з PageSpeed Insight, які мають проблеми.
- Оскільки всі параметри налаштовано, натисніть кнопку «Зберегти параметри та очистити», щоб виконати.
#2. Оптимізація JCH
JCH Optimize покращує продуктивність веб-сайту WordPress, виміряну за допомогою статистики Google PageSpeed. Плагін покращує фарбування першого вмісту (FCP), малювання найбільшого вмісту (LCP), індекс швидкості (SI), сукупний зсув макета (CLS), час до інтерактивності (TTI) тощо.
Таким чином, загальний досвід користувача та продуктивність веб-сайту значно покращуються.
Після встановлення й активації JCH Optimize виконайте такі дії, щоб усунути ресурси, які блокують рендеринг:
- Перейдіть до Налаштування>JCH Optimize, прокрутіть трохи вниз і перейдіть до налаштувань Основних функцій.
- Увімкніть оптимізацію доставки CSS, щоб усунути блокування візуалізації CSS. Ця функція автоматично визначає основний CSS, необхідний для відображення вмісту у верхній частині сторінки на кожній веб-сторінці. Крім того, він вставляє його в розділ вмісту HTML кожної сторінки.
- Потім посилання попереднього завантаження використовується для асинхронного завантаження об’єднаних файлів CSS.
- Щоб видалити ресурси, які блокують відтворення Javascript, ви повинні включити атрибути async або defer до тегу