Низкая скорость загрузки сайта

Критичность проблемы: Высокая | Сложность внедрения: Высокая | Встречаемость: Высокая

В этот момент человек сравнивает. Он помнит, как быстро открываются другие сайты и приложения. Если у вас дольше, вы уже проигрываете. Даже если контент отличный.

Медленнее всего грузятся первые экраны. Пока сайт думает, человек не может взаимодействовать: не пролистать, не нажать кнопку, не ввести текст. Он завис в неопределённости и не понимает, идёт ли процесс.

Чем дольше ожидание, тем больше сомнений. Жив ли сайт? Стоит ли тратить время? Без чётких признаков прогресса раздражение растёт. Особенно на мобильных, в метро, на даче, в дороге.

Медленная загрузка ломает сценарии. Человек хочет быстро найти товар, проверить цену, оплатить. Каждая задержка — барьер. Он бросает корзину, откладывает регистрацию, закрывает вкладку.

Низкая скорость бьёт по показателям. Увеличивается время до первого взаимодействия, падает глубина просмотров. Растут отказы, снижается доля возвращений. Реклама приводит трафик, но люди уходят, не дождавшись.

Нагрузка обостряет проблему. В пиковые часы сайт замедляется ещё сильнее. На сложных страницах — карточки товара, фильтры, поиск — тормоза заметнее. Новые виджеты и счётчики усугубляют задержки.

Что говорят пользователи

Опишите, где именно и при каких условиях вам приходилось ждать на нашем сайте: какую страницу или действие открывали, сколько примерно ждали, что видели на экране и что сделали дальше?

Неправильные ответы пользователей:

• Всё норм, у меня быстро открывается.
• Не знаю, у вас сервера слабые, почините.
• Долго было. Ну, просто долго.
• У меня интернет хороший, значит проблема у вас.
• Я не эксперт, ничего сказать не могу.

Правильные ответы пользователей:

• iPhone 12, iOS 17, Safari, LTE от МТС. 12.09 в 19:40 открывал карточку товара со списка «Кроссовки». Белый экран ~6–7 секунд, потом картинки подгрузились ещё ~3 секунды. Закрыл вкладку.
• Ноутбук Windows 11, Chrome 127, офисный Wi‑Fi. 10.09 в 10:15 применил фильтры в каталоге. После клика «Показать» индикатор крутился ~8 секунд, кнопки были неактивны. Потерял контекст, вернулся назад.
• Samsung S21, Android 14, Chrome, 3G. 11.09 в 22:05 оформляла заказ: переход на оплату висел ~10 секунд, кнопка «Оплатить» не реагировала пару секунд. Подумала, что зависло, вышла.
• MacBook, Safari 17, домашний Wi‑Fi. 09.09 в 08:30 открыл главную. Первый экран появился быстро, но скролл подлагивал, изображения ниже грузились рывками. Ощущалось тормозно, вернулся через час.

Решение проблемы

1. Замерьте факты. Соберите RUM-данные: TTFB, LCP, INP, CLS, FCP, TTI. Разделите по устройствам, браузерам, сетям и страницам. Зафиксируйте цель для каждого показателя.
2. Почините сервер. Ускорьте TTFB: кэшируйте HTML там, где контент статичен, включите компрессию, переведите на HTTP/2/3, оптимизируйте TLS, держите keep‑alive. Уберите лишние редиректы.
3. Разгрузите бэкенд. Оптимизируйте запросы к базе, добавьте индексы, внедрите кэш на уровне данных. Разделите тяжёлые вычисления на асинхронные задачи.
4. Вынесите статику в CDN. Отдавайте картинки, шрифты, скрипты и стили с географически близких узлов. Настройте агрессивные Cache‑Control и ETag.
5. Упростите критический путь. Вынесите критический CSS инлайн. Отложите остальное. Подключайте JS defer/async. Удалите блокирующие шрифты: font‑display: swap, сабсеты для кириллицы.
6. Сократите скрипты. Уберите неиспользуемые библиотеки, трекеры и виджеты. Минифицируйте, разделите код, включите tree‑shaking. Загрузку сторонних скриптов делайте поздно и только там, где они нужны.
7. Оптимизируйте изображения. Выгружайте WebP/AVIF, правильные размеры под вьюпорт и плотность экрана, responsive srcset, lazy‑load ниже первого экрана. Уберите лишние декоративные картинки.
8. Наведите порядок в стилях. Сократите CSS, уберите мёртвые правила, объедините шрифты, проверьте каскад и специфичность, чтобы рендер не пересчитывался лишний раз.
9. Ускорьте взаимодействие. Сведите к минимуму долгие таски JS, разбейте их. Используйте requestIdleCallback и web workers там, где уместно. Реагируйте на клик сразу.
10. Стабилизируйте вёрстку. Резервируйте места под медиа, задавайте размеры, чтобы не прыгал контент. Так снизите CLS и раздражение.
11. Проверьте тяжёлые страницы. Каталог с фильтрами, поиск, корзина, оформление заказа — источники боли. Загрузите данные порциями, введите пагинацию, кешируйте ответы API.
12. Настройте мониторинг. Поставьте алерты на просадки LCP/INP, собирайте логи по страницам и релизам. Введите performance‑budget и не выпускайте изменения, которые его нарушают.
13. Подтвердите улучшения. Прогоните Lighthouse и WebPageTest до/после, сравните RUM в разрезе 7–14 дней. Только потом масштабируйте решения на весь проект.

Гипотезы для роста конверсии

• Если сократить время до первого контента на карточке товара, то конверсия в просмотр характеристик может увеличиться за счёт того, что пользователь быстрее начинает взаимодействовать со страницей.
• Если ускорить переход из корзины к оплате, то конверсия в успешные оплаты может увеличиться за счёт того, что пользователи меньше бросают процесс на долгом шаге.
• Если отложить загрузку второстепенных виджетов, то конверсия в добавление в корзину может увеличиться за счёт того, что кнопки становятся кликабельными сразу.
• Если оптимизировать изображения на первом экране, то конверсия в скролл и просмотр списка товаров может увеличиться за счёт того, что исчезает длительный белый экран.
• Если уменьшить время ответа сервера на поисковом результате, то конверсия в переходы по товарам может увеличиться за счёт того, что пользователь не теряет фокус и продолжает искать.

Пользователь не различает, где узкое место — сервер, картинки, скрипты. Ему всё равно. Он хочет, чтобы сайт просто работал. Быстро, предсказуемо, без подвисаний и сюрпризов.