Сайт долго грузится: что чинить в первую очередь

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

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

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

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

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

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

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

Второй — насколько быстро сайт отвечает на действие. Человек нажал кнопку, открыл меню, развернул блок вопросов — сколько проходит до реакции. Норма — до двухсот миллисекунд. Эта метрика сравнительно новая: раньше оценивали только первое касание, теперь смотрят на все взаимодействия за время визита.

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

Где смотреть. У Google это PageSpeed Insights, у Яндекса — раздел скорости в Вебмастере. Важная деталь: в отчётах бывают два типа данных — замер в идеальных условиях и данные реальных посетителей. Ориентироваться стоит на вторые, потому что ваши клиенты сидят не на тестовом сервере, а на мобильном интернете в маршрутке.

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

Это и называется смещением макета. Происходит оно, когда элементы страницы загружаются не одновременно, и у поздних нет заранее зарезервированного места. Браузер вынужден подвинуть всё остальное.

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

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

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

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

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

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

Хостинг. Если сервер отвечает медленно, всё остальное уже не важно: браузер ждёт первого байта и ничего не может нарисовать.

Шрифты и стили. Нестандартные шрифты грузятся отдельными файлами, и если не настроить порядок загрузки, текст либо не виден, либо прыгает при подмене шрифта.

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

Проверить распределение просто: в отчёте PageSpeed видно, что именно весит больше всего. Обычно там и находится ответ.

Хорошая новость: часть работы не требует разработчика вообще.

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

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

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

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

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

Собираем в последовательность.

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

Дальше возьмитесь за картинки, потому что это обычно половина веса. Затем пройдитесь по сторонним скриптам и уберите лишнее. После этого замерьте снова и сравните с первым результатом — так видно, что реально помогло.

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

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

Разберём вашу ситуацию бесплатно: замерим скорость, покажем, что именно тормозит, и скажем, чинить или переделывать → оставить заявку