Critical CSS

Материал из Энциклопедия интернет-маркетинга MarketWiki

Critical CSS (критический CSS) - это техника оптимизации веб-страниц, при которой стили, необходимые для отображения видимой части страницы (above the fold), извлекаются из основного CSS-файла и встраиваются непосредственно в HTML-код страницы. Остальные стили (для невидимого контента) загружаются асинхронно, без блокировки рендеринга.

Для маркетолога и владельца бизнеса Critical CSS является одним из наиболее эффективных способов улучшить метрику LCP (Largest Contentful Paint) и общее восприятие скорости загрузки сайта. Поскольку CSS традиционно блокирует рендеринг (браузер не может отобразить страницу, пока не загрузит и не обработает все CSS-файлы), оптимизация критических стилей позволяет показать пользователю содержимое страницы в разы быстрее.

Значение для маркетолога

[править]

Понимание Critical CSS позволяет маркетологу:

  • Обосновывать технические задачи разработчикам - улучшение LCP напрямую влияет на SEO и конверсию
  • Контролировать Core Web Vitals - отслеживать динамику FCP и LCP после оптимизации
  • Понимать причины падения позиций в поиске - медленная загрузка страниц может быть связана с блокировкой рендеринга CSS
  • Участвовать в приёмке работ - проверять, что сайт отображается быстро на разных устройствах
  • Взаимодействовать с разработчиками - знать базовые понятия (above the fold, render-blocking resources)

Проблема CSS-блокировки рендеринга

[править]

Когда браузер загружает HTML-страницу и встречает ссылку на внешний CSS-файл (например, `<link rel="stylesheet" href="styles.css">`), он приостанавливает отрисовку страницы до полной загрузки и обработки этого файла. Это необходимо, чтобы пользователь не видел страницу без стилей.

Проблемы традиционного подхода

[править]
Проблемы традиционного подхода к CSS
Проблема Описание
Задержка рендеринга Браузер ждёт загрузки всех CSS-файлов, даже если 70-80% стилей относятся к невидимой части страницы
Увеличение LCP Основной контент отображается с задержкой, ухудшая метрику Largest Contentful Paint
Избыточный трафик Загружается весь CSS, даже если нужна только его часть
Визуальный эффект Пользователь видит пустой экран или нестилизованный контент дольше необходимого

Аналогия: чтение книги, в которой требуется сначала изучить все сноски в конце, прежде чем откроется первая страница. Critical CSS позволяет загрузить первую страницу сразу, а сноски подгрузить позже.

Как работает Critical CSS

[править]

Процесс применения Critical CSS можно описать следующими этапами:

  1. Определение видимой области (above the fold) - определяется, какая часть страницы видна пользователю при загрузке (без скроллинга). Для разных устройств (десктоп, планшет, мобильный) эта область может различаться
  2. Извлечение критических стилей - из всех CSS-файлов выделяются только те правила, которые применяются к элементам в видимой области
  3. Встраивание критического CSS - полученные стили встраиваются непосредственно в HTML-код страницы внутри тега `<style>` в секции `<head>`
  4. Асинхронная загрузка основного CSS - полный CSS-файл загружается асинхронно (с помощью атрибута `media="print"` или JavaScript), не блокируя рендеринг
<head>
  <!-- Встроенные критические стили -->
  <style>
    /* Здесь стили только для видимой части страницы */
    .header { background: #fff; }
    .hero { font-size: 2rem; }
  </style>

  <!-- Основной CSS загружается асинхронно -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Результаты оптимизации

[править]

Использование Critical CSS даёт значительные улучшения показателей производительности:

Результаты оптимизации
Метрика До оптимизации После оптимизации
First Contentful Paint (FCP) 2.5-3.5 сек 0.8-1.2 сек
Largest Contentful Paint (LCP) 4.5-6 сек 1.5-2.5 сек
Время до интерактивности 5-7 сек 2-3 сек

Ключевое улучшение - пользователь видит содержимое страницы практически сразу, даже если полный CSS ещё не загружен.

Инструменты для генерации Critical CSS

[править]
Инструменты для генерации Critical CSS
Инструмент Тип Описание
Critical npm-пакет Самый популярный инструмент от Google, встраивается в процесс сборки
Penthouse npm-пакет Генерирует критический CSS для сложных одностраничных приложений
PurifyCSS npm-пакет Удаляет неиспользуемый CSS, помогает определить критический минимум
Chrome DevTools Coverage Браузерный инструмент Показывает, какой CSS не используется при загрузке страницы
Webpack plugin (CriticalCSSWebpackPlugin) Плагин Автоматическая генерация при сборке

Пример использования Chrome DevTools для анализа CSS

[править]

В Chrome DevTools есть вкладка Coverage, которая показывает, какой процент CSS-кода фактически используется на странице:

  1. Открыть DevTools (F12)
  2. Нажать Ctrl+Shift+P (Cmd+Shift+P) и ввести «Show Coverage»
  3. Нажать кнопку записи (⏺) и обновить страницу
  4. Анализировать: зелёным выделен используемый CSS, красным - неиспользуемый

Часто оказывается, что 70-80% CSS-кода не используется при загрузке страницы - это идеальный кандидат для выноса из критической части.

Автоматизация в сборке

[править]

Для продакшн-сайтов критический CSS обычно генерируется автоматически на этапе сборки: 

// Пример конфигурации для Webpack с плагином CriticalCSS
const CriticalCssPlugin = require('critical-css-webpack-plugin');

module.exports = {
  plugins: [
    new CriticalCssPlugin({
      base: 'dist/',
      src: 'index.html',
      target: 'index-critical.html',
      width: 1300,
      height: 900,
      inline: true,
      extract: false
    })
  ]
};

Для сайтов на CMS (WordPress, Tilda, 1С-Битрикс) существуют плагины и расширения, автоматизирующие процесс:

Инструменты для CMS
Платформа Инструменты
WordPress Autoptimize, WP Rocket, Flying Pages
Tilda Встроенная оптимизация CSS (опция «Сжимать CSS»)
1С-Битрикс Композитный сайт, HTML-кэширование с критическим CSS

Ограничения и особенности

[править]
Ограничения Critical CSS
Аспект Важно учитывать
Адаптивный дизайн Критический CSS нужно генерировать отдельно для десктопа и мобильных устройств, так как above the fold различается
Динамический контент Для сайтов с динамически подгружаемым контентом (JavaScript-рендеринг) критический CSS может не покрыть весь первоначальный рендеринг
Сложность поддержки При изменении дизайна критический CSS нужно перегенерировать
Размер встроенного CSS Google рекомендует встраивать не более 14 КБ сжатого CSS (50 КБ несжатого) - это ограничение связано с тем, что браузер не кэширует встроенный CSS

Связь с другими техниками оптимизации

[править]

Critical CSS часто используется в комбинации с другими методами оптимизации:

Взаимодействие с другими техниками
Техника Взаимодействие
Code Splitting Разделение кода помогает загружать только необходимые скрипты
Lazy loading Отложенная загрузка изображений и других ресурсов
Minification Сжатие CSS и JS уменьшает размер файлов
Resource Hints Preconnect, prefetch, preload ускоряют загрузку критических ресурсов

Связанные термины

[править]
Источник — https://marketwiki.ru/index.php?title=Critical_CSS&oldid=10154