Скачки макета: как заранее резервировать место
Разбираем изображения, шрифты и динамические вставки, из-за которых элементы неожиданно сдвигаются.
Зачем это нужно
Когда содержимое появляется поздно и раздвигает соседние элементы, читатель теряет место, а кнопка может уйти из-под курсора. Причина часто в том, что страница не зарезервировала место для ещё не загруженного блока.
Задайте пропорции медиа
Width и height у изображения помогают вычислить соотношение сторон заранее. Для собственных областей можно использовать aspect-ratio. Значения должны соответствовать реальному ресурсу, иначе после загрузки всё равно возможна перестройка.
Следите за динамическими вставками
Не добавляйте большой баннер над уже читаемым материалом без заранее выделенной области. Для состояния загрузки подберите размер, близкий к конечному компоненту, но не создавайте ложное впечатление готового результата.
Проверьте шрифты
Запасной и основной шрифт могут иметь разные метрики. После замены меняются переносы и высота. Выбирайте совместимый стек и измеряйте реальное поведение на холодной загрузке.
Важное ограничение
Контрольная проверка
- У медиа заранее известны пропорции.
- Поздняя вставка не толкает основной материал.
- Шрифты проверены при холодной загрузке.
- Текст может расти без обрезки.
Продолжить изучение: aspect-ratio, веб-шрифты.