Техническое SEOОпубликовано30.04.2026

Render-Blocking Resources (Блокирующие рендеринг ресурсы)

Почему CSS и JavaScript в <head> замедляют отрисовку страницы и как устранить блокирующие ресурсы для улучшения Core Web Vitals.

На странице

Что блокирует рендеринг Как исправить CSS Как исправить JavaScript Как обнаружить блокирующие ресурсы

Кратко

Render-blocking resources — это файлы стилей и скриптов, которые браузер обязан загрузить и обработать до начала отрисовки страницы. Они напрямую увеличивают First Paint и Largest Contentful Paint.

Что блокирует рендеринг

Главные виновники — синхронные ресурсы в <head>:

Внешние таблицы стилей (<link rel="stylesheet">).
Синхронные скрипты (<script src="…"> без defer или async).
Вложенные @import в CSS.

Браузер приостанавливает построение страницы, пока не загрузит и не выполнит эти файлы, из-за чего пользователь видит белый экран дольше.

Как исправить CSS

Лучший способ — встроить критический CSS (стили для видимой области) в <style> и загрузить основной файл асинхронно:

HTML

<style>/* критический CSS */</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Медиа-запросы также помогают: файлы, предназначенные только для печати или больших экранов, не считаются блокирующими для основного рендера.

Как исправить JavaScript

Добавьте атрибут defer для скриптов, которые должны выполняться в порядке очереди после разбора HTML, или async для независимых (счётчики, аналитика). Пример:

HTML

<!-- defer – рекомендуется для большинства -->
<script src="app.js" defer></script>
<!-- async – для скриптов, не влияющих на DOM -->
<script src="analytics.js" async></script>

Как обнаружить блокирующие ресурсы

Запустите PageSpeed Insights или Lighthouse и посмотрите рекомендацию «Устраните ресурсы, блокирующие отрисовку». В Chrome DevTools на вкладке Network можно увидеть красные полосы в водопаде, указывающие на блокировку.

FAQ

Частые вопросы

Откройте Chrome DevTools → Network, посмотрите временную шкалу. Ресурсы, загруженные до начала отрисовки, отмечены красным или розовым в столбце Waterfall.

defer сохраняет порядок выполнения и ждёт разбора HTML; async выполняется сразу после загрузки, независимо от порядка. Для основного приложения используйте defer.

Это самый эффективный приём, но можно обойтись приоритетной загрузкой (preload) и отложенной загрузкой остальных стилей. Главное — чтобы видимая область стилизовалась мгновенно.

Да, через показатель Core Web Vitals, который является сигналом ранжирования. Устранение блокировок улучшает LCP и общую оценку Page Experience.

Прямые контакты

Обсудим ваш проект?

Расскажите о целях и сайте — предложу формат работы и следующий шаг.

pavlo.seo@proton.me @pavelbarushka LinkedIn