Критический CSS и блокировка отрисовки
Встраивайте критический CSS верхней части страницы непосредственно в документ, а некритические стили откладывайте, чтобы устранить блокировку отрисовки.
«Критический CSS и блокировка отрисовки» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Как браузер выполняет отрисовку
Браузер разбирает HTML в DOM, CSS — в CSSOM, объединяет их в дерево отрисовки, выполняет компоновку, а затем отрисовывает результат. CSS блокирует отрисовку до завершения CSSOM — каждый байт CSS на критическом пути откладывает первую отрисовку.
Что такое критический CSS
Критический CSS — минимальный набор стилей, необходимый для отрисовки содержимого, видимого без прокрутки. Встраивание этого набора в теги <style> внутри <head> устраняет запрос к таблице стилей, блокирующий отрисовку, при первоначальном отображении.
Ресурсы, блокирующие отрисовку
Любой <link rel="stylesheet"> в заголовке документа блокирует отрисовку. Скрипты без async/defer также блокируют разбор HTML. Сокращение ресурсов, блокирующих отрисовку, напрямую улучшает показатель наибольшей отрисовки содержимого (LCP) и показатель первой отрисовки содержимого (FCP).
Извлечение критического CSS
Инструменты вроде critical (npm), Penthouse и средств извлечения на основе Puppeteer отображают страницу при заданных размерах области просмотра и собирают стили, применимые к видимым элементам. Результат встраивается в страницу, а полная таблица стилей загружается асинхронно.
Асинхронная загрузка некритического CSS
Загружайте полную таблицу стилей без блокировки с помощью media="print" и замены значения при загрузке либо используйте сочетание rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Медиазапросы как подсказки для загрузки
Файлы CSS, загружаемые с несовпадающим медиазапросом, например media="print", скачиваются с низким приоритетом и не блокируют отрисовку. Это классический приём загрузки таблиц стилей без блокировки критического пути.
HTTP/2 и разделение CSS
При мультиплексировании HTTP/2 разделение CSS на множество небольших файлов создаёт меньше накладных расходов, чем в HTTP/1. Загружайте только CSS, необходимый для каждого маршрута, — home.css и checkout.css, — а не один монолитный пакет со стилями для всех страниц.
CSS и Scanner предварительной загрузки
Сканер предварительной загрузки браузера рано обнаруживает теги таблиц стилей <link> и начинает скачивать их ещё до того, как до них доходит HTML-разборщик. Размещайте таблицы стилей в <head>, а не в теле документа, чтобы сканер предварительной загрузки находил их как можно раньше.
Измерение влияния блокировки отрисовки
Панель сети в Chrome DevTools показывает время блокировки ресурсов на водопадной диаграмме. Lighthouse сообщает «Устраните ресурсы, блокирующие отрисовку», указывая экономию для каждого ресурса. WebPageTest показывает renderBlockingResources в режиме киноленты.
Критический CSS на стороне сервера
Фреймворки вроде Next.js и Astro автоматически встраивают критический CSS во время SSR. Сервер определяет, какие стили применяются к исходному HTML, и встраивает их — отдельный этап извлечения на стороне клиента не требуется.
Практические компромиссы
Чрезмерное встраивание CSS увеличивает размер HTML, замедляет TTFB и снижает эффективность кэширования (HTML кэшируется не так долго, как файлы CSS). Стремитесь к размеру встроенного критического CSS не более 14 КБ, чтобы он помещался в первое окно перегрузки TCP.
Проверка знаний
Почему таблица стилей, блокирующая отрисовку, задерживает первую отрисовку содержимого?
Итоги
Критический CSS встраивает стили содержимого, видимого без прокрутки, устраняя задержки из-за блокировки отрисовки. Загружайте оставшийся CSS асинхронно с помощью предварительной загрузки или приёмов с медиазапросами. Измеряйте влияние с помощью Lighthouse и DevTools и стремитесь к размеру критического CSS менее 14 КБ для оптимальной производительности.
Часто задаваемые вопросы
Урок «Критический CSS и блокировка отрисовки» бесплатный?
Да — полный текст урока «Критический CSS и блокировка отрисовки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Критический CSS и блокировка отрисовки»?
Встраивайте критический CSS верхней части страницы непосредственно в документ, а некритические стили откладывайте, чтобы устранить блокировку отрисовки. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Критический CSS и блокировка отрисовки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Критический CSS и блокировка отрисовки
- Компоновка, рисование и композиция: конвейер отрисовки
- will-change и продвижение на слои
- Покрытие CSS и неиспользуемые стили