Устранение скачков макета: самые частые причины
Скачущий макет — это ошибка, которую посетители ощущают сильнее всего, а разработчики видят реже всего: на быстром компьютере с заполненным кэшем ничего не прыгает. Шесть причин покрывают почти все случаи.
Самое важное вкратце
- Шесть причин покрывают почти все случаи — изображения без размеров, подгружаемые шрифты, встроенное чужое содержимое, всплывающие после загрузки уведомления, поздно загруженный CSS и динамически вставленное содержимое.
- На собственном компьютере значение регулярно измеряется слишком хорошим: быстрое соединение, заполненный кэш, другой размер экрана.
- Самая действенная отдельная мера — задать каждому изображению и каждому встроенному элементу фиксированные размеры или соотношение сторон.
- Полоса уведомления, которая появляется после загрузки и сдвигает содержимое вниз, — вторая по частоте причина и при этом самая простая для устранения.
Шесть причин
1. Изображения без указания размеров
Без width и height браузер не знает, сколько места зарезервировать — текст сдвигается, как только приходит изображение.
Устранение: задать оба атрибута и добавить в CSS height: auto, чтобы масштабирование сохранялось.
2. Подгружаемые шрифты
Текст сначала появляется в запасном шрифте и прыгает при замене, потому что оба идут с разной шириной.
Устранение: загружать шрифт заранее, font-display: swap и подогнать размеры запасного шрифта под целевой.
3. Встроенное чужое содержимое
Видео, карты, виджеты отзывов приходят без известной высоты и при появлении сдвигают всё вниз.
Устранение: задать заполнитель с фиксированным соотношением сторон, в который загружается содержимое.
4. Всплывающие после загрузки уведомления
Баннер согласия или акционная полоса, которая после загрузки появляется сверху и сдвигает всю страницу вниз.
Устранение: зарезервировать место с самого начала или показывать поверх содержимого, а не сдвигая его.
5. Поздно загруженный CSS
Если таблица стилей вступает в силу лишь после первой отрисовки, страница один раз показывается без оформления, а затем оформленной.
Устранение: доставлять правила, необходимые для видимой области, рано — полностью, а не по частям.
6. Динамически вставленное содержимое
Уведомление, список или блок, который JavaScript вставляет после загрузки поверх существующего содержимого.
Устранение: вставлять ниже видимой области или резервировать место.
А ты знал?
Причина пятая самая коварная, потому что локально почти никогда не проявляется: при быстром соединении таблица стилей приходит до первой отрисовки, и ничего не прыгает. При медленном соединении она приходит после — и вся страница отрисовывается дважды.
Доставить часть CSS заранее при этом недостаточно: если в ней не хватает правила, касающегося видимой области, прыгает именно этот элемент. Либо полностью для видимой области, либо совсем никак — половинчатые решения здесь хуже, чем никакие.
Как измерять правильно
| Способ измерения | Что он показывает | Подводный камень |
|---|---|---|
| Собственный компьютер, инструменты разработчика | грубые подсказки | слишком быстро, кэш заполнен |
| Лабораторный тест в проверочном инструменте | воспроизводимое значение | одно условие, а не реальность |
| Полевые данные реальных посетителей | что происходит на самом деле | нужно достаточно трафика |
| Мобильное устройство с замедленным соединением | самый честный отдельный тест | нужно осознанно настроить |
Случай, который запоминается: страница имела локально безупречное значение и очень плохое в проверочном инструменте. Причиной оказалась частично заранее доставленная таблица стилей — в ней не хватало трёх правил для блоков в видимой части.
Локально это никогда не замечалось, потому что полный файл приходил быстрее, чем первая отрисовка. При замедлении он приходил после, и три блока прыгали. Урок: при скачущих макетах локальное впечатление не опровержение, а просто другой сценарий — и чаще всего менее реалистичный.
Порядок устранения
- Проверить все изображения.
widthиheightзаданы, в CSSheight: auto. Обычно это половина проблемы. - Обрамить встроенное чужое содержимое. Заполнитель с фиксированным соотношением сторон.
- Проверить всплывающие уведомления. Поверх содержимого, а не сдвигая его.
- Проверить загрузку шрифтов. Загружать заранее, подогнать запасной шрифт.
- Проверить доставку CSS. Полностью для видимой области.
- Измерить снова — с замедлением. И именно после каждого отдельного шага, иначе не узнаешь, что сработало.
Помоги мне найти и устранить скачки макета на нашей странице. Данные: - Измеренное значение сдвига макета: [значение, инструмент, мобильное или десктоп] - Элементы, которые по измерению смещаются: [список, если известен] - Изображения с атрибутами width/height? [да / нет / частично] - Как доставляется CSS? [внешний файл / встроен заранее / частично заранее] - Встроенное чужое содержимое: [видео, карты, отзывы, чат] - Появляется ли что-то после загрузки? [баннер, уведомление, акционная полоса] - Как загружаются шрифты? [данные] Задачи: 1. Отнеси каждый смещающийся элемент к одной из шести причин: изображения без размеров, подгружаемые шрифты, встроенное чужое содержимое, всплывающие после загрузки уведомления, поздно загруженный CSS, динамически вставленное содержимое. 2. Назови по каждой причине конкретное устранение с примером кода. 3. Если CSS доставляется заранее лишь частично: объясни, почему это может быть хуже, чем совсем никак, и что нужно проверить. 4. Дай мне порядок по соотношению эффекта к усилию. 5. Скажи, как мне измерять после каждого шага, чтобы я знал, что сработало. Не выдумывай измеренных значений.
Вывод
Шесть причин, и первая — изображения без указания размеров — обычно составляет половину. Она устраняется за полчаса и действует сразу.
Сложнее измерение: кто проверяет локально, измеряет сценарий, который почти никто из посетителей не переживает. Измеряй с замедлением, после каждого шага по отдельности — иначе устранишь три вещи и не узнаешь, какая из них сработала.
Частые вопросы
Почему содержимое прыгает при загрузке страницы?
Обычно из-за одной из шести причин: изображения без указания размеров, подгружаемые шрифты с другой шириной, встроенное чужое содержимое без известной высоты, всплывающие позже полосы уведомлений, поздно вступающий в силу CSS и содержимое, вставленное через JavaScript выше видимой области.
Какая самая действенная отдельная мера?
Задать каждому изображению width и height и добавить в CSS height: auto. Тогда браузер с самого начала резервирует правильное место, а масштабирование сохраняется. На практике эта мера часто составляет половину проблемы.
Почему значение локально лучше, чем в проверочном инструменте?
Потому что на собственном компьютере соединение быстрое, а кэш заполнен: таблицы стилей, шрифты и изображения приходят до первой отрисовки страницы, и ничего не прыгает. В реалистичных условиях они приходят после — поэтому измерять нужно с замедлением.
Может ли частично заранее доставленный CSS навредить?
Да. Если в заранее доставленной части не хватает правила, касающегося блока в видимой части, именно этот элемент прыгает, как только приходит полная таблица стилей. Либо полностью для видимой области, либо совсем никак — половинчатые решения здесь хуже, чем никакие.
Как устранить прыжки баннера согласия?
Показывая его поверх содержимого, а не сдвигая — то есть он лежит над содержимым, не сдвигая его вниз. Как вариант, место можно зарезервировать с самого начала. Эта причина одна из самых частых и при этом самая простая для устранения.
Маркетинг, который настраивается сам
Бета Studio Engine уже открыта. Забронируй место и участвуй в развитии с самого начала.
Присоединиться к бете →