На телефоне страница с детскими самокатами открылась, а заголовка и кнопок всё нет? Посмотрите, что появляется последним. Большое фото модели, подключаемый шрифт или меню могут задерживать первый экран, хотя текст уже получен браузером. Такое наблюдение полезнее, чем поспешная смена хостинга или удаление половины сайта.
Для родителя скорость — не абстрактная цифра в отчёте. Перед прогулкой ему может понадобиться быстро сверить высоту руля, тип тормоза или требования к защите. Фотографии колёс, складного механизма и посадки ребёнка при этом тоже нужны: они помогают выбрать самокат для ребёнка от 3 лет. Задача — не убрать снимки, а загрузить их без лишнего ожидания. Сведения о шлеме, защитной экипировке и необходимости присмотра взрослых должны оставаться доступными и при медленном мобильном соединении.
Сначала найдите место задержки
Откройте на телефоне несколько типичных страниц: статью с иллюстрациями, карточку модели и список самокатов. Проверьте их через мобильный интернет, а не только по домашнему Wi-Fi. В инструментах разработчика браузера можно ограничить скорость сети и процессора, затем обновить страницу. Это помогает приблизиться к условиям менее мощного устройства, но не воспроизводит в точности телефон каждого читателя.
Запишите адрес страницы, устройство, тип соединения и время проверки. Сравнивать результаты имеет смысл при одинаковых условиях: на них влияют сеть, кэш и сторонние сервисы. Отметьте, когда появились основной текст и главное фото, а также когда заработали меню и кнопки. Если страница быстро отображается, но медленно реагирует на нажатия, уменьшение фотографии решит лишь часть проблемы.
Автоматический отчёт поможет сузить поиск. LCP показывает, когда появился самый крупный элемент видимой области — часто это главное фото или заголовок. INP связан с отзывчивостью страницы при действиях пользователя, а CLS — с неожиданными сдвигами элементов. Сверяйте показатели с тем, что заметили сами: удачный результат одного теста ещё не означает, что страница удобна на всех устройствах.
Начните с того, что браузер загружает без пользы
Проверьте фотографии по месту использования
Карточке в списке моделей не нужен исходный снимок шириной в несколько тысяч пикселей. Подготовьте варианты для разных экранов и укажите браузеру, какой файл выбрать. WebP или AVIF нередко дают меньший объём, чем исходный JPEG, но всё зависит от фотографии. Сравнивайте файлы при одинаково приемлемом качестве: тормоз и крепления должны оставаться различимыми.
С главным фото правило другое: если оно занимает значительную часть первого экрана, не откладывайте его загрузку. Отложенная загрузка пригодится для снимков ниже по статье и в длинных списках, а здесь может только увеличить ожидание. Задайте ширину и высоту изображения или сохраните его пропорции в оформлении страницы. Тогда текст и кнопки не будут смещаться, пока файл загружается.
Если фотографии уже оптимизированы, не стоит пережимать их ради нескольких килобайт. Лучше проверьте, не открывается ли большая версия снимка вместо миниатюры, не загружает ли тема невидимые изображения и не скачивается ли вся галерея сразу. Можно сначала показывать выбранный кадр, а остальные подгружать по мере необходимости.
Уберите лишние шрифты и эффекты
Загружать обычное и полужирное начертания проще, чем целое семейство шрифтов. Если других вариантов в статье нет, выясните, зачем подключены остальные файлы. Для русскоязычного сайта проверьте и наличие кириллицы в выбранном шрифте. Иначе браузеру может потребоваться дополнительный файл, а текст изменит вид уже после появления на экране.
Анимация при прокрутке, видеозаставка и движущийся баннер нагружают браузер, не всегда помогая читателю. На странице выбора детского самоката статичная схема регулировки руля порой понятнее автоматического видео. Если ролик нужен, не запускайте его без запроса и не загружайте тяжёлый файл, пока человек не решит его посмотреть.
Разгрузите код страницы без риска для её работы
Стили отвечают за внешний вид сайта, скрипты — за работу интерактивных элементов. Чем их больше, тем больше файлов браузеру нужно скачать и обработать. Посмотрите, что подключено именно на проверяемой странице: скрипт сложной галереи не нужен статье с одним снимком, а код формы заказа может быть лишним в правилах катания.
Начните с очевидно ненужного: отключённых виджетов, старых счётчиков, дублирующихся дополнений и неиспользуемых функций темы. Затем, если платформа позволяет, включите сжатие и уменьшение размера файлов CSS и JavaScript. Меняйте настройки по одной и каждый раз проверяйте сайт: автоматическое объединение файлов или отложенный запуск скриптов иногда ломают меню, фильтры и формы.
Особенно берегите элементы, от которых зависит понимание важной информации. Вкладка с подбором самоката по росту должна открываться при нажатии. Предупреждение о защитной экипировке не должно зависеть от необязательного виджета. Ради скорости нельзя скрывать от родителей сведения о защите и присмотре взрослых.
Отложите то, что не требуется сразу
Длинные блоки рекомендаций, встроенные видео и дополнительные карточки ниже первого экрана можно загружать по мере прокрутки. А заголовок, основной текст, навигация и ключевые действия должны быть доступны сразу. Проверьте, не оставляет ли отложенный блок пустоту без пояснения и не сдвигает ли текст, когда появляется.
Сторонние сервисы — чат, карту или форму подписки — проверяйте отдельно: они могут отправлять много запросов и замедлять страницу. Редко используемый чат можно загружать после нажатия на кнопку. Для маршрута катания сначала может хватить текстового описания площадки; интерактивную карту посетитель откроет по запросу.
Настройте повторное посещение и ответ сервера
Кэш помогает не собирать одну и ту же страницу заново при каждом запросе и не скачивать повторно неизменные файлы. Обычно можно включить кэш страниц для посетителей, а для изображений, шрифтов и стилей задать срок хранения в браузере. Но правила для общедоступной статьи нельзя бездумно переносить на корзину, состояние заказа или страницы с персональными данными. Если есть сомнения, обсудите настройку с тем, кто обслуживает сайт.
После правки файла браузер должен получить его новую версию. Для этого обычно используют адрес с версией или меняют имя файла при обновлении. Иначе посетитель может видеть старое оформление, хотя статья и изображения уже исправлены. Проверьте страницу в обычном окне и без сохранённого кэша: эти просмотры отвечают на разные вопросы.
Если даже простая страница без тяжёлых фотографий долго ждёт первого ответа, проверьте сервер. Причиной могут быть перегруженные плагины, медленные запросы к базе данных, нехватка ресурсов или неудачная настройка кэша. Смена хостинга иногда нужна, но сначала стоит разобраться с причиной: перенос тяжёлых дополнений на другой сервер сам по себе может мало что изменить.
Проверьте путь родителя, а не только главную страницу
Главная может открываться быстро, пока список самокатов с фильтрами тормозит на телефоне. Пройдите путь читателя: откройте статью о подборе, перейдите к списку, выберите возраст или рост, откройте карточку и вернитесь назад. Запишите, где пришлось ждать и сохранились ли выбранные параметры. Разовый тест одной страницы этого не покажет.
В списке посмотрите, сколько карточек загружается одновременно. Если моделей много, постраничный показ или постепенная подгрузка сократят первоначальное ожидание. При этом следующую порцию моделей должно быть легко найти, а возврат назад не должен сбрасывать фильтры. Не прячьте ради скорости важные характеристики: тип тормоза, диапазон регулировки руля и возрастные ограничения.
Со статьёй сценарий иной: читатель может прийти из поиска сразу к нужному разделу или снова открыть материал во время покупки. Проверьте, читаются ли подзаголовки без декоративного шрифта, есть ли у изображений необходимые для понимания подписи и видны ли данные таблицы размеров без сложного скрипта. Если после ускорения эти сведения стало труднее получить, правку стоит пересмотреть.
Порядок работ, если времени мало
- Выберите одну медленную страницу. Запишите условия проверки и сохраните исходные результаты. Не сравнивайте карточку модели с главной: у них разный состав.
- Разберитесь с самым тяжёлым ресурсом первого экрана. Это может быть фото, шрифт или сторонний скрипт. Убедитесь, что правка не ухудшила читаемость и работу страницы.
- Проверьте ненужные запросы. По одному отключайте дополнения, которые не дают посетителю ничего полезного. После каждой правки проверяйте меню, фильтры и формы.
- Настройте повторную загрузку. Проверьте кэш общедоступных страниц и статических файлов, не применяя те же правила к персональным разделам без отдельной настройки.
- Повторите тест в тех же условиях. Сравните цифры отчёта, время появления текста и фотографий, а также реакцию кнопок на телефоне.
Если технические настройки вам незнакомы, перед изменением темы или плагинов сохраните резервную копию и запишите прежние значения. Так будет легче понять, какая правка помогла, а какую нужно отменить. Не включайте все переключатели «ускорения» разом: потом трудно найти причину сломанного фильтра или пропавшей фотографии.
Для первой проверки возьмите страницу с тремя-четырьмя фотографиями самоката. Откройте её на телефоне, запишите размер главного файла и время появления снимка, затем подготовьте версию под фактическую ширину блока. После замены повторите проверку в прежних условиях. И обязательно посмотрите само фото: тормоз, колёса и крепления по-прежнему должны быть различимы.
