Страница появилась, человек начал читать, а через секунду заголовок занял дополнительную строку и сдвинул кнопку. Причиной может быть замена запасного шрифта основным. Но похожее поведение вызывают и поздний баннер, картинка без размеров или вставка виджета, поэтому сначала нужно подтвердить конкретную связь.
Чтобы проверить причину, сопоставьте время загрузки шрифта с переносами строк и движением кнопки. Возьмём страницу услуги с большим заголовком. Поправки для запасного шрифта подбирайте по измерениям этой страницы: для другого начертания или языка значения могут отличаться.
Повторите первое открытие без кеша
Проверьте узкий экран, на котором заголовок близок к границе переноса. Небольшая разница ширины букв способна добавить целую строку и переместить всё ниже. На широком экране тот же шрифт может менять только промежутки, поэтому отсутствие видимого сдвига в одном размере не закрывает проблему.
Не подменяйте сценарий искусственным отключением всех стилей. Нужно воспроизвести действующую загрузку страницы и затем отдельно проверить гипотезу. Снимок до и после полезен для объяснения, но сам по себе не указывает причину; её устанавливают по последовательности событий.
Сравните сдвиг и момент загрузки шрифта
Проверьте другие изменения в тот же момент. Если одновременно появилась форма согласия или загрузился баннер, связь со шрифтом пока не доказана. Для сравнения заблокируйте только файл шрифта в Network request blocking своего DevTools и перезагрузите страницу. Если сдвиг исчез, продолжайте проверять замену шрифта. Затем снимите блокировку; настройки рабочего сайта этот опыт не меняет.
В руководстве по CLS описаны причины нестабильности и особенности измерения. Для задачи важно приложить собственную трассировку: общий совет «оптимизировать шрифты» не объясняет, почему именно этот заголовок изменил число строк.
Посмотрите используемые начертания
Проверьте жирный текст отдельно. Шрифт для обычного начертания и файл для заголовков могут загружаться в разное время. Синтезирование веса браузером либо неверное сопоставление файла с font-weight добавляет ещё одно различие. Запишите реально используемое начертание, а не только имя семейства в CSS.
Сопоставьте высоту строк, ширину характерных фраз и число переносов. В заголовке «Монтаж вентиляции для офисов» важен не отдельный символ, а итоговая высота блока. Та же проверка для короткой кнопки выявит изменение её ширины и положение соседних элементов.
В Chrome откройте Network, фильтр Font, и перезагрузите страницу с Disable cache. Затем выберите заголовок в Elements → Computed → Rendered Fonts. Сравните до и после загрузки: семейство, вес, число строк и положение кнопки. Если вместе со шрифтом появился баннер, найдите источник сдвига в записи Performance.
Проверьте font-display
Описание вариантов доступно в документации MDN по font-display. Сравните подходящие варианты на тестовой копии: swap быстро показывает запасной шрифт, но допускает позднюю замену; optional может оставить запасной шрифт, если основной не успел загрузиться. Проверьте, приемлем ли такой результат для вашего дизайна. Отсутствие замены в одном прогоне может означать использование запасного шрифта, а не ускорение основного.
Не назначайте предварительную загрузку всем файлам семейства без разбора. Главному экрану может требоваться одно начертание, а остальные используются ниже или на других страницах. Избыточные приоритетные запросы конкурируют с другими важными ресурсами. Проверяйте, какие файлы действительно участвуют в первом отображении.
Подберите метрики запасного шрифта
Проверьте несколько текстов: длинный заголовок, короткую кнопку, абзац и строку с цифрами. Настройка, которая совпала на одной фразе, может испортить другую. В справке MDN по size-adjust описано назначение дескриптора; окончательный подбор требует проверки ваших символов и начертаний.
Сохраните читаемость. Уменьшение строки до нужной высоты не является успехом, если буквы стали тесными или обрезаются. Не прячьте проблему фиксированной высотой заголовка без проверки длинного текста: такое решение может скрыть часть предложения на телефоне или при увеличенном масштабе.
Проверьте длинный текст и масштаб
| Сценарий | Что наблюдаем |
|---|---|
| Холодное первое открытие | Читаемость текста и момент возможной замены |
| Узкий экран | Число строк заголовка и положение кнопки |
| Увеличенный масштаб | Отсутствие обрезки и перекрытий |
| Недоступный файл шрифта | Рабочий запасной вариант без потери содержания |
| Длинное название услуги | Устойчивость макета за пределами короткого примера |
Проверьте меню, поля формы и цены: изменение метрик влияет не только на основной заголовок. Не устанавливайте фиксированную ширину всем кнопкам ради одной строки, если это ломает перевод или длинную подпись. Кнопки должны сохранять читаемые подписи, а поля — не перекрывать соседний текст.
Отдельно проверьте возврат на страницу и повторное открытие с кешем. Эти сценарии показывают, что новая стратегия не ухудшила обычную навигацию. Разница между холодной и повторной загрузкой допустима, но в обоих состояниях интерфейс должен оставаться читаемым и управляемым.
Проверьте длинный заголовок без обрезки
Повторная запись Performance не показывает прежний сдвиг от замены шрифта. Длинное название услуги, кириллица и кнопка читаются на узком экране и при увеличенном масштабе. При недоступном файле запасной шрифт сохраняет содержание.
Читайте также: Как убрать сдвиги страницы, Core Web Vitals, Технический аудит.