Оптимизация CSS сайта (critical CSS, purge unused CSS)

Оптимизация CSS: critical CSS и purge неиспользуемых стилей

Медленная загрузка страницы часто связана с избыточным CSS. Render-blocking CSS задерживает первый контентный рендер (FCP) и увеличивает Largest Contentful Paint (LCP). Bootstrap из коробки весит 140 кБ, но после удаления неиспользуемых классов остаётся 5–15 кБ (снижение на 96%). Tailwind в development-режиме — 3.5 МБ; после purge — 5–50 кБ. Мы настраиваем critical CSS и purge для любого стека: от Laravel до Next.js, добиваясь FCP < 1 секунды. Наш опыт — 7+ лет в оптимизации производительности, более 50 проектов. Результат — проходят Core Web Vitals без компромиссов. За 2–3 дня внедряем critical CSS и purge под ключ.

Как critical CSS влияет на метрики Core Web Vitals?

LCP (Largest Contentful Paint) — время рендеринга самого крупного элемента на экране. Если CSS загружается синхронно (render-blocking), браузер не рисует контент до полной загрузки стилей. Inline critical CSS устраняет эту задержку: стили для above-the-fold контента вставляются прямо в <head>, остальное грузится асинхронно.

Пример: на сайте с Bootstrap в critical CSS попадают только стили для шапки, героя и кнопок — около 5 кБ вместо 140 кБ. LCP падает с 4 до 1.5 секунд (улучшение на 62%). FCP снижается с 2.5 до 1.2 секунд.

Что такое purge CSS и как его настроить?

Purge удаляет классы, не найденные в шаблонах. В Tailwind 3+ purge встроен через конфиг content:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.{ts,tsx}',
    './resources/js/**/*.json',
    // если классы генерируются динамически
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Динамические классы (конкатенация строк) — purge не найдёт их:

// Плохо — purge не увидит
const color = 'red';
<div className={`text-${color}-500`} />

// Хорошо — полные имена классов
const colorMap = {
  red: 'text-red-500',
  blue: 'text-blue-500',
};
<div className={colorMap[color]} />

Что такое safelist и зачем он нужен?

Safelist — белый список классов, которые purge не должен удалять. Иногда классы добавляются через JavaScript, например, Bootstrap модалки: modal-open, show. Если они не встречаются в HTML-шаблонах, purge удалит их — сломается функциональность. Настраиваем safelist в конфиге PurgeCSS:

// postcss.config.js
import purgecss from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    purgecss({
      content: [
        './resources/views/**/*.blade.php',
        './resources/js/**/*.tsx',
        './public/**/*.html',
      ],
      safelist: {
        standard: ['modal-open', 'show', 'active', 'fade'],
        deep: [/^modal/, /^alert/, /^toast/],
        greedy: [/swiper/],
      },
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
};

Пошаговая настройка purge CSS

1. Аудит текущего CSS. Используем Coverage в DevTools, анализ бандлов, выявление render-blocking.
2. Конфигурация purge. Настраиваем PurgeCSS или Tailwind JIT, указываем пути к шаблонам.
3. Создание safelist. Добавляем классы, используемые динамически (модалки, алерты, анимации).
4. Тестирование. Проверяем, что ничего не сломалось, визуальный регресс.
5. Деплой. Интегрируем purge в сборку (Vite, Webpack, Laravel Mix) и разворачиваем на production.

Выбор стратегии: runtime CSS vs статический CSS

CSS-in-JS (styled-components, Emotion) генерируют стили в runtime — дополнительная нагрузка на JS. Для production предпочтительнее статический CSS.

Статический CSS лучше для Core Web Vitals: он не блокирует рендеринг (после critical inline) и меньше нагружает CPU.

Для Vite critical CSS настраивается через critters:

// vite.config.ts
import { defineConfig } from 'vite';
import { critters } from 'critters';

export default defineConfig({
  plugins: [
    critters({
      preload: 'media',
      pruneSource: true,
      logLevel: 'silent',
    })
  ]
});

В Laravel critical CSS вставляется вручную:

<style>{!! file_get_contents(public_path('css/critical.css')) !!}</style>
<link rel="preload" href="{{ mix('css/app.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</noscript>

Минификация — выполняется LightningCSS в Vite или cssnano. На выходе: CSS bundle < 20 кБ, покрытие > 80%.

Сравнение метрик до и после оптимизации

Что входит в работу по оптимизации CSS?

• Аудит текущего CSS: Coverage в DevTools, анализ бандлов, выявление render-blocking.
• Настройка purge: конфигурация PurgeCSS или Tailwind JIT, создание safelist.
• Извлечение critical CSS: автоматически через critters или вручную с помощью npx critical.
• Минификация и сжатие: LightningCSS / esbuild, Gzip / Brotli.
• Интеграция в сборку: Vite, Webpack, Laravel Mix, Next.js.
• Проверка метрик: LCP, FCP, TBT до и после.
• Документация: описание настроек, рекомендации по поддержке.

Результат: прохождение Core Web Vitals, CSS bundle минимального размера, сохранение функциональности и стилей.

Мы используем PurgeCSS, Tailwind JIT, critters и PostHTML в зависимости от стека. Все настраивается под вашу сборку.

Свяжитесь с нами для детального аудита вашего проекта. Получите консультацию по подходящим инструментам. Оценим ваш CSS за 1 день. Закажите оптимизацию CSS и ускорьте ваш сайт.