Краткий ответ
- Делайте: оптимизацию изображений (WebP/AVIF, lazy loading), минификацию, CDN, кэширование, async/defer, критический CSS, gzip/Brotli, HTTP/2, prefetch/preload, Service Workers, мониторинг.
- Избегайте: несжатых изображений, блокирующих ресурсов, чрезмерной минимизации без source maps, загрузки всех ресурсов сразу, перегруза плагинами, тяжёлых анимаций, игнорирования мобильной оптимизации.
Полный ответ
Оптимизация изображений
- Сжатие без потерь: TinyPNG, ImageOptim.
- Современные форматы: WebP/AVIF.
- Lazy loading: загружайте по мере появления в вьюпорте.
Мини‑пример:
<img src="image.webp" loading="lazy" alt="..." />
Минификация и объединение
- Минифицируйте CSS/JS/HTML (CSSNano, Terser).
- Объединяйте разумно: учитывайте HTTP/2 (слишком крупные бандлы вредны).
CDN
- Раздавайте статику через CDN для сокращения латентности и лучшего кеширования.
Кэширование
- Клиент: настраивайте заголовки
Cache-Control.
- Сервер: используйте Nginx/Varnish, слой кеша.
Мини‑пример:
Cache-Control: max-age=31536000, immutable
Async/defer и критический CSS
- Подключайте скрипты с
async/defer.
- Встраивайте критический CSS в
<head>; остальное — отложенно.
Мини‑примеры:
<script src="/app.js" defer></script>
<link rel="preload" href="/styles.css" as="style" />
Производительность сервера
- Включайте gzip/Brotli.
- Используйте HTTP/2 для мультиплексирования.
Современные технологии
- Service Workers: офлайн и кеш.
- Prefetch/Preload: предзагрузка важных ресурсов.
Мини‑пример:
<link rel="preconnect" href="https://cdn.example.com" />
Мониторинг и анализ
- Lighthouse, PageSpeed Insights — для аудита.
- Реальное время: Analytics, New Relic, RUM.
Чего избегать
- Чрезмерная минимизация без source maps — усложняет отладку.
- Большие несжатые изображения — замедляют загрузку и увеличивают трафик.
- Загрузка всех ресурсов сразу — используйте lazy loading и асинхронную загрузку.
- Отсутствие кэширования — ухудшает повторные визиты.
- Блокирующие CSS/JS — откладывайте не критичное.
- Тяжёлые анимации/большие скрипты — особенно на мобайле.
- Чрезмерное использование плагинов — рост веса и риски безопасности.
- Игнорирование мобильной оптимизации — большинство пользователей на мобильных.