Спершу визначте файли та їхнє призначення
Ресурс, що блокує відображення, — це файл, на який браузер чекає перед показом початкової сторінки. Часто йдеться про CSS, що визначає вигляд, і JavaScript, що відповідає за поведінку. Якщо у звіті зазначено одинадцять скриптів, сама ця кількість не підказує, який видаляти або скільки часу можна заощадити. Спершу визначте конкретні файли.
Відкрийте потрібну сторінку в Chrome, потім DevTools і вкладку Performance. Натисніть Record and reload, щоб записати завантаження. У розділі Insights розгорніть Render-blocking requests. Скопіюйте адреси наведених файлів і з’ясуйте, яка функція чи плагін завантажує кожен із них. Якщо DevTools для вас незнайомий, попросіть про це розробника сайту. Передайте адресу сторінки й назву перевірки, щоб він дослідив саме ту проблему.
Джерела: Chrome for Developers · Render-blocking requests · Chrome DevTools · Performance reference
З’ясуйте, що має завантажуватися одразу
CSS для оформлення першого екрана може бути потрібен відразу. Віджет нижче на сторінці, можливо, може зачекати. Усе залежить від побудови сайту. Відкладення файлів, потрібних меню, формам звернення чи оплаті, може порушити їхню роботу. У WordPress перевірте налаштування вже встановленого плагіна швидкодії та випробовуйте по одній зміні на тестовій копії.
Для розробника, який редагує код, атрибут defer може підійти для зовнішнього класичного скрипту після перевірки залежностей. Назва файлу нижче вигадана для прикладу. Передбачається, що скрипт не потрібен для першого екрана або коду, який виконується відразу після нього. Це не універсальна зміна для вбудованих чи модульних скриптів, а до CSS атрибут defer не застосовується.
До зміни
<script src="/assets/program-inquiry.js"></script>Після зміни
<script src="/assets/program-inquiry.js" defer></script>Джерела: Chrome for Developers · Render-blocking requests · MDN · The script element
Перевірте сайт і повторіть вимірювання
Збережіть початкове налаштування та запис. Після зміни кілька разів виміряйте ту саму сторінку за однакових умов пристрою й мережі. Простежте за появою першого екрана, відкрийте меню та пройдіть форму звернення до етапу надсилання, не відправляючи справжній запит. Перевірте також мобільний розмір екрана. Якщо щось зламалося, поверніть попереднє налаштування та дослідіть відповідний файл окремо.
Передаючи завдання розробнику, попросіть пояснити, якій функції належить файл, чи можна змінити момент його завантаження та що показують записи до й після зміни й функціональні перевірки. Так ви отримаєте конкретний результат для оцінки. Корисну зміну можна пояснити та перевірити. Локальний запис DevTools і Core Web Vitals реальних відвідувачів — різні набори даних; враховуйте це під час оцінювання.