Чеклист производительности сайта для современных бизнес-сайтов

Производительность — это продуктовое решение. Медленные сайты теряют доверие ещё до того, как заголовок успеет отрисоваться.

Порядок приоритетов

1. Сервер / TTFB — хостинг, кэширование, edge
2. Элемент LCP — обычно hero-изображение, video poster или крупный блок заголовка
3. Вес JavaScript — откладывайте некритичные скрипты
4. Шрифты — subset, font-display, ограничьте семейства
5. Изображения — современные форматы, корректные размеры, lazy-load ниже fold
6. Third parties — analytics, чат, embeds

Чеклист

Доставка

• CDN / edge-кэширование для статических ассетов
• HTML кэшируется там, где персонализация позволяет
• Сжатие (Brotli/Gzip) включено
• HTTP/2 или HTTP/3

Ассеты

• Hero-изображение подогнано под display-размеры (не исходник 4000px)
• AVIF/WebP с разумными fallback
• width/height или aspect-ratio для предотвращения CLS
• Lazy-load только для некритичных медиа

JavaScript и CSS

• Критический CSS-путь остаётся lean
• Analytics откладываются до consent / idle, где возможно
• Не блокируйте first paint сторонними tag managers
• Code-split тяжёлых маршрутов

Шрифты

• Self-host по возможности
• Preload только основного текстового начертания
• font-display: swap или optional
• Максимум 2–3 семейства

Измерение

Используйте lab-инструменты (Lighthouse, WebPageTest) и field-данные (CrUX / RUM). Победы только в lab, которые исчезают на реальных мобильных, — не победы.

<link rel="preload" href="/fonts/syne.woff2" as="font" type="font/woff2" crossorigin />

FAQ