Візуалізаційно-блокувальні ресурси – це одна з найпоширеніших причин повільного завантаження вебсайтів. А якщо ваш вебсайт недостатньо швидкий, ви псуєте не тільки досвід своїх користувачів, але й своє ранжування в пошукових системах. Погані новини: якщо ваш вебсайт повільний, то ви втрачаєте клієнтів і дохід.
Цей допис – переклад допису Бренди Стоукс Беррон для англомовного вебжурналу SpeckyBoy Design Magazine за 2018 рік. Посилання на оригінал – у кінці. Приємного прочитання.
Проте є й добрі новини: ви можете покращити швидкість свого вебсайту, усунувши візуалізаційно-блокувальні ресурси. У цій статті ми пояснимо, як візуалізаційно-блокувальні ресурси впливають на час завантаження вашого вебсайту, і покажемо, як їх виправити.
Що таке візуалізаційно-блокувальні ресурси?
Найпоширеніші візуалізаційно-блокувальні ресурси – це файли JavaScript і CSS, які розташовані в <head> вашої вебсторінки. Вони завантажуються вище згину (тобто в область, яку ви зазвичай бачите на вебсайті до того, як прокрутите вниз, щоб побачити решту вмісту) і є частиною критичного шляху візуалізації, який використовується веббраузером.
Якщо по-простому, то це означає, що для того, аби браузер правильно показав (візуалізував) початковий вигляд будь-якої вебсторінки, повинні відбутися певні речі. Ось приклад того, як працює базовий шлях візуалізації:
Браузер завантажує вебсторінку, що складається з файлу HTML, який містить структуру цієї вебсторінки
Потім браузер читає HTML і помічає 3 додаткові файли: файл CSS, файл JavaScript і зображення
Браузер спершу завантажить зображення
Потім браузер усвідомлює, що не може продовжувати відображати сторінку, не взявши CSS і JavaScript
Браузер завантажує файл CSS і читає його, щоб переконатися, що нічого іншого не викликається
Браузер завантажує файл JavaScript і читає його, щоб переконатися, що нічого іншого не викликається
Браузер нарешті може показати вебсторінку
Поки браузер зайнятий завантаженням і прочитанням кожного з файлів CSS і JavaScript, ваші відвідувачі дивляться на порожній екран, чекаючи завантаження вашого вебсайту. Якщо ви використовуєте CMS, таку як WordPress, ваш браузер може бути зайнятий досить довго, оскільки він повинен завантажити не тільки файли стилю і сценаріїв вашої теми, але й файли стилю і сценаріїв, які поставляються з WordPress, а також ті, які поставляються з усіма плагінами та віджетами, які ви використовуєте.
Коли доходить до оптимізації швидкості вебсайту, першою задачею в списку повинно бути зменшення часу, необхідного для того, щоб ваші користувачі могли переглядати та взаємодіяти з вашим вмістом. Найпростіший спосіб цього досягти – це оптимізувати критичний шлях візуалізації.
Як виправити проблеми з блокуванням візуалізації
Тепер, коли ви знаєте, що спричиняє проблеми з блокуванням візуалізації і як вони впливають на швидкість вебсайту, поговорімо про те, як виправити ці проблеми.
Візуалізаційно-блокувальний CSS
Є три способи розв'язання проблем візуалізаційно-блокувального CSS:
Правильний виклик файлів CSS: файл CSS повинен бути під'єднаний до файлу HTML отак – <link rel="style.css" href="style.css">, а не використовуючи метод @import. Метод @import зазвичай буває біля верху звичайного списку стилів і змушує браузер повернутися і знайти імпортований файл, перш ніж той зможе прочитати решту файлу CSS, і призводить до ще більшої затримки при візуалізації вебсторінки
Зменшити число файлів CSS у критичному шляху: якщо це можливо, об'єднайте всі файли CSS в один і видаліть виклик цих файлів з вашого HTML
Візуалізаційно-блокувальний JavaScript
Щоб прибрати візуалізаційно-блокувальний JavaScript, потрібно знати, скільки файлів JavaScript завантажується і де вони викликаються в вашому HTML. Хорошим способом дізнатися це є використання інструменту Google PageSpeed Insights. Коли австралійська компанія з прибирання, This Is Neat Cleaning, розробляла свій вебсайт, вони використовували Google PageSpeed Insights як еталонну перевірку, тестуючи різні сценарії, щоб дізнатися, що саме їм потрібно для мобільних та настільних пристроїв.
З тестування було зрозуміло, що вставляння більшості сценаріїв унизу файлів HTML дає найкращі результати. Основна причина полягає в тому, що переміщення сценаріїв униз сторінки не дає візуалізаційно-блокувальному JavaScript затримувати користувацький досвід. З критичним CSS, який все ще завантажується вище згину, користувач все ще може по суті використовувати сайт, тоді як взаємодії та функціональність ще завантажуються в фоновому режимі.
Застосування втулки
Я вирішив не перекладати цей розділ, оскільки він має доволі вузьке застосування, до того ж вміщає конкретні інструкції, які вже безнадійно застаріли – перекладач.
Прикінцеві думки
Візуалізаційно-блокувальні ресурси можуть творити біду, коли мова йде про швидкість вебсайту. На щастя, є кілька способів виправити ці проблеми, тому використовуйте надані тут поради, щоб покращити швидкість вашого вебсайту і забезпечити найкращий можливий досвід користувачів.
Переклад виконано для посилання зі сторінки “Візуалізаційно-блокувальне” глосарію WebDoky, українського проєкту перекладу MDN Web Docs українською. Оригінал статті на вебжурналі SpeckyBoy Design Magazine:
