Гость открыл карточку. Цифра 4 990 уже на экране, системным шрифтом. Через секунду подгружается дизайнерская кириллица: восьмёрка становится уже, запятая едет, сумма визуально «другая». Человек не читает отчёты про сдвиг вёрстки. Он думает, цена только что сменилась, и закрывает вкладку. В студии то же на блоке «час / слот»: сначала 2 500, потом прыжок — запись бросают, хотя это ещё не визит и не оплата.
Прыжок кнопки в чат после баннера без высоты — соседняя поломка. Здесь цель пальца может стоять на месте. Скачет именно сумма. Сжимают JPEG, меняют хостинг, «уменьшают качество ещё раз». Цифра как прыгала после смены файла шрифта, так и прыгает.
Проблема
Страх «сайт как у всех»: без своего начертания витрина «дешёвая». Жажда красоты на первом экране: три семейства, десять файлов, все на карточку. Стыд перед дизайнером: системный шрифт на секунду выглядит как недоделка. На деле карточка не обязана ждать чужой файл, чтобы показать цену. Пока файл едет, браузер либо прячет текст, либо рисует запасной, потом меняет метрики знаков.
На Битриксе шрифт часто подключают из шапки шаблона и ещё раз из контейнера меток. Композит (сохранённый каркас витрины) отдаёт HTML сразу, а файл шрифта приходит позже — скачок как раз на живой зоне с ценой. TTFB (сервер начал отвечать) тут ни при чём: текст уже приехал. LCP (когда появилось главное фото) тоже может быть зелёным. Краснеет доверие к цифре.
Причина
Запасной шрифт и боевой разной ширины: цифра «8» и «0» после замены занимают другое место, блок цены растёт или сжимается. Табличные цифры в файле и пропорциональные в запасе — сумма «плывёт». Два семейства на одну карточку: заголовок уже свой, цена ещё системная, потом наоборот. В студии стоимость слота в шапке и в форме записи подключают разными файлами — человек видит две суммы на одной услуге.
- Файл с чужого адреса на первый экран: цена ждёт чужой сервер.
- Семь начертаний, из которых на карточке нужны два.
- Цена в картинке «для красоты» плюс живая цифра рядом — после смены шрифта они разъезжаются.
- Мобильный шаблон тянет второй набор файлов. Смотрят оба.
INP (кнопка отозвалась) здесь часто живой: «в корзину» нажимается. Ломается чтение суммы. Человек сравнивает объявление и карточку глазами: если цифра моргнула, он не проверяет учёт — он уходит.
Решение
- Открыть карточку хита и страницу услуги гостем на телефоне. Записать: видна ли цена сразу и прыгает ли она после дорисовки шрифта.
- Оставить два начертания со своего диска. Остальное — системный запас на время загрузки, без смены ширины цифр.
- Запас и боевой файл с близкой шириной знаков, особенно у цифр цены и стоимости слота.
- Убрать второй набор шрифтов из контейнера меток и из мобильного шаблона, если он дублирует шапку.
- Повторить на 360 и на широком: сумма не меняет лицо, кнопка не обязана для этой проверки ехать в чат.
Проверка
Записывают адреса двух страниц, число файлов шрифта в сети, прыгала ли цифра. Останавливаются, когда цена читается сразу и не меняет форму после дорисовки. Не выключают шрифт так, что сумму не разобрать. Не собирают «критический» набор стилей ядра вслепую: ломают кассу и форму записи. Не чинят скачок цены сменой тарифа и не поджимают JPEG вместо метрик цифр. Новый файл начертания без этого прогона на карточку не кладут.
Чек-лист
- Открыть карточку хита и страницу услуги гостем на телефоне. Записать: видна ли цена сразу и прыгает ли она после дорисовки шрифта.
- Оставить два начертания со своего диска. Остальное — системный запас на время загрузки, без смены ширины цифр.
- Запас и боевой файл с близкой шириной знаков, особенно у цифр цены и стоимости слота.
- Убрать второй набор шрифтов из контейнера меток и из мобильного шаблона, если он дублирует шапку.
- Повторить на 360 и на широком: сумма не меняет лицо, кнопка не обязана для этой проверки ехать в чат.
Назад в раздел
