Скорость загрузки сайта: что тормозит и как ускорить

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

Почему скорость влияет на деньги, а не только на «зелёные цифры»

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

• Поведение посетителей. Чем дольше открывается страница, тем выше доля отказов. Особенно это заметно на мобильных устройствах и в медленной сети: человек в дороге или на отдыхе не будет ждать, пока прогрузится тяжёлая главная страница.
• Конверсия. В интернет-магазине каждая лишняя секунда в карточке товара, корзине и оформлении заказа превращается в брошенные корзины. Покупатель не жалуется на медленный сайт, он просто закрывает вкладку.
• Поисковое продвижение. Поисковые системы учитывают качество пользовательского опыта, и скорость отображения основного содержимого входит в этот набор. Это не единственный фактор, но при прочих равных быстрый сайт получает преимущество.

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

Как измерять скорость и не обманываться

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

Лабораторные и реальные данные

Тестеры скорости, которыми пользуются все, показывают лабораторные данные: страница загружается в контролируемых условиях с заданной скоростью сети и мощностью устройства. Это удобно для сравнения «до и после», но не отражает того, что видят реальные люди. Реальные данные собираются от настоящих посетителей через браузер и показывают распределение: у кого-то сайт открывается быстро, у кого-то в несколько раз медленнее. Смотрите оба источника и ориентируйтесь на худшие сценарии, а не на средние.

Какие страницы проверять

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

Ключевые показатели

Что тормозит сайт на самом деле

За годы работы с проектами мы заметили закономерность: причины медленной загрузки повторяются от сайта к сайту. Ниже перечислены основные, в порядке частоты.

Неоптимизированные изображения

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

Что делать:

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

Лишние скрипты и виджеты

Со временем сайт обрастает счётчиками, пикселями, онлайн-консультантами, виджетами обратного звонка, подписками, всплывающими окнами. Каждый из них подгружает собственные файлы, часто с чужих серверов, и каждый может подтормаживать. Хуже всего, когда несколько сервисов делают одно и то же: два разных счётчика посещаемости или три всплывающих окна подряд.

Проведите ревизию: выпишите все подключённые сервисы и честно ответьте, кто и зачем ими пользуется. То, чем никто не пользуется, отключайте. То, что нужно, подключайте с задержкой, чтобы они не мешали показать основное содержимое.

Медленный хостинг и отсутствие кеширования

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

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

Тяжёлая база данных

В интернет-магазине база данных разрастается: заказы, сессии, логи, остатки, история изменений, временные данные импорта. Если за ней не следить, запросы начинают выполняться дольше, особенно в каталоге с фильтрами и поиском. Регулярная очистка временных данных, проверка индексов и анализ медленных запросов часто сокращают время ответа в разы.

Шрифты, стили и «тяжёлая» вёрстка

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

Накопленный «мусор» в шаблоне и модулях

Сайты, которые несколько раз перерабатывали разные подрядчики, нередко содержат модули, которые давно не используются, но продолжают подключаться и выполнять запросы. Старые версии библиотек, дублирующиеся стили, остатки прежних дизайнов. Такой груз накапливается незаметно и убирается только аудитом кода.

Порядок работ: от простого к сложному

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

Особенности интернет-магазинов

В магазине скорость сложнее, чем в сайте-визитке, потому что страницы динамические: цены, остатки, фильтры, корзина зависят от пользователя и от состояния каталога.

Каталог и фильтры

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

Интеграции и обмен данными

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

Корзина и оформление заказа

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

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

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

• Открываете ли вы ключевые страницы с телефона через мобильную сеть, а не только с офисного компьютера?
• Вес страницы категории не превышает нескольких мегабайт?
• Картинки товаров загружаются в разумном размере, а не оригиналом от поставщика?
• Известно, зачем нужен каждый подключённый сервис и счётчик?
• Включено кеширование на сервере и в браузере?
• Версия программного окружения на сервере поддерживается и не устарела?
• База данных регулярно очищается от временных данных?
• После каждого крупного изменения скорость проверяется заново?

Типичные ошибки при ускорении

Погоня за максимальным баллом в тестере иногда приводит к обратному результату. Вот что мы видим чаще всего.

• Агрессивное объединение и отложенная загрузка всего подряд. Формально страница быстро «загружается», но кнопки не работают, меню не раскрывается, а корзина не обновляется. Скорость должна ощущаться живым человеком, а не только измеряться.
• Кеш без учёта персональных данных. Если закешировать страницу с корзиной, один покупатель может увидеть чужие товары. Такие ошибки опасны, и поэтому настройки кеша всегда проверяются на реальных сценариях.
• Установка десятка плагинов «для ускорения». Они конфликтуют друг с другом и сами добавляют нагрузку. Лучше одно продуманное решение, чем набор случайных.
• Игнорирование мобильной версии. Сайт, который быстро открывается на мощном компьютере, может мучительно загружаться на недорогом смартфоне.
• Разовая оптимизация без последующего контроля. Через полгода менеджеры снова загрузят тяжёлые картинки, добавят новые виджеты, и всё вернётся на прежний уровень.

Как сохранить скорость надолго

Ускорение сайта это не проект с датой окончания, а привычка. Несколько простых правил помогают не откатиться назад.

1. Объясните контент-менеджерам, какие изображения можно загружать, и по возможности включите автоматическое сжатие при загрузке.
2. Перед подключением любого нового сервиса оценивайте, сколько он добавит к весу и времени загрузки.
3. Раз в квартал проверяйте ключевые страницы и сравнивайте с зафиксированными значениями.
4. Следите за версиями движка и модулей: обновления нередко содержат улучшения производительности. О том, как обновляться безопасно, мы пишем в отдельной статье.
5. Закрепите регулярный контроль за конкретным человеком или командой, например в рамках технической поддержки сайта.

Частые вопросы

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