Почему сайт тормозит, хотя «всё уже оптимизировали»

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

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

«Быстро» — это три разных вопроса

Когда человек говорит «сайт тормозит», он может иметь в виду разное:

• после перехода долго ничего не видно;
• страница видна, но на нажатия отвечает с задержкой;
• содержимое прыгает, пока всё догружается.

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

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

Скрипты, о которых все забыли

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

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

Что делать: составить список всего, что подгружается со сторонних сервисов, и по каждому пункту ответить, кто им пользуется и зачем. Лишнее — убрать. Нужное — подключать позже основного содержимого или только когда посетитель до него дошёл: карту — при прокрутке к блоку, чат — через несколько секунд после загрузки.

Тяжёлый интерфейс на лёгкой странице

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

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

Прыгающая вёрстка

Третья причина раздражает сильнее всего, хотя формально страница уже загрузилась. Человек тянется нажать «Выбрать квартиру», а в этот момент сверху догружается баннер, всё съезжает вниз, и палец попадает не туда.

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

Хостинг и кэш — не волшебная кнопка

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

С чего начать

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

Сайт ускоряют не общей «оптимизацией», а поиском конкретной причины. Пока причина не названа, работа идёт вслепую.

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