Вопрос проверяет знание подходов к оптимизации рендеринга и ускорению первого отображения страницы.
Critical CSS — это минимальный набор стилей для первого экрана.
Он встраивается прямо в HTML.
Это позволяет браузеру быстрее начать рендер.
Остальные стили загружаются асинхронно.
Critical CSS используется для ускорения отображения контента, который пользователь видит сразу после загрузки страницы.
Critical CSS — это стили, необходимые для отображения контента above the fold.
Подход обычно выглядит так:
Определяется контент первого экрана
Выделяются необходимые стили
Эти стили встраиваются в <style> внутри <head>
Остальной CSS загружается асинхронно
<head>
<style>
/* Critical CSS */
body { margin: 0; }
.header { height: 60px; }
</style>
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
</head>
Быстрее First Contentful Paint
Меньше render-blocking
Лучшие показатели производительности
Усложняет сборку
Требует автоматизации
Не всегда оправдан для маленьких проектов
Critical CSS — эффективный инструмент оптимизации загрузки. Он особенно полезен для публичных страниц, где важна скорость первого рендера.