Как оптимизировать CSS стили?

Оптимизация CSS — это меньше стилей на загрузку, быстрее первая отрисовка и дешевле перерисовки.

Загрузка

• Убрать неиспользуемое — DevTools Coverage, PurgeCSS, очистка в Tailwind.
• Разделить по страницам — бандлер грузит только нужные чанки.
• Критический CSS — стили первого экрана встроить в <style>.
• Минификация и сжатие — brotli/gzip, долгий кеш с хешем в имени.
• Без `@import` в продакшене.

Рендеринг

• Анимировать transform и opacity, а не размеры и позиции.
• Избегать огромных box-shadow и filter: blur() на больших областях.
• content-visibility: auto для длинных списков и блоков вне экрана.
• contain для изоляции пересчётов в виджетах.

.card-list > .card { content-visibility: auto; contain-intrinsic-size: 300px; }

Код

• Короткие селекторы по классам, без глубокой вложенности.
• Переиспользуемые компоненты и переменные вместо копирования стилей.

Коротко для собеседования

Меньше и раньше: убрать лишнее, разделить и сжать, вынести критический CSS; в рендере — анимации на transform/opacity и content-visibility.

Подробнее: web.dev — Optimize CSS