Посетитель открывает страницу, видит белый экран, ждёт секунду, вторую, третью — и закрывает вкладку. Он не узнает, какой у вас хороший продукт и какие выгодные цены. Скорость загрузки — один из тех параметров, который незаметен, пока всё работает хорошо, и становится критичным, как только начинает тормозить.
К нам часто обращаются с запросом «ускорить сайт». Причём причины медлительности почти всегда комплексные: не одна большая проблема, а десяток мелких, которые складываются. Расскажем, как мы диагностируем такие сайты и что обычно помогает.
Почему скорость — это про деньги
Связь между скоростью и конверсией прямая. Чем дольше грузится страница, тем больше людей уходят, не дождавшись. Особенно это заметно на мобильных устройствах, где соединение нестабильно, а терпения у пользователя меньше.
Вторая сторона — поисковые системы. Скорость и стабильность отображения входят в число факторов, которые учитываются при ранжировании. Медленный сайт хуже индексируется: поисковый робот тратит больше времени на каждую страницу и успевает обойти меньше.
Третья сторона — реклама. Если вы платите за клик в контекстной рекламе, а посадочная страница грузится пять секунд, часть оплаченных переходов просто не доходит до сайта. Деньги списаны, посетителя нет.
Как правильно измерять скорость
Прежде чем что-то исправлять, нужно понять, что именно медленно. «Сайт тормозит» — это ощущение, а нам нужны цифры. Мы смотрим на несколько метрик:
- Время ответа сервера (TTFB). Сколько проходит от запроса до получения первого байта. Если здесь секунда и больше, проблема на стороне бэкенда или хостинга.
- Отрисовка крупнейшего элемента (LCP). Когда пользователь видит основной контент первого экрана — баннер, заголовок, фото товара.
- Сдвиг макета (CLS). Насколько «прыгает» страница при загрузке, когда подгружаются картинки и блоки.
- Отзывчивость (INP). Как быстро страница реагирует на клики и ввод.
Важно измерять не только в лабораторных условиях на мощном компьютере, но и смотреть на реальные данные пользователей. Сайт может летать в офисе на оптоволокне и еле открываться у покупателя в электричке.
И ещё: проверяйте не только главную. Часто главная оптимизирована, а карточки товаров или страницы каталога с фильтрами грузятся в разы медленнее. А именно туда приходит основной трафик из поиска.
Причина первая: сервер и бэкенд
Если сервер долго думает над ответом, никакая оптимизация фронтенда не поможет. Типичные проблемы:
Слабый или перегруженный хостинг
Дешёвый виртуальный хостинг, где на одном сервере размещены сотни сайтов. Пока соседи спокойны — всё нормально, как только у кого-то пик нагрузки — тормозят все. Решение — переход на VPS или выделенный сервер с ресурсами под ваш проект.
Тяжёлые запросы к базе данных
Классика — каталог, где для вывода одной страницы выполняются сотни запросов к базе. Или фильтр, который при каждом клике пересчитывает всё заново без индексов. Мы находим такие места через профилирование и переписываем запросы, добавляем индексы, кешируем результаты.
Отсутствие кеширования
Многие страницы одинаковы для всех посетителей. Нет смысла каждый раз собирать их из базы. Кеш страниц, кеш объектов, кеш на уровне веб-сервера — всё это кратно снижает время ответа.
Устаревшая версия языка и ПО
Сайт работает на старой версии PHP, потому что «так исторически сложилось». Переход на актуальную версию сам по себе может дать заметный прирост производительности, но часто требует доработки кода, который несовместим с новой версией.
Причина вторая: изображения
Это лидер по частоте. На половине сайтов, которые мы проверяем, основная масса трафика страницы приходится на картинки. И почти всегда их можно облегчить в несколько раз без видимой потери качества.
Что мы делаем:
- Сжимаем и переводим в современные форматы. WebP и AVIF при том же визуальном качестве весят значительно меньше JPEG и PNG.
- Отдаём нужный размер. Фотография шириной 4000 пикселей, которая отображается в блоке шириной 400, — частая история. Для разных экранов готовятся разные версии изображения.
- Включаем ленивую загрузку. Картинки ниже первого экрана грузятся, только когда пользователь до них долистает.
- Указываем размеры. Чтобы браузер заранее резервировал место под изображение и страница не прыгала при загрузке.
Отдельный случай — слайдер на главной с десятью полноэкранными баннерами, все из которых грузятся сразу. Пользователь видит первый, а качает все десять. Часто такой слайдер можно заменить одним сильным статичным баннером — и для скорости, и для конверсии это обычно лучше.
Причина третья: скрипты, стили и шрифты
Сторонние и собственные скрипты
JavaScript — второй главный тормоз. И если свой код ещё можно контролировать, то сторонние скрипты часто живут своей жизнью.
Посмотрите, что подключено на вашем сайте. Типичный набор: два-три счётчика аналитики, онлайн-чат, виджет обратного звонка, пиксели рекламных систем, карта, видео с внешнего хостинга, виджет отзывов, всплывающее окно с подпиской. Каждый из них загружает свои скрипты, а некоторые тянут за собой ещё десяток.
Что помогает:
- Провести ревизию и удалить то, что не используется. Часто находятся счётчики сервисов, от которых отказались несколько лет назад.
- Загружать некритичные скрипты отложенно, после основного контента.
- Заменять тяжёлые виджеты на лёгкие заглушки, которые подгружают сервис по клику. Например, вместо встроенной карты показывать статичное изображение, которое по нажатию превращается в интерактивную карту.
- Собирать и минифицировать собственные скрипты, убирать неиспользуемый код.
Отдельно стоит сказать про большие библиотеки, подключённые ради одной функции. Например, целый фреймворк анимаций ради плавного появления одного блока. Такие вещи переписываются на нативный код в несколько строк.
Стили и шрифты
CSS блокирует отрисовку: пока браузер не загрузит стили, он не покажет страницу. Если файл стилей весит сотни килобайт, потому что в нём собраны стили от всех плагинов и тем, это замедляет первый показ.
Решения: выделить критические стили для первого экрана и встроить их прямо в HTML, остальное загружать асинхронно, удалить неиспользуемые правила.
Со шрифтами похожая история. Пять начертаний, каждое в нескольких форматах, с полным набором символов для всех языков мира — при том что сайт только на русском. Мы оставляем нужные начертания, обрезаем наборы символов и настраиваем отображение так, чтобы текст был виден сразу системным шрифтом, а фирменный подменял его после загрузки.
Причина четвёртая: архитектура и наследие
Иногда проблема глубже. Сайт годами дорабатывали разные команды, каждая добавляла своё, ничего не убирая. В итоге на странице подключены три версии одной библиотеки, тема оформления, которую давно заменили, но не отключили, и десятки плагинов, половина из которых не работает.
Здесь точечные исправления дают ограниченный эффект. Нужна системная работа: разобраться в коде, вычистить мёртвые части, перестроить загрузку ресурсов. Иногда эффективнее переделать шаблоны с нуля, сохранив бэкенд. Такие задачи мы решаем в рамках доработки сайта, начиная с полной диагностики.
Как мы проводим ускорение: порядок работ
Чтобы не тратить время на то, что даст минимальный эффект, мы работаем по приоритетам:
- Замеряем текущие показатели на ключевых типах страниц.
- Определяем, где основные потери: сервер, ресурсы, сторонние скрипты.
- Исправляем то, что даёт максимальный эффект при минимальных затратах. Обычно это изображения, кеширование и лишние скрипты.
- Переходим к более трудоёмким задачам: оптимизация запросов, переработка стилей и скриптов.
- Повторно замеряем и фиксируем результат.
- Настраиваем мониторинг, чтобы заметить, если скорость снова начнёт падать.
Последний пункт часто упускают. Сайт ускорили, а через полгода контент-менеджер загрузил в новость фотографию на десять мегабайт, маркетолог подключил ещё три виджета — и всё вернулось. Поэтому мы оставляем клиенту правила: как готовить изображения, как согласовывать подключение новых сервисов.
Вывод
Медленный сайт — почти никогда не следствие одной причины. Это сумма тяжёлых изображений, лишних скриптов, слабого сервера, отсутствия кеширования и накопленного технического долга. Начинать нужно с измерений, а не с догадок: понять, на каком этапе теряется время, и устранять проблемы в порядке их влияния. Результат стоит усилий — более быстрый сайт лучше конвертирует, лучше ранжируется и эффективнее расходует рекламный бюджет.
