Скорость сайта и почему она влияет на продажи

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

Почему скорость важна для бизнеса

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

Медленный сайт влияет на продажи сразу в нескольких местах.

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

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

Как измеряют скорость: Core Web Vitals

Чтобы говорить о скорости предметно, Google предложил набор показателей Core Web Vitals. Они описаны в статье «Web Vitals» на сайте web.dev, который ведёт команда Chrome. Показатели оценивают три стороны того, как пользователь воспринимает страницу: загрузку, отзывчивость и визуальную стабильность.

Скорость загрузки: LCP

Largest Contentful Paint показывает, когда на экране появился самый крупный элемент контента, например главное изображение или большой блок текста на первом экране. По рекомендации web.dev хорошим считается результат, при котором это происходит в пределах 2,5 секунды с начала загрузки страницы.

Отзывчивость: INP

Interaction to Next Paint оценивает, как быстро страница реагирует на действия пользователя: нажатия, клики, ввод текста. Хорошим web.dev называет значение 200 миллисекунд или меньше. Если показатель хуже, посетитель нажимает на кнопку и не видит реакции, нажимает ещё раз и начинает раздражаться.

Визуальная стабильность: CLS

Cumulative Layout Shift показывает, насколько сдвигаются элементы страницы во время загрузки. Знакомая ситуация: вы собираетесь нажать на ссылку, а в последний момент сверху подгружается баннер, и палец попадает в другое место. Хорошим web.dev считает значение 0,1 или меньше.

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

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

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

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

Как проверить скорость самостоятельно

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

Откройте сайт на своём телефоне

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

Проверьте ключевые страницы, а не только главную

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

Воспользуйтесь бесплатными инструментами

Сервис PageSpeed Insights от Google показывает и лабораторный отчёт, и реальные данные посетителей, если их достаточно. В отчёте указаны значения Core Web Vitals и перечислены конкретные причины замедления. Не пугайтесь технических формулировок: этот отчёт можно переслать разработчику или студии как отправную точку для разговора.

Сравните с конкурентами

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

Что чаще всего замедляет сайт

Причины медленной работы обычно банальны и повторяются от проекта к проекту.

Тяжёлые изображения

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

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

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

Шрифты

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

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

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

Устаревшая техническая основа

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

Как заложить скорость на этапе разработки

Скорость проще заложить заранее, чем исправлять потом. На этапе проектирования стоит договориться о нескольких вещах.

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

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

Скорость после запуска

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

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

Достаточно ли проверить сайт в одном онлайн-сервисе?

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

Нужно ли стремиться к максимальной оценке в тестах?

Не обязательно. Цель в том, чтобы посетители быстро видели контент и могли с ним взаимодействовать. Иногда последние баллы в тесте требуют непропорциональных усилий и не меняют ничего для пользователей.

Можно ли ускорить сайт без переделки?

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

Влияет ли скорость на продвижение?

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

Проверить и ускорить ваш сайт

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