Производительность
Каждая лишняя секунда загрузки — это уходящие пользователи и позиции в поиске. Оптимизация не про «волшебные сервера», а про дисциплину: сжать, отложить, не блокировать.
Web Vitals: три главные метрики
- LCP (Largest Contentful Paint) — когда появился главный контент (< 2.5 c — хорошо);
- INP (Interaction to Next Paint) — отклик на клики (< 200 мс);
- CLS (Cumulative Layout Shift) — «прыжки» макета (< 0.1).
Картинки: форматы и размеры
Картинки — обычно главный вес страницы. Сжимаем и отдаём нужный размер.
<!-- WebP moderne, предает браузеру правильный кодек -->
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Фото" width="800" height="600">
</picture>
<!-- ленивая загрузка: показывать, только когда видео видно -->
<img src="big.jpg" alt="Медленно" loading="lazy">💡
Указывайте у картинок
width и height — браузер оставляет им место заранее, и страница не «прыгает» при загрузке (это и есть борьба с CLS).Не блокируем рендер
Скрипты в head останавливают отрисовку. Синхронных блокирующих скриптов — по минимуму.
<!-- defer: выполнить после парсинга HTML — так и надо -->
<script defer src="app.js"></script>
<!-- async: загружаться параллельно (для независимых виджетов) -->
<script async src="widget.js"></script>Lighthouse: аудит одной кнопкой
DevTools → вкладка Lighthouse → «Generate report». Дал оценку по нескольким осям и рекомендации: какие картинки сжать, какие стили убрать, что кэшировать.
⚠️
Lighthouse меряет в условиях вашего ноутбука и интернета. Для «настоящих» цифр смотрите на реальных пользователей: поле CrUX (Google) или аналитика хостинга.
Быстрый чек-лист
- WebP + правильный размер +
loading="lazy"; defer/asyncдля скриптов;- ширина/высота у медиа (анти-CLS);
- минификация сборки (Vite делает сам);
- кэширование статики заголовками.
ℹ️
Оптимизируйте по цифрам, а не по ощущениям: прогоните Lighthouse до и после изменений. Два изменения, которые реально дали выигрыш, — лучше десяти изменений «на глаз».