Оптимизация 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
- Аудит текущего CSS. Используем Coverage в DevTools, анализ бандлов, выявление render-blocking.
- Конфигурация purge. Настраиваем PurgeCSS или Tailwind JIT, указываем пути к шаблонам.
- Создание safelist. Добавляем классы, используемые динамически (модалки, алерты, анимации).
- Тестирование. Проверяем, что ничего не сломалось, визуальный регресс.
- Деплой. Интегрируем purge в сборку (Vite, Webpack, Laravel Mix) и разворачиваем на production.
Выбор стратегии: runtime CSS vs статический CSS
CSS-in-JS (styled-components, Emotion) генерируют стили в runtime — дополнительная нагрузка на JS. Для production предпочтительнее статический CSS.
| Параметр | CSS-in-JS | Static CSS (Tailwind, CSS Modules) |
|---|---|---|
| Runtime overhead | Да | Нет |
| Размер бандла | +50–150 кБ (runtime) | 0 кБ |
| Tree-shaking | Сложный | Простой |
| Поддержка SSR | Требует настройки | Из коробки |
Статический 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 (Bootstrap) | 140 кБ | 5 кБ |
| LCP | 4.0 с | 1.5 с |
| FCP | 2.5 с | 1.2 с |
| TTFB | 0.8 с | 0.6 с (без изменений) |
Типичные ошибки при оптимизации CSS
- Игнорирование динамических классов — purge удаляет их, ломая интерфейс.
- Неправильный safelist — модальные окна, алерты перестают стилизоваться.
- Critical CSS не обновляется при изменении контента.
- Забывают про iframe и сторонние скрипты — их CSS тоже влияет на метрики.
- Переоптимизация: удаление классов, используемых в неочевидных местах (архивы, статические страницы).
Что входит в работу по оптимизации 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 и ускорьте ваш сайт.