Начните с реальных страниц и устройств
Проверьте главную, ключевую услугу и страницу с самым тяжёлым контентом на обычном мобильном соединении. Средний результат по всему сайту скрывает проблему конкретного шаблона. Сравнивайте замеры до и после изменений.
Изображения
Большая фотография, уменьшенная браузером до маленькой карточки, всё равно может скачиваться в исходном размере. Подготовьте размеры под разные экраны, сжимайте файлы и загружайте изображения ниже первого экрана по мере необходимости. Не прячьте важный текст внутри картинки.
Шрифты и визуальная стабильность
Много начертаний увеличивает загрузку. Если браузер не знает размер изображения или блока заранее, содержимое может сдвигаться во время открытия страницы. Резервируйте размеры и выбирайте небольшой набор шрифтов.
Скрипты и виджеты
Чаты, счётчики, карты и рекламные пиксели часто загружаются раньше нужного пользователю содержания. Проверьте каждый сторонний скрипт: какую пользу он даёт и можно ли отложить его запуск.
Сервер и кэш
Если HTML приходит с задержкой, оптимизация картинки не решит всю проблему. Проверьте время ответа, тяжёлые запросы к базе, кэширование и место размещения сервера относительно аудитории.
Приоритет работ
Исправляйте сначала крупнейший тормоз на важных страницах: основное изображение, блокирующий скрипт или серверный ответ. После каждого шага измеряйте результат. «Поставить оценку 100» — не цель, если реальный пользователь не заметил улучшения.
Мини-аудит за один час
Откройте ключевую страницу на телефоне через обычную мобильную сеть и запишите, что появляется первым. Затем посмотрите размер основных изображений и список внешних скриптов. Если большой фон загружается перед текстом, начните с него. Если страница долго остаётся пустой при небольшом весе файлов, проверьте ответ сервера. Такой порядок помогает не тратить время на мелкие оптимизации до главной причины.
Как избежать обратного эффекта
Удаление всех изображений или шрифтов может ускорить страницу, но ухудшить восприятие продукта. Сохраняйте визуальную иерархию и проверяйте изменения в контексте задачи: стало ли быстрее понятно содержание, можно ли нажать основную кнопку без задержки, не прыгает ли экран. Цифра лабораторного теста — подсказка, а не единственный критерий.
Что передать разработчику
- Адрес проблемной страницы и устройство, на котором заметна задержка.
- Описание симптома: пустой экран, поздний текст, скачок блока или неработающая кнопка.
- Примерное время и условия проверки, включая тип сети.
- Список недавно добавленных виджетов или изображений.
- Приоритет страницы для бизнеса: главная, услуга, каталог или оформление.
Статья помогает сориентироваться. Для точного решения нужно учитывать задачу и ограничения вашего проекта.