Медленный сайт теряет посетителей ещё до первого экрана, а поисковики видят это по поведению людей и по замерам в браузерах. Разбираем, какие метрики важны, что тормозит и какие исправления дают самый заметный эффект.
Почему скорость стала фактором ранжирования
Поисковая система зарабатывает на том, что пользователь находит ответ и остаётся доволен. Если человек нажал на результат, три секунды смотрел на белый экран и вернулся к выдаче, это плохой сигнал и для сайта, и для самой поисковой системы. Поэтому скорость учитывается двумя путями: напрямую — через замеры реальных пользователей в браузерах, и косвенно — через поведение: отказы, возвраты в выдачу, глубину просмотра.
Важно понимать масштаб. Быстрый сайт с плохим контентом не обгонит медленный сайт с отличным ответом на запрос. Скорость — это не волшебная кнопка «в топ», а условие, без которого остальные усилия работают вполсилы. В конкурентных тематиках, где десяток сайтов примерно равны по содержанию, именно она часто становится тем самым решающим отличием.
Для бизнеса есть и прямой денежный эффект, никак не связанный с поиском. Каждая лишняя секунда загрузки на мобильном — это заметная доля людей, которые закрыли вкладку. Человек, пришедший по платной рекламе, стоит денег уже в момент клика, и если он не дождался страницы, бюджет потрачен впустую.
Какие метрики действительно смотреть
Слово «скорость» слишком общее. Сайт может быстро отдать HTML, но долго рисовать главный баннер, или быстро показать картинку, а потом «прыгать» при подгрузке рекламы. Поэтому современная оценка складывается из нескольких показателей, каждый из которых описывает отдельный аспект ощущений пользователя.
| Метрика | Что измеряет | Хороший ориентир |
|---|---|---|
| TTFB (время до первого байта) | Как быстро сервер начинает отвечать | до 0,6 с |
| FCP (первая отрисовка контента) | Когда на экране появляется хоть что-то полезное | до 1,8 с |
| LCP (отрисовка крупнейшего элемента) | Когда виден главный блок: баннер, фото, заголовок | до 2,5 с |
| INP (отклик на действие) | Насколько быстро страница реагирует на клики и ввод | до 200 мс |
| CLS (сдвиг макета) | Насколько «прыгают» элементы во время загрузки | до 0,1 |
Ориентиры стоит проверять на мобильном профиле и на реальных данных, а не только в лабораторном тесте на мощном ноутбуке с офисным интернетом. Лабораторный замер удобен для поиска причин, но оценку сайта формируют именно полевые данные — то, что происходит у живых людей в метро, в регионах, на недорогих смартфонах.
Где обычно теряются секунды
За годы аудитов мы видим одни и те же причины, и почти никогда проблема не одна. Как правило, медленный сайт — это сумма пяти-семи мелких недочётов, каждый из которых по отдельности кажется безобидным.
Серверная часть
Долгий ответ сервера — самая недооценённая беда. Страница каталога собирается из десятков запросов к базе данных, кеш не настроен или сбрасывается при каждом обновлении цен, хостинг выбран по принципу «подешевле». Для корпоративного сайта в 30 страниц это терпимо, для каталога на 15 000 позиций — нет. Однажды у дистрибьютора стройматериалов время ответа на страницах категорий доходило до 4 секунд: каждый фильтр пересчитывался «на лету» без индексов в базе. После добавления индексов и кеширования результатов время упало до 0,3 секунды, и никакой дизайн при этом не меняли.
Изображения
Фотографии в 4–6 мегабайт прямо с камеры, баннеры в PNG там, где хватило бы сжатого современного формата, отсутствие адаптивных размеров — телефон грузит ту же картинку шириной 2 500 пикселей, что и большой монитор. На типичной главной странице изображения составляют 60–80% веса, поэтому здесь самый быстрый выигрыш.
Скрипты и сторонние сервисы
Онлайн-чат, два счётчика аналитики, пиксели рекламных систем, виджет обратного звонка, карта, видео с хостинга — каждый сервис добавляет запросы и нагрузку на процессор телефона. Мы встречали сайты, где собственный код весил 200 КБ, а сторонние виджеты — больше 2 МБ. Отдельная история — тяжёлые библиотеки, подключённые ради одного слайдера или одной анимации.
Шрифты и стили
Четыре начертания фирменного шрифта, подключённые без предзагрузки, дают эффект «невидимого текста» или скачка при подмене. Огромный файл стилей, в котором 80% правил не используются на конкретной странице, блокирует отрисовку.
Порядок работ: что делать в первую очередь
Оптимизацию легко превратить в бесконечный процесс. Чтобы этого не случилось, мы идём от самых дешёвых и эффективных мер к более трудоёмким и после каждого шага делаем повторный замер.
- Замер и приоритизация. Берём 5–7 ключевых шаблонов: главная, категория, карточка товара или услуги, статья, контакты. Оптимизировать нужно шаблоны, а не отдельные адреса.
- Сервер и кеш. Включаем сжатие ответов, современный протокол передачи, кеширование страниц и запросов к базе, проверяем версию серверного языка и ресурсы тарифа.
- Изображения. Переводим в современные форматы, генерируем несколько размеров под разные экраны, включаем ленивую загрузку для всего, что ниже первого экрана, и явно задаём размеры, чтобы не было сдвигов.
- Критический путь отрисовки. Выносим стили первого экрана в начало страницы, остальное подгружаем отложенно, скрипты помечаем как асинхронные или отложенные.
- Сторонние виджеты. Проводим ревизию: что реально используется, что можно загружать после первого действия пользователя, а что просто удалить.
- Шрифты. Оставляем 2–3 нужных начертания, подключаем с предзагрузкой и правилом показа запасного шрифта.
В среднем первые три пункта дают 60–70% итогового прироста. Остальное — тонкая настройка, которая важна для конкурентных ниш и для сайтов с большим мобильным трафиком.
Совет студии: не гонитесь за идеальной оценкой в сервисе проверки скорости. Цель — чтобы реальный человек на среднем смартфоне увидел главное за 2–2,5 секунды и мог сразу нажать на кнопку. Балл 100 из 100 на странице без счётчиков и чата — красиво, но бизнесу без аналитики и связи с клиентом он ничего не даёт.
Скорость закладывается на этапе разработки
Исправлять медленный сайт всегда дороже, чем сделать быстрый с самого начала. Когда мы начинаем проект, требования к производительности попадают в техническое задание наравне с функциональностью: целевые значения метрик, лимит веса страницы, правила работы с изображениями для контент-менеджеров.
На этапе дизайна обсуждаем, оправдан ли видеофон на первом экране, нужен ли слайдер из восьми баннеров, который всё равно никто не пролистывает дальше второго, и сколько начертаний шрифта действительно требуется. На этапе вёрстки — используем адаптивные изображения и не тянем тяжёлые библиотеки ради одного эффекта. На этапе программирования — проектируем кеширование и индексы базы под реальный объём каталога, а не под десяток тестовых товаров.
Если вы планируете новый проект, имеет смысл сразу обсудить с подрядчиком эти требования. Подробнее о том, как мы выстраиваем процесс, рассказано в разделе «Как мы работаем».
Как не потерять скорость после запуска
Самый частый сценарий деградации выглядит так: сайт сдали быстрым, а через год он снова грузится пять секунд. Причины прозаичны. Контент-менеджер загружает фотографии без сжатия, маркетолог добавляет третий и четвёртый рекламный пиксель, появляется новый виджет «для теста», который забыли убрать, база растёт, а кеш настроен под старый объём.
- Настройте автоматическое сжатие и изменение размеров изображений при загрузке через админку — так качество не будет зависеть от внимательности сотрудника.
- Подключайте сторонние скрипты через единый менеджер тегов и раз в квартал проводите их ревизию.
- Заведите регулярный мониторинг ключевых шаблонов: раз в неделю или после каждого релиза.
- Следите за отчётом о полевых метриках в панели вебмастера: ухудшение там видно раньше, чем падение позиций.
- Закладывайте проверку скорости в регламент приёмки любых доработок.
Такие задачи удобно включать в регулярное сопровождение: это дешевле, чем раз в два года проводить большую «операцию спасения». Что входит в такой формат работы, описано на странице поддержки сайтов.
Практический чек-лист
Пройдитесь по списку и отметьте пункты, которые у вас уже выполнены. Если отметок меньше половины, у сайта почти наверняка есть запас роста и по скорости, и по конверсии.
- Сервер отвечает быстрее 0,6 секунды на всех ключевых шаблонах, включая страницы с фильтрами.
- Главный элемент первого экрана появляется на мобильном быстрее 2,5 секунды по полевым данным.
- Изображения отдаются в современных форматах и в нескольких размерах, ниже первого экрана — лениво.
- У всех картинок, баннеров и встраиваемых блоков заданы размеры, элементы не прыгают при загрузке.
- Подключено не более трёх начертаний шрифтов, текст виден сразу.
- Сторонние виджеты загружаются отложенно, неиспользуемые удалены.
- Включены сжатие и кеширование, настроен сброс кеша только изменившихся страниц.
- Мониторинг скорости работает регулярно, а не «когда вспомнили».
Скорость — это не разовый проект, а свойство сайта, которое нужно поддерживать так же, как актуальность цен или контактов. Хорошая новость в том, что основные меры известны, проверяемы и дают измеримый результат уже в первые недели.
