Дёшево vs дорого: какие свойства анимировать
Главное правило плавных анимаций — трогать только дешёвые свойства (этап Composite). Вот карта стоимости:
transform вместо top/width.Справочник урока
| Приём / инструмент | Зачем нужен | Мини-пример |
|---|---|---|
Critical CSS | CSS первого экрана инлайн — рендер не ждёт всей таблицы стилей | <style>.hero{padding:2rem}</style> |
| минификация | Тот же CSS без пробелов/переносов — меньше байтов | styles.min.css |
PurgeCSS | Удаляет неиспользуемые селекторы | purgecss --css styles.css --content "*.html" |
loading="lazy" | Откладывает загрузку картинок ниже сгиба | <img loading="lazy"> |
<picture> / WebP / AVIF | Современные форматы — меньше вес при том же качестве | <source type="image/avif"> |
font-display | Показать текст сразу, не дожидаясь шрифта | font-display: swap; |
will-change | Подсказка браузеру вынести элемент на слой (применять точечно!) | will-change: transform; |
| Lighthouse | Аудит производительности | DevTools → Lighthouse → Analyze |
| Core Web Vitals | Реальные метрики UX: LCP, CLS, INP | web.dev/vitals |
reflow | Перерасчёт раскладки (дорого) | width, height, top, margin |
repaint | Перерисовка без перераскладки | color, background, box-shadow |
will-change осторожно: не вешай на десятки элементов «про запас» — каждый слой ест видеопамять. Ставь только на то, что реально анимируется, и по возможности убирай после.