Рецепт ризотто открыт на телефоне: заголовок уже виден, но крупное фото ещё загружается, рекламный блок сдвигает текст, и добраться до ингредиентов трудно. Даже точно выверенный рецепт в такой момент легко закрыть. Для кулинарной страницы важна не только скорость появления заголовка, но и время, через которое ею можно пользоваться.
Что именно замечает посетитель
Страница появляется по частям: сначала заголовок, потом текст, фотографии и кнопки. Одного замера в секундах мало. Нужно смотреть, виден ли основной материал, не скачет ли текст и отвечает ли страница на касания.
- Позднее появление главного содержимого. Фото блюда или первый абзац ещё не видны, и непонятно, стоит ли ждать рецепт.
- Сдвиги макета. Читатель тянется к строке ингредиента, а её сдвигает подгрузившееся выше изображение.
- Задержка реакции. Страница выглядит готовой, но кнопка перехода к рецепту или раскрывающийся список не срабатывает сразу.
Каждая из этих проблем мешает по-своему. Если материал долго не появляется, человек может уйти, так и не начав читать. Сдвиги сбивают при прокрутке, а задержка кнопки не даёт открыть карточку блюда. Долгое время во вкладке, впрочем, не обязательно означает, что читать удобно: посетитель мог оставить рецепт открытым и уйти за продуктами.
Изображения: аппетитность без ожидания
Фотографии пасты, сыра и десертов помогают выбрать блюдо, но нередко занимают большую часть объёма страницы. Передавать на узкий экран телефона исходный кадр шириной в несколько тысяч пикселей незачем. Лучше подготовить изображения разного размера, выбрать подходящий современный формат и сжать файлы так, чтобы фактура блюда оставалась различимой.
Фото в начале страницы должно появляться вовремя. Снимки этапов приготовления ниже по тексту обычно можно загружать по мере прокрутки. Их размеры стоит заранее указать в разметке: тогда кадр не сдвинет инструкцию при появлении. Возле пронумерованных шагов это особенно важно — к ним постоянно возвращаются взглядом во время готовки.
Сервер, шаблон и сторонние элементы
Почему ожидание начинается до фотографий
Когда сервер отвечает долго, браузер поздно получает даже текст. Причиной бывают тяжёлые запросы к базе данных, настройки кэширования или перегруженный хостинг. Рецепты меняются редко, поэтому их обычно удобно отдавать из кэша. Но после исправления количества ингредиентов или шага приготовления кэш нужно обновить, иначе читатель увидит старую версию.
Дальше браузер обрабатывает стили и сценарии. Обилие декоративных шрифтов может задержать появление текста, а сценарии галерей, всплывающих окон и анимаций — занять ресурсы телефона и мешать прокрутке. Если интерактивный элемент находится внизу, читателю не нужно ждать его загрузки, прежде чем прочитать первый абзац.
Встроенные публикации и другие сторонние элементы тоже требуют запросов, скорость которых редакция не всегда контролирует. На странице ресторана меню, часы работы и адрес должны оставаться доступными, даже когда внешний виджет загружается медленно. Здесь обычный текст надёжнее оформления, от которого зависит доступ к важной информации.
Как скорость меняет сценарии чтения
У страниц разные задачи. В рецепте сначала ищут время приготовления и продукты, а потом возвращаются к шагам у плиты. В материале о сыре хочется сразу увидеть различия сортов и условия хранения. На странице ресторана задержка меню может оборвать выбор заказа. Поэтому порядок загрузки стоит определять с учётом содержимого, а не задавать один для всех шаблонов.
На телефоне проблемы заметнее: связь бывает нестабильной, а памяти у устройства может быть немного. Галерея, которая плавно листается на редакторском компьютере, на обычном смартфоне способна тормозить. Проверка только в офисной сети этого не покажет.
Какие показатели смотреть вместе
Технические замеры помогают искать причину задержки. В отчётах о производительности смотрят, когда появляется крупнейший видимый элемент, насколько сдвигается макет и как быстро страница реагирует на действие. Эти данные полезно сопоставлять с поведением посетителей отдельно для телефонов и компьютеров: долей ранних уходов, переходами к рецепту, просмотрами меню. Если показатель изменился, дело не обязательно в скорости — повлиять могли заголовок, сезонность или источник перехода.
Порядок работы без потери качества публикации
- Выберите типовые страницы. Проверьте рецепт с несколькими фотографиями, обзор блюда и страницу с меню, а не только главную.
- Найдите место задержки. Отдельно оцените ответ сервера, появление основного текста, загрузку изображений и реакцию кнопок.
- Начните с того, что сильнее мешает. Подготовьте фото нужных размеров, отложите необязательные сценарии, проверьте кэш.
- Проверьте ещё раз. Откройте страницы на телефоне при обычной мобильной связи и убедитесь, что подписи, ингредиенты и инструкции не сдвигаются.
Ради хорошего результата теста не стоит убирать то, что помогает готовить. Чёткий снимок степени обжарки мяса или консистенции ризотто полезен; важно лишь не передавать его чрезмерно большим файлом. Сведения об аллергенах, если они предусмотрены, должны оставаться рядом с рецептом. Инструкции по безопасному приготовлению мяса тоже нельзя прятать за вкладкой, которая плохо открывается.
Для первой проверки откройте на смартфоне самый посещаемый рецепт, предварительно очистив кэш браузера. Засеките не окончание всех сетевых запросов, а момент, когда можно спокойно прочитать ингредиенты и открыть первый шаг. Если в это время фото обложки сдвигает текст вниз, начните с размера файла и места, отведённого изображению в макете.
