Урок 49. Ошибки: Оптимизация и производительность

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~85 мин 🎯 Сложность: Продвинутая
#loading #picture #font-display #will-change

⚡ Кратко

Топ-ошибки: анимация width/top вместо transform; картинки без размеров (CLS); оптимизация без измерения; will-change на всём подряд; PurgeCSS без safelist.

Ошибка 1: анимация дорогих свойств

Анимация width, height, top, left дёргает reflow на каждом кадре — анимация лагает. Ниже левый блок анимирует width (дорого), правый — transform (дёшево). Наведи и сравни плавность.

⚠️ анимирую width — reflow
✅ анимирую transform — GPU
/* ⚠️ плохо */ .a:hover { width: 180px; }
/* ✅ хорошо */ .b:hover { transform: scale(1.1); }

Ошибка 2: картинки без размеров → CLS

Без width/height браузер не знает, сколько места занять, и после загрузки картинки контент «прыгает». Это главный источник Cumulative Layout Shift.

<!-- ⚠️ прыгает вёрстка -->
<img src="hero.jpg" alt="...">
<!-- ✅ место зарезервировано -->
<img src="hero.jpg" width="1200" height="600" alt="...">

Ошибка 3: оптимизация без измерения

«Кажется, тормозит здесь» — частая ловушка. Сначала Lighthouse или панель Performance в DevTools, найди реальное узкое место, и только потом меняй код. Иначе оптимизируешь то, что и так быстро.

Ошибка 4: will-change на всём подряд

will-change выносит элемент на отдельный GPU-слой. Повесишь на десятки элементов «про запас» — съешь видеопамять и сделаешь хуже. Применяй точечно, только к тому, что реально анимируется.

Правило: will-change — это исключение, а не привычка. Нет анимации — нет will-change.

Ошибка 5: PurgeCSS без safelist

PurgeCSS удаляет селекторы, которых нет в HTML. Но классы, добавляемые из JS динамически, он не видит и вырезает их стили. Внеси такие классы в safelist и проверь страницу после очистки.

Навигация