Оптимизация начинается с замера. Без цифр легко потратить день на микро-правки, которые не видит пользователь.
Сначала бюджет
Перед изменениями фиксирую три числа:
- LCP на мобильном;
- общий вес первой загрузки;
- CLS.
Дальше каждое изменение проверяю на том же устройстве и том же соединении.
Что дало эффект
| Изменение | Результат |
|---|---|
Локальные шрифты с font-display: swap |
минус 300 мс к первому тексту |
| AVIF/WebP для изображений | минус 60% веса картинок |
Явные width/height |
CLS около нуля |
| Удаление неиспользуемого JS | минус 40 КБ |
Самый большой выигрыш дали шрифты и картинки, а не «оптимизация» CSS.
Что не дало эффекта
Минификация уже минифицированного кода и перестановка preload для ресурсов, которые не участвуют в LCP. Звучит правильно, но на метрики не влияет.
Как проверять
- Lighthouse в режиме mobile;
- вкладка Network с throttling;
- реальные замеры на среднем телефоне.
Если изменение нельзя измерить, это не оптимизация, а вкусовщина.
Вывод
Сначала узкое место, потом инструмент. В статическом сайте чаще всего это шрифты, изображения и лишний JavaScript.