Як усунути ресурси, що блокують візуалізацію, у WordPress (дуже просто)
Ресурси, що блокують візуалізацію, можуть завдати великого болю блогерам. Google постійно попереджає про їх усунення. Є багато способів їх видалити, але ось дуже простий спосіб, який не вимагає кодування.
Дуже важливо мати швидкий блог або веб-сайт. Це важливо, якщо ви хочете отримати високий рейтинг у пошукових системах. Якщо ваш сайт дуже повільний, це точно зашкодить вашому SEO.
Крім того, повільний веб-сайт може призвести до високого показника відмов, що технічно негативно позначиться на вашому бренді. Повільний веб-сайт може вплинути на дохід і конверсію.
Більшість користувачів нетерплячі, якщо ваш сайт завантажується занадто довго, вони покинуть його та перейдуть до швидшої альтернативи. Це означає, що потенційний клієнт або прискорювач доходу зник.
Якщо ви намагаєтеся пришвидшити свій веб-сайт і використовуєте такий інструмент тестування, як Google PageSpeed Insight, одне попередження, яке ви можете отримати, це усунути ресурси, які блокують візуалізацію.
У цій статті ви дізнаєтесь, як легко усунути ресурси, які блокують рендеринг.
Що таке ресурси, що блокують візуалізацію?
Ресурси, які блокують візуалізацію, — це CSS і JavaScript, які уповільнюють час завантаження веб-сайту, оскільки веб-переглядач має завантажити його, перш ніж вміст сторінки зможе відобразити.
Коли відвідувач намагається отримати доступ до веб-сайту, браузер негайно починає читати веб-сайт зверху вниз. Якщо є CSS або JavaScript, браузер припинить читання, доки не завантажить і не обробить файли. Перш ніж браузер зможе відобразити вміст у верхній частині сторінки, він має завантажити файли CSS або JavaScript.
Плагіни або теми, які ви встановлюєте, можуть додати деякі з цих CSS і JS. Деякі не потрібно завантажувати спочатку, їх можна завантажити пізніше. Але оскільки вони там у верхній частині, вони сповільнюють ваш веб-сайт.
Тож під «усуненням ресурсів, які блокують візуалізацію» Google має на увазі те, що ви видаляєте непотрібні ресурси з верхньої частини веб-сайту, оскільки це сповільнює завантаження вмісту веб-сайту.
Як знайти ресурси, що блокують візуалізацію
Перш ніж ви зможете вирішити проблему блокування візуалізації, вам потрібно знати, звідки вона походить. Ви можете дізнатися, які ресурси блокують рендеринг, запустивши тест Google PageSpeed Insight or Web.Measure.
Ви можете виконати наведені нижче кроки, щоб знайти ресурси блокування візуалізації:
1 Відвідайте Google PageSpeed Insight
2. Введіть адресу веб-сайту та натисніть «Аналізувати».
3. Прокрутіть униз і знайдіть попередження щодо видалення ресурсів, що блокують рендеринг.
Перевірте його як на мобільному пристрої, так і на комп’ютері.
Для BloggingTools, у нас немає проблем із блокуванням візуалізації для комп’ютерів, але є для мобільних пристроїв. Тому для цього ми будемо використовувати Mobile, як ви бачите нижче.
Для мобільних пристроїв, як ви бачите вище, у нас є 2 проблеми з блокуванням візуалізації. З оцінкою 93. Оцінка була вищою, але заради цієї публікації мені довелося деактивувати плагін Autoptimize.
BloggingTools.org досяг цього результату без оптимізації, оскільки ми використовуємо дуже швидку та легку тему під назвою GeneratePress. Ми також розміщуємо на дуже швидкому веб-хостингу, відомому як Cloudways.
Примітка:: Ви не повинні бути одержимі отриманням 100 балів PageSpeed insight. Це лише орієнтир. Зазвичай середній бал від 65 до 80 підходить для більшості людей. Не видаляйте файли, важливі для вашого бізнесу.
Хороша річ WordPress полягає в тому, що вам не потрібно робити все вручну. Є кілька добре закодованих плагінів, які допоможуть.
Як вирішити проблему ресурсів, що блокують рендеринг, у WordPress
Виконайте наведені нижче дії, щоб усунути проблему з ресурсами, що блокують відтворення:
1. Встановіть і активуйте Autoptimize
Існує багато плагінів WordPress, які можуть це зробити, наприклад, W3 Total Cache, WP Rocket тощо. Але з мого досвіду роботи з багатьма вебсайтами, Autoptimize завжди справляється з цим набагато краще, ніж будь-який з них. Чудово те, що Autoptimize сумісний майже з усіма плагінами кешування WordPress, і він безкоштовний.
Перейдіть до каталогу плагінів WordPress встановити та активувати Autoptimize
2. Відвідайте налаштування автооптимізації
Якщо вам знадобиться де знайти параметри автооптимізації, на інформаційній панелі WordPress натисніть на налаштування, а потім натисніть на автооптимізацію.
3. Оптимізуйте JavaScript
У параметрах JavaScript виберіть оптимізувати код сценарію, а також виберіть сукупні JS-файли. Ви можете знайти налаштування, які я використовую для BloggingTools, нижче.
4. Оптимізуйте CSS
У параметрах «Оптимізувати CSS» виберіть «Оптимізувати код CSS». Також виберіть агреговані CSS-файли та «Також агрегувати вбудований CSS». Перегляньте параметри, які я використовую для BloggingTools, нижче.
5. Оптимізуйте HTML
Якщо вам потрібна краща продуктивність, ви також можете використовувати Autoptimize для оптимізації HTML. У розділі Параметри HTML виберіть оптимізувати HTML-код. Ви можете побачити налаштування, які я використовую для BloggingTools, нижче.
6. Перевірте Різні параметри
Ви можете перевірити «Різні параметри» та налаштувати деякі параметри, якщо це вам підходить. Ви можете знайти налаштування для BloggingTools нижче.
7. Збережіть і очистіть кеш.
Далі просто натисніть «Зберегти» та очистіть кеш. Це все!
Після всього цього ви можете знову перевірити свій сайт на Google PageSpeed Insight. Для BloggingTools одразу після цього наша оцінка підскочила до 95 і всі попередження про видалення ресурсів, які блокують рендеринг, повністю зникли. Дивіться нижче.
Зауважте, що залежно від того, скільки у вас ресурсів, які блокують візуалізацію, і наскільки вони важливі для вашого сайту, деякі з них можуть залишитися. Не намагайтеся їх видалити.
Якщо ви хочете додатково усунути, ви можете використовувати Асинхронний JavaScript, плагін того ж автора, що й Autoptimize. Вони працюють разом. Я не рекомендую цього, оскільки це може зламати ваш сайт. Тільки автооптимізація — це добре!
Висновок
Швидкість важлива, і виключення ресурсів, які блокують візуалізацію, може допомогти вашому веб-сайту завантажуватися швидше та підвищити оцінку вашого сайту в інструментах тестування швидкості. Але ви ніколи не повинні бути одержимі цими балами, оскільки вони існують лише для того, щоб керувати.
Якщо після цього ваш веб-сайт усе ще працює дуже повільно. Три найімовірніші проблеми можуть полягати в тому, що ваша тема чи ваш веб-хост несправні, або у вас встановлено погані плагіни. рекомендую Кудвейс як найкращий веб-хост і GeneratePress як найкраща тема. Якщо ви новачок, Bluehost може впоратися, але якщо ви можете собі це дозволити, Cloudways є найкращим. Ви можете почати безкоштовно. Я використовую GeneratePress і Coudways для TargetTrend
Читайте також:
Як зробити WordPress дуже швидким
Статті по темі
