Сначала выясните, где возникает задержка: до ответа сервера, при появлении основного содержимого или уже при нажатиях. Затем исправьте главный источник проблемы и повторите проверку в тех же условиях. Начинать с удаления всего подряд я бы не стал: можно облегчить страницу и одновременно сломать заявку или аналитику.
Ощущение «сайт медленный» вполне реальное, но для работы его нужно уточнить. Главная долго открывается? Каталог зависает после выбора фильтра? На телефоне текст уже есть, а нажать кнопку нельзя? У этих ситуаций разные причины.
Зафиксируйте страницу и условия
Выберите адрес и действие, на котором заметна проблема. Запишите устройство, браузер, сеть, регион и время. Отдельно смотрите первое открытие и повторное: сохранённые файлы в кэше могут сильно менять картину.
Проверьте несколько важных типов страниц. Быстрая главная не гарантирует удобство тяжёлой категории с фотографиями и фильтрами. Для магазина оформление заказа обычно важнее малопосещаемого информационного раздела.
Для первого инструментального теста можно открыть PageSpeed Insights и проверить выбранный адрес. Сохраните результат и условия запуска: он пригодится для сравнения после исправления. Данные реальных посетителей, если они доступны в достаточном объёме, показывают другие условия. Один хороший запуск теста не подтверждает скорость для всех пользователей.
Отделите ожидание сервера от работы браузера
Если долго ждёте первые данные страницы, проверьте сеть и цепочку перенаправлений, а затем формирование страницы, запросы к базе, внешние обращения и кэширование. Сжатие картинки не устранит ожидание, которое возникает ещё до получения HTML.
Если ответ быстрый, а важное содержимое появляется поздно, посмотрите порядок загрузки ресурсов. Возможно, основная фотография обнаруживается слишком поздно или её ждут после лишнего скрипта. Если задержка появляется при нажатиях, ищите работу, которая надолго занимает браузер.
В web.dev для этого разделяют разные показатели. LCP связан с появлением крупнейшего видимого содержимого, а INP — с отзывчивостью на взаимодействия. Не стоит называть уменьшение файла улучшением сразу всех этих показателей без измерения.
Опишите задержку через конкретное действие. Медленный ответ сервера и зависание при выборе фильтра требуют разных проверок; одно уменьшение фотографии не решает обе проблемы.
Проверьте картинки там, где они действительно видны
Сопоставьте размер изображения с местом показа. Для небольшой карточки на телефоне исходник огромной ширины часто избыточен. Подготовьте подходящие размеры и форматы, проверьте выбор браузера и качество деталей.
Картинки ниже первого экрана можно загружать по мере приближения к ним. Основное изображение первого экрана откладывать таким способом обычно не нужно: это способно задержать появление важного содержимого. Официальные рекомендации web.dev отдельно предостерегают от отложенной загрузки изображения LCP.
Укажите размеры или соотношение сторон, чтобы браузер заранее оставил место. После оптимизации посмотрите не только вес, но и кадрирование. В мебельном каталоге нельзя ради экономии случайно спрятать часть товара.
Посмотрите на шрифты, скрипты и кэш
На новом svalmak.ru мы заменили файл шрифта TTF размером 184 292 байта на WOFF2 размером 61 912 байт. Сам файл стал примерно на 66% меньше. Это конкретное изменение объёма передачи, а не обещание ускорить всю страницу на 66%.
Для шрифтов проверьте нужные начертания, отображение текста до загрузки и отсутствие лишних скачиваний. Для скриптов — назначение и влияние на первые действия пользователя. Удалять счётчик только потому, что он внешний, было бы сомнительной оптимизацией бизнеса.
Версионированные статические файлы удобно надолго кэшировать: новый выпуск получает новый адрес. Для HTML нужен иной порядок обновления, чтобы человек видел актуальную страницу. Настройку проверяют по ответам сервера, а не по наличию строки в конфигурации.
Выберите исправления по наблюдаемой причине
| Что видно при проверке | Первый участок для разбора | Как проверить результат |
|---|---|---|
| Долго ждём первый ответ | Сервер, база, внешние запросы | Сравнить ожидание при тех же условиях |
| Поздно появляется основное фото | Размер, обнаружение, приоритет загрузки | Сравнить момент появления и качество |
| Интерфейс замирает при выборе | Длительная работа скриптов | Повторить то же действие и проверить отклик |
| Содержимое прыгает | Не задано место для ресурсов | Просмотреть загрузку и смену состояния |
Таблица даёт направление проверки, а не готовый диагноз. Не все задержки исправляются одним плагином или переводом картинок в другой формат.
Повторите замер и рабочий сценарий
После изменения повторите несколько запусков в сопоставимых условиях. Сохраните исходные и новые результаты. Смотрите на изменённый участок, а не только на итоговый балл.
Затем откройте сайт на телефоне: меню, каталог, корзина, форма и важные переходы. Проверьте получение тестового обращения и работу нужной аналитики. Быстро показанная страница с неработающей кнопкой задачу не решает.
Для svalmak.ru такой выпуск включал оптимизацию файлов и проверку рабочей страницы. Подробности есть в разборе редизайна. Если сайт тормозит и непонятно, за что браться, можно обсудить диагностику.
После изменения файлов снова пройдите меню и путь к обращению. Наличие картинки и кнопки на снимке не подтверждает скорость: сравнение времени нужно делать отдельными повторными замерами.