При медленном сайте сначала проверяют тяжёлые изображения, сторонние скрипты и время ответа сервера. Иногда эти причины устраняются локально, иногда упираются в архитектуру или платформу — срок определяет диагностика. Начинать стоит не с покупки более дорогого хостинга, а с замера: без цифр «до» невозможно доказать, что стало лучше.
Скорость — это не один балл в отчёте, а время до момента, когда посетитель видит содержимое и может нажать кнопку. Владельцу бизнеса полезнее смотреть на 2 вещи: сколько секунд проходит до появления главного экрана и не прыгает ли вёрстка под пальцем. Остальное — техника, которую делает подрядчик по понятному списку.
Что такое скорость сайта и как её измерить#
Скорость измеряют в 2 плоскостях. Лабораторные тесты прогоняют страницу на эталонном устройстве и дают воспроизводимый результат, который удобно сравнивать до и после правок. Полевые данные собираются у реальных посетителей и показывают, как сайт ведёт себя на слабых телефонах и в мобильной сети. Решения принимают по полевым данным, а причины ищут в лабораторных.
Главная метрика для владельца — время появления самого крупного элемента первого экрана: заголовка, баннера, фотографии товара. Порог, который считается хорошим, устанавливают не вы и не подрядчик, а поисковые системы, и они его периодически пересматривают, поэтому целевое значение берут из справки того инструмента, которым делают замер, на момент работ, и записывают в задачу вместе с датой. Рядом стоят отзывчивость на нажатие и стабильность вёрстки: если кнопка уезжает вниз в момент касания, посетитель попадает не туда, куда целился, и уходит.
Порядок замера простой. Прогоните через любой публичный инструмент замера скорости 3 типа страниц: главную, карточку товара или услуги и страницу с формой заявки. Отдельно мобильную версию, отдельно десктопную. Сохраните отчёты, это ваша точка отсчёта. Смотрите не на общий балл, а на секунды и на список того, что инструмент предлагает исправить.
Что чаще всего тормозит сайт на практике#
Изображения. Фотография с телефона весит несколько мегабайт, а в макете занимает полосу шириной в пол-экрана. Браузер честно скачивает оригинал и уменьшает его уже при отрисовке. На мобильном интернете это те самые секунды ожидания. Признак: страница «дособирается» сверху вниз, картинки проявляются рывками.
Сторонние скрипты. Онлайн-чат, виджет обратного звонка, счётчики, пиксели рекламных кабинетов, карта на странице контактов. Каждый тянет свой код с чужого сервера, и ваша страница ждёт ответа. Если чужой сервер отвечает медленно, тормозит ваш сайт, а не его.
Медленный ответ сервера. Между кликом и первым байтом ответа проходит время: сервер выполняет код, ходит в базу, собирает страницу. На дешёвом тарифе с сотнями соседей это растягивается. Признак — даже простая страница без картинок открывается с задержкой, а вечером хуже, чем утром.
Тяжёлый шаблон и лишние расширения. Универсальная тема тянет за собой конструктор блоков, слайдеры, наборы иконок и шрифтов, даже если на конкретной странице их нет. Сюда же выключенное кеширование: сервер каждый раз собирает одну и ту же страницу заново вместо того, чтобы отдать готовую копию.
Порядок работ: с чего начинать ускорение#
Шаг 1 — изображения. Пересохранить в современный формат, отдавать под размер блока, а не оригинал, включить отложенную загрузку для всего, что ниже первого экрана. Одна эта работа обычно даёт больше, чем всё остальное вместе, и не требует вмешательства в логику сайта.
Шаг 2 — ревизия скриптов. Выпишите все внешние сервисы и напротив каждого укажите, кто им пользуется и когда последний раз открывал отчёт. Всё, у чего нет ответственного, отключается. Оставшееся грузится отложенно: чат и виджеты не нужны в первую секунду после открытия страницы.
Шаг 3 — кеш и сервер. Включите кеширование страниц и сжатие ответов, проверьте время до первого байта на нескольких адресах. Если оно упорно высокое, дело в тарифе или в самой площадке, и тогда обсуждают перенос сайта на более быстрый хостинг. Переезд ради скорости оправдан только после первых 2 шагов.
Шаг 4 — шрифты и первый экран: фиксированные размеры блоков под картинки и баннеры, чтобы содержимое не прыгало, и не больше 2 начертаний шрифта. Шаг 5 — повторный замер по тем же страницам, тем же инструментом. Если цифры не сдвинулись, чинили не то место, и продолжать по списку бессмысленно.
Как поставить задачу и принять работу#
Задача «ускорьте сайт» не принимается и не оплачивается по результату, потому что результат в ней не описан. Рабочая формулировка состоит из 3 частей: что меряем, на каких страницах и до какого значения. Например: время появления первого экрана на мобильном для главной и карточки товара — не хуже целевого значения, которое вы взяли из справки инструмента замера и приложили к задаче. Универсальной цифры тут нет: у большого каталога и у одностраничного лендинга разные исходные условия, поэтому цель считают от себя — берут собственный результат «до» и назначают, до какого значения его нужно довести к сдаче.
К задаче приложите отчёты «до» и перечень страниц. Попросите исполнителя вернуть не только правки, но и объяснение, что он сделал и почему. Общий формат описан в материале про постановку задачи разработчику; для скорости добавьте, что дизайн и тексты менять нельзя.
Приёмка. Замер повторяется на тех же страницах, тем же инструментом, в те же часы. Отдельно проверьте руками: открывается ли сайт на телефоне в мобильной сети, отправляются ли формы, не отвалился ли счётчик аналитики. Ускорение, сломавшее приём заявок, обходится дороже медленного сайта.
Что стоит запретить прямо в задаче: правки, после которых сайт нельзя редактировать без программиста, и отключение аналитики ради балла. Балл в тесте не цель, он лишь удобный ориентир. Цель — чтобы посетитель со слабым телефоном увидел предложение и без задержки дошёл до кнопки заявки.
Вывод: как удержать скорость сайта надолго#
Скорость не чинится один раз. Она возвращается к прежнему состоянию через полгода, когда маркетолог поставил ещё 2 пикселя, контент-менеджер загрузил фотографии прямо с камеры, а подрядчик подключил новый виджет. Поэтому за скоростью закрепляют ответственного и правило: новый внешний сервис ставится только после замера до и после.
Минимальный регламент состоит из 3 пунктов. Замер тех же страниц раз в квартал с записью цифр в один файл. Требование к картинкам: предельная ширина и вес, зафиксированные в инструкции для тех, кто наполняет сайт. Ревизия сторонних скриптов раз в полгода с отключением всего, чем никто не пользуется.
Начать стоит с малого: выбрать несколько типовых страниц, прогнать их через тест и сохранить отчёт. После каждой группы изменений повторить замер в сопоставимых условиях. Такой порядок показывает фактический эффект, а разговор с подрядчиком про сервер и код становится предметным.