Критический CSS и рендер-блокировка
Бывает, что файлы сайта уже сжаты и облегчены, а страница всё равно показывается с задержкой — секунду висит белый экран. Чаще всего виновата рендер-блокировка: браузер не рисует страницу, пока не загрузит все стили и часть скриптов. Критический CSS — приём, который убирает эту задержку. Разберём, как он работает.
Что такое рендер-блокировка
Чтобы нарисовать страницу, браузеру нужны стили — иначе он покажет «голый» неоформленный текст, который тут же перерисуется. Поэтому по умолчанию браузер ждёт: сначала качает весь файл CSS, разбирает его, и только потом рисует. Пока CSS грузится — пользователь видит пустоту. То же с обычными скриптами в начале страницы: они тоже останавливают отрисовку. Это и есть рендер-блокировка — ресурсы, которые задерживают первое появление содержимого.
Идея критического CSS
Хитрость в том, что для показа первого экрана нужна лишь небольшая часть всех стилей — те, что оформляют шапку и видимый блок. Остальное (стили подвала, форм внизу, всплывающих окон) на старте не требуется. Критический CSS — это как раз стили первого экрана, которые встраивают прямо в код страницы, чтобы браузер нарисовал её сразу, не дожидаясь загрузки внешнего файла. А полный CSS подгружают следом, не блокируя отрисовку.
<style> /* стили первого экрана */ </style>
<!-- полный CSS грузится, не блокируя показ -->
<link rel="preload" as="style" href="full.css">
В итоге страница появляется почти мгновенно с правильным оформлением сверху, а остальные стили «доезжают» незаметно.
А что со скриптами
Скрипты блокируют отрисовку так же, как стили. Чтобы они не мешали, к ним добавляют атрибуты defer или async — тогда скрипт грузится, не останавливая показ страницы, и выполняется позже. Тяжёлый JavaScript — одна из главных причин медленной первой отрисовки, и перенос его «вниз» через defer обычно даёт заметный прирост.
Как это сделать
Вручную выделять критический CSS трудоёмко, поэтому обычно используют автоматические инструменты и плагины оптимизации (на популярных CMS это часто галочка «оптимизировать загрузку CSS» / «устранить рендер-блокировку»). Они сами находят стили первого экрана, встраивают их и откладывают остальное. Это та оптимизация, которую PageSpeed прямо просит фразой «устраните ресурсы, блокирующие отображение».
Коротко
Рендер-блокировка — это когда браузер не показывает страницу, пока не загрузит все стили и блокирующие скрипты, и пользователь видит белый экран. Критический CSS убирает задержку: стили первого экрана встраивают прямо в код, чтобы страница отрисовалась сразу, а полный CSS и скрипты грузят следом, не блокируя показ (скрипты — через defer/async). Главное — выносить в код только критичные стили, а не весь CSS. Делается это обычно автоматическими инструментами и плагинами оптимизации.