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

Почему производительность CSS важна

CSS — это ресурс, блокирующий рендеринг. Браузер не может отрисовать страницу без загрузки CSS. Большие CSS-файлы увеличивают время First Contentful Paint (FCP).

Неиспользуемый CSS увеличивает размер страницы и продлевает время загрузки. Обычно 60-80% CSS на сайте не используется.

Оптимизация CSS улучшает метрики Core Web Vitals (особенно LCP и CLS). Оптимизированный CSS обеспечивает более быстрый и плавный пользовательский опыт.

Минификация CSS

Минификация уменьшает размер файла на 20-40% путём удаления пробелов, комментариев и ненужных символов из CSS.

Инструменты: cssnano, clean-css, Terser (поддержка CSS). Используйте плагин минификации в вашем build pipeline (Webpack, Vite, Rollup).

В сочетании со сжатием Gzip/Brotli минификация может уменьшить размер CSS-файла на 70-80%.

Всегда используйте минифицированный CSS в production builds. Используйте читаемый CSS в development.

Критический CSS

Критический CSS — это CSS, необходимый для контента above-the-fold (первый экран). Добавьте этот CSS inline в <head>.

Загружайте некритический CSS асинхронно: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Инструменты: Critical (npm-пакет), Penthouse, Critters (Webpack-плагин). Эти инструменты автоматически извлекают критический CSS.

Размер критического CSS: держите ниже 14KB (TCP slow start window). Больший критический CSS раздувает начальный payload.

Удаление неиспользуемого CSS

PurgeCSS удаляет неиспользуемые CSS-селекторы. Используется вместе с фреймворками, такими как Tailwind CSS, Bootstrap.

Конфигурация PurgeCSS: определите content (HTML/JS-файлы для сканирования) и safelist (селекторы для сохранения).

Chrome DevTools Coverage tab: обнаруживайте неиспользуемый CSS. Отчёт Coverage показывает, сколько из каждого файла используется.

CSS-in-JS: библиотеки, такие как Styled Components, Emotion, рендерят только используемые стили. Неиспользуемый CSS удаляется автоматически.

Стратегии загрузки CSS

Code splitting: создавайте отдельный CSS-файл для каждой страницы. Используйте Webpack CSS code splitting или автоматическое splitting Vite.

Lazy loading: lazy load CSS для конкретных компонентов (modal, tooltip). Загружайте CSS-файл по требованию с помощью dynamic import().

Загрузка шрифтов: используйте font-display: swap с @font-face. Минимизируйте проблемы FOIT и FOUT.

Media queries: разделяйте условный CSS (печать, dark mode) на отдельные файлы: <link rel="stylesheet" href="print.css" media="print">.

Preconnect: используйте <link rel="preconnect" href="https://fonts.googleapis.com"> для внешних источников CSS (Google Fonts).

Лучшие практики CSS

Поддерживайте низкую специфичность CSS. Глубокие цепочки селекторов (div > ul > li > a) снижают производительность. Используйте плоские селекторы.

Используйте Flexbox и Grid. Layout'ы на основе float требуют больше CSS и рендерятся медленнее.

CSS containment: ограничивайте область рендеринга элемента с помощью contain: layout paint style. Это позволяет браузеру оптимизировать область рендеринга.

Will-change: используйте will-change: transform на анимированных элементах. Но чрезмерное использование снижает производительность.

Используйте CSS custom properties (переменные). Управляйте повторяющимися значениями (цвет, размер) с помощью переменных.