Скорость убивает: во что Вам обходится медленный сайт
Каждые 100 мс времени загрузки снижают конверсию примерно на 1%. Показываем, как найти и устранить самые медленные части Вашего стека.
Время загрузки — это показатель выручки. Не технический параметр, а именно выручка. Amazon сообщал, что каждые 100 мс дополнительной задержки стоят 1% продаж. Собственные данные Google показывают: показатель отказов растёт на 32%, когда загрузка страницы идёт с 1 с до 3 с.
Ваш сайт, скорее всего, медленный — просто Вы пока не измеряли, в чём именно.
Реальные цифры
Largest Contentful Paint (LCP) — метрика, наиболее сильно коррелирующая с конверсией. Пороги Google:
- Хорошо: меньше 2,5 с
- Требует улучшения: 2,5 с–4 с
- Плохо: больше 4 с
Большинство сайтов, которые мы аудируем, находятся в диапазоне 3–6 с. Разница между 6 с и 2 с — это не победа дизайна, это победа конверсии, которая отражается в выручке.
Куда уходит время
Изображения — неоптимизированные картинки самый частый виновник. Hero-изображение в 4 МБ, отдаваемое мобильным пользователям, — это налог в 4 МБ на каждое первое впечатление.
Сторонние скрипты — аналитика, чат-виджеты, рекламные пиксели. Каждый блокирует рендеринг. Типичный маркетинговый сайт загружает 8–12 сторонних скриптов.
Ресурсы, блокирующие рендеринг — CSS и JS, загружаемые в <head> документа, не дают браузеру отрисовать ничего.
Время ответа сервера (TTFB) — если сервер отвечает 800 мс, никакая фронтенд-оптимизация эту дыру не закроет.
Клиентский рендеринг — SPA, отправляющие пустой HTML и затем гидратирующиеся, по своей природе медленны на первом заходе.
Стек исправлений
Для большинства сайтов наибольший эффект дают, по порядку:
- Перейти на edge-runtime через CDN — Vercel, Cloudflare Pages или подобное. TTFB меньше 100 мс по всему миру.
- Отдавать оптимизированные изображения — использовать
next/imageили Cloudflare Image Resizing. WebP, корректные размеры, lazy loading. - Отложить некритичные скрипты — загружать аналитику и чат-виджеты после того, как страница стала интерактивной.
- Убрать render-blocking CSS — инлайнить критический CSS, остальное откладывать.
- Перейти на серверный рендеринг — пререндерить HTML, чтобы пользователи видели контент сразу.
Правильное измерение
Не тестируйте производительность из офиса на быстрой машине. Используйте:
- WebPageTest с дросселированным 4G-соединением на мобильном
- Lighthouse CI в Вашем build-пайплайне, чтобы ловить регрессии
- Core Web Vitals в Google Search Console для данных от реальных пользователей
Цель — быть заметно быстрым на среднем Android-смартфоне в загруженной мобильной сети. Всё остальное — оптимизация для аудитории, которая всё равно не заметит. И эта аудитория не та, что приносит Вам выручку: те, кто реально кликает на Ваши объявления и заполняет формы, чаще всего сидят на средних устройствах в нестабильной сети. Если Вы их теряете на первой секунде, остальной маркетинг — компенсация утечки.