Render-blocking и HTTP/2

HTTP/2 позволяет эффективнее доставлять несколько файлов, но не отменяет порядок работы браузера. Пока критический CSS или синхронный JavaScript в head не обработан, пользователь может видеть пустой экран. Поэтому сначала найдите конкретные блокирующие ресурсы, а не включайте протокол как «ускоритель всего».

ПодходКогда уместен
deferСкрипты приложения, важен порядок
asyncНезависимая аналитика
critical CSSНебольшие стили первого экрана
HTTP/2Современная доставка ресурсов
<link rel="stylesheet" href="/assets/site.css">
<script defer src="/assets/app.js"></script>
<script async src="https://analytics.example/tag.js"></script>

defer скачивает скрипт параллельно и выполняет его после разбора HTML в порядке подключения. async подходит только независимому коду: он может выполниться в любой момент. Не переносите критическую логику в async только ради оценки аудита.

Короткий critical CSS полезен, если он действительно покрывает первый экран; копия всего stylesheet в HTML увеличит вес и усложнит кэширование. HTTP/2 почти не является самостоятельным SEO-фактором: его ценность — в более удобной доставке файлов при нормальном сервере.

Найдите источники в проверке render-blocking, проверьте протокол через HTTP/2 и сравните изменения в бесплатной проверке.

Вопросы и ответы

HTTP/2 сам исправит белый экран?

Нет. Он не делает тяжёлый синхронный JavaScript неблокирующим и не уменьшает CSS. Сначала посмотрите waterfall и покрытие ресурсов, затем уберите лишнее, назначьте defer или разделите код по страницам.

Всегда ли нужно ставить defer?

Для обычных скриптов приложения defer часто безопасен, но проверьте порядок зависимостей и inline-код, который ждёт библиотеку раньше. Аналитику и независимые пиксели можно подключать async, если они не управляют интерфейсом.

Critical CSS обязателен?

Нет. На маленьком сайте выигрыш может быть меньше, чем цена поддержки двух версий стилей. Сначала сожмите изображения, удалите неиспользуемые стили и сторонние виджеты, затем измерьте необходимость critical CSS.

HTTP/3 нужно включать вместо HTTP/2?

HTTP/3 может быть полезным дополнением, но не повод откладывать базовые исправления. Наличие протокола не заменяет быстрый серверный ответ, разумный вес страницы и отсутствие блокирующих ресурсов.