Определение
Критический CSS - минимальное подмножество таблицы стилей сайта, нужное для рендеринга контента, видимого в viewport при первой загрузке - стили для шапки, hero-области, первого блока текста. Инлайнинг этого небольшого количества CSS прямо в head страницы позволяет браузеру отрендерить верх страницы немедленно, тогда как полная таблица стилей грузится асинхронно и применяется к остальному.
Это стандартная техника для убирания блокирующего рендеринг CSS и улучшения первой отрисовки и Largest Contentful Paint.
Критический CSS обычно генерируется на шаблон инструментом, который загружает страницу и извлекает правила, фактически используемые выше сгиба. Его надо регенерировать при изменении дизайна и держать малым - инлайнинг слишком многого сводит на нет цель, раздувая HTML.
В контексте
Для iGaming-аффилиата критический CSS - одно из более эффективных исправлений блокировки рендеринга, потому что эти сайты часто ведут тему с большой таблицей стилей, и инлайнинг только правил выше сгиба может срезать заметное количество с первой отрисовки и LCP по всему сайту. Он наиболее стоит того на самых высокотрафиковых шаблонах - странице обзора, странице сравнения, странице термина глоссария, главной.
Практические моменты: генерируй критический CSS на шаблон (шапка может быть общей, но контент выше сгиба различается), держи его малым (несколько килобайт, а не всю таблицу стилей), грузи полный CSS асинхронно и неблокирующе после него и регенерируй при изменении дизайна или шаблона, чтобы инлайнированные правила оставались точными - устаревший критический CSS вызывает вспышку нестилизованного или неправильно стилизованного контента. Он в паре с откладыванием неессенциального JavaScript и оптимизацией LCP-изображения как стандартная чистка пути рендеринга.
Для большого глоссария с одним последовательным шаблоном страницы термина генерация критического CSS один раз для этого шаблона покрывает сотни страниц. Для обращенного к аффилиатам контента рамка в том, что критический CSS - минимальная таблица стилей выше сгиба, инлайнированная в head, чтобы браузер мог отрендерить верх страницы, не ожидая полный CSS, что это стандартное исправление для блокирующего рендеринг CSS, которое улучшает первую отрисовку и LCP, что его следует генерировать на шаблон и держать малым и что его надо регенерировать при изменении дизайна.
Разобранный пример
Аффилиат генерирует критический CSS для своих четырех самых высокотрафиковых шаблонов и инлайнит каждый в head страницы, загружая полную таблицу стилей 250КБ асинхронно после. Первая отрисовка улучшается по всему сайту, а LCP падает на несколько сотен миллисекунд на шаблонах обзора и глоссария.
Конвейер сборки регенерирует критический CSS всякий раз, когда меняется тема.
Связанные термины
Частые вопросы
Смотрите остальные iGaming-термины в нашем глоссарии.
← Назад к глоссарию