Render Blocking (ресурси, що блокують рендеринг) — це файли CSS і JavaScript, які браузер має завантажити й обробити перш ніж показати видимий контент сторінки. Поки такий ресурс не готовий, користувач бачить порожній екран — тому render-blocking-ресурси затримують перший показ контенту й погіршують швидкість завантаження.
Простими словами: уяви, що офіціант не винесе жодної страви, поки не будуть готові геть усі — навіть десерт. Так і браузер: доки не «з’їв» блокувальний скрипт, сторінку не малює.
Що таке render blocking і чому впливає на швидкість
Коли браузер будує сторінку, він читає HTML згори вниз. Наштовхнувшись на звичайний <script> чи підключення CSS у <head>, він зупиняє відмальовування, поки не завантажить і не виконає цей ресурс. Через це росте час до First Contentful Paint — моменту, коли користувач бачить перший контент. У метриках Core Web Vitals це одразу помітно.
Особливо болісно це на мобільних і повільному інтернеті: кілька важких блокувальних скриптів здатні відкласти показ сторінки на секунди. А кожна зайва секунда очікування — це відсотки втраченої конверсії, тому боротьба з render-blocking-ресурсами — стандартна частина оптимізації швидкості.
Як прибрати блокування (приклад коду)
Блокує рендеринг:
<script src="app.js"></script>
Не блокує — відкласти виконання:
<script src="app.js" defer></script>
<script src="analytics.js" async></script>Ключові прийоми: додавати defer або async до скриптів, виносити критичний CSS інлайном, а другорядні стилі підвантажувати пізніше, прибирати невикористаний код. Мета — щоб браузер намалював перший екран, не чекаючи на все підряд.
Приклад
Сторінка підключає у <head> велику JS-бібліотеку слайдера, який видно лише внизу. Браузер чесно чекає її завантаження, і перший екран з’являється на 2–3 секунди пізніше. Додаємо цьому скрипту defer — і контент показується одразу, а слайдер довантажується тихо у фоні.
Часто плутають з…
- Critical Rendering Path — це весь шлях від коду до пікселів на екрані; render blocking — лише ресурси, що цей шлях гальмують.
- Повільний сервер (TTFB) — тут затримка ще до завантаження ресурсів; render blocking стосується вже отриманих CSS/JS.
Питання та відповіді
Які ресурси блокують рендеринг?
Насамперед CSS у <head> та звичайні (без async/defer) JavaScript-файли. Браузер зупиняє показ сторінки, поки їх не завантажить і не обробить.
Як прибрати render-blocking ресурси?
Додати скриптам defer або async, інлайнити критичний CSS, відкладати другорядні стилі й видаляти невикористаний код — так браузер швидше малює перший екран.
Чи впливає це на позиції в Google?
Побічно так: render blocking погіршує швидкість завантаження й Core Web Vitals, а швидкість — підтверджений фактор ранжування та зручності.
Сайт довго показує перший екран? Приберемо блокувальні ресурси — виправлення помилок на сайті та технічний SEO-аудит.
Схожі терміни: Critical Rendering Path, Швидкість завантаження, Core Web Vitals, Rendering.
