Разработка

Скорость загрузки: почему это деньги

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

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

Как скорость превращается в потери

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

Дальше есть три типовых исхода, и все три вам невыгодны:

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

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

И третий слой — поиск. Поисковые системы измеряют реальный пользовательский опыт загрузки, эти метрики известны как Core Web Vitals: как быстро появляется основное содержимое, как быстро страница откликается на действие, не прыгает ли вёрстка во время загрузки. Скорость не перевешивает релевантность, но при сопоставимом качестве материалов она работает против медленного сайта.

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

Что обычно тормозит

Изображения

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

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

Хорошая новость: это чинится почти всегда и без переделки сайта.

Лишние скрипты

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

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

Сторонние виджеты

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

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

Сервер и запросы к базе

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

Шрифты и прыгающая вёрстка

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

Мобильный интернет — это норма, а не исключение

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

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

Что чинится, а что заложено в архитектуру

Часть проблем решается точечно и относительно быстро:

  1. Пережать и правильно подготовить изображения, отдавать разные размеры под разные экраны.
  2. Отложить загрузку того, что не видно на первом экране.
  3. Убрать неиспользуемые скрипты и библиотеки, подключённые «на всякий случай».
  4. Подключить сторонние виджеты так, чтобы они не блокировали отрисовку, а тяжёлые — по действию пользователя.
  5. Настроить кеширование и сжатие на сервере.
  6. Ограничить набор шрифтов и их начертаний.

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

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

Что сделать на этой неделе

  1. Откройте свой сайт с телефона на мобильном интернете — главную, каталог и одну внутреннюю страницу.
  2. Прогоните основные страницы через любой публичный инструмент замера и посмотрите на мобильный режим, а не на десктопный.
  3. Посмотрите, сколько весит самая тяжёлая картинка на главной и нужен ли ей такой размер.
  4. Составьте список всех сторонних виджетов и честно ответьте, какие из них ещё нужны.
  5. Проверьте, не прыгает ли вёрстка в первые секунды загрузки.
  6. Начните измерять регулярно, а не один раз: скорость деградирует постепенно, вместе с новым содержимым и новыми подключениями.

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