Qaynaq STUDIO ’26 / BAKU
Salam Hello Привет
Журнал ИНЖЕНЕРИЯ

Почему скорость загрузки сайта важнее дизайна

Оценки Lighthouse, Core Web Vitals и реальные потери выручки от медленного сайта.

Elvin Şərifov · 24 мая 2026 · 7 мин чтения

Заголовок провокационный, но честный. Когда вы выбираете между «красивее» и «быстрее», скорость сайта почти всегда возвращает больше денег. Дизайн человек оценит, если успеет дождаться загрузки. На бакинском мобильном интернете в час пик «дождаться» — это не данность. Это бюджетная статья, которую большинство студий заказчику не показывают.

Что реально происходит на медленном сайте

Сухие цифры, которые видно в Google Analytics любого бакинского сайта:

  • 1 секунда LCP — bounce rate 9%.
  • 3 секунды LCP — bounce rate 32%.
  • 5 секунд LCP — bounce rate 58%.
  • 7+ секунд LCP — bounce rate 70%+.

Это значит: если ваш сайт открывается за 5 секунд (типичная цифра для среднего бакинского сайта на WordPress), вы теряете шестерых из десяти посетителей до того, как они увидели ваш дизайн. Бюджет рекламы, потраченный на этих шестерых, ушёл в пустоту.

В деньгах: при CPC 1.5 ₼ и 1000 кликов в месяц это 900 ₼ ежемесячно — на людей, которые ушли до загрузки сайта.

Что такое Core Web Vitals (без жаргона)

Google измеряет скорость по трём метрикам, которые называются Core Web Vitals. С 2021 года они официально влияют на ранжирование.

LCP — Largest Contentful Paint

Сколько секунд от начала загрузки до того момента, когда видна главная картинка/заголовок на экране. Цель: меньше 2.5 секунд.

Что ломает LCP в Баку: огромные несжатые JPEG-герои, шрифты без preload, блокирующий JavaScript, медленный хостинг (особенно если сервер в Германии, а пользователь в Баку — +200 мс на каждый запрос).

INP — Interaction to Next Paint

Сколько миллисекунд от клика/тапа до видимой реакции. Цель: меньше 200 мс.

Что ломает INP: тяжёлые React-приложения с гидратацией всего сразу, бесконечные сторонние скрипты (чаты, аналитика, пиксели Meta), плохо написанные обработчики событий.

CLS — Cumulative Layout Shift

Насколько прыгает содержимое при загрузке (когда вы пытаетесь нажать кнопку, а она убегает). Цель: меньше 0.1.

Что ломает CLS: картинки без указанных размеров (изображение «прыгает» при подгрузке), позднодинамически вставляемые баннеры, шрифты без fallback.

Lighthouse — это не отчёт, это план работ

Lighthouse в Chrome DevTools выдаёт оценку 0–100 по четырём областям. Большинство бакинских сайтов выглядят так:

  • Performance: 30–55 на мобильном (плохо).
  • Accessibility: 65–80 (средне).
  • Best Practices: 75–90 (норм).
  • SEO: 80–95 (норм).

Целевые цифры на 2026 год: 90+ по каждой на мобильном. Это не «нолики ради нолков», это реальный пользовательский опыт.

Lighthouse даёт под каждой оценкой список рекомендаций, отсортированных по экономии секунд. Это и есть план работ — двух-трёх дней инженера обычно хватает, чтобы поднять оценку Performance с 35 до 80.

Рычаги, которые работают

В порядке отдачи:

  1. Изображения в WebP/AVIF с правильными размерами — экономия 60–80% веса.
  2. Preload hero-картинки и шрифта — минус 0.5–1.5 секунды LCP.
  3. Удаление неиспользуемого JavaScript — на 80% сайтов это половина веса.
  4. Lazy-loading для всего ниже первого экрана — атрибут loading="lazy" на каждом img.
  5. CDN или хостинг ближе к Баку. Cloudflare с edge-кэшем — стандартный выбор.
  6. Удаление лишних плагинов (на WordPress) — каждый плагин это от 10 до 200 КБ JS.
  7. HTTP/2 или HTTP/3 — у большинства бакинских хостингов уже включено по умолчанию.

Почему скорость не противопоставлена дизайну

Контраргумент звучит так: «но мы хотим красивые анимации, видео-герои, параллакс». Хорошо. Можно делать всё это и быть быстрым. Просто:

  • Видео сжато правильно (AV1 или H.265), с poster-картинкой, начинается после первого взаимодействия.
  • Анимации — на CSS-свойствах transform и opacity, не на top/left/width. Это бесплатно для GPU.
  • Параллакс — через IntersectionObserver, не через слушатель scroll на каждый кадр.
  • Шрифты — два максимум, с font-display: swap.

Быстрые сайты не выглядят бедно. Они выглядят сосредоточенно. Стилизация и производительность — не дилемма, а инженерная задача.

Что просить у подрядчика

Если вы заказываете новый сайт, в смету впишите три пункта:

  1. Lighthouse Performance на мобильном — не ниже 90 на главной и ключевых страницах. Цифру проверяете при приёмке.
  2. LCP меньше 2.0 секунд, INP меньше 150 мс, CLS меньше 0.05.
  3. Бюджет JavaScript — не более 120 КБ на главной (gzip).

Если подрядчик не соглашается на цифры — значит, он не собирается их обеспечивать. Это нормальный фильтр.

В Qaynaq Lighthouse и Core Web Vitals прошиты в процесс сборки — мы не имеем права запушить в продакшен страницу с оценкой ниже 90. Если хотите снять реальные цифры с вашего текущего сайта, мы делаем технический аудит бесплатно: salam@qaynaq.com.