Предотвращение сдвига макета с помощью правильных CSS

Понимание Кумулятивного Сдвига Макета (CLS)

Кумулятивный сдвиг макета (CLS) — важный показатель в веб-скорости, измеряющий визуальную стабильность. Он количественно оценивает неожиданные смещения макета, происходящие на странице в процессе её отображения, что может негативно сказываться на пользовательском опыте. Эти смещения происходят, когда видимые элементы внезапно меняют свою позицию или размер, особенно во время загрузки.

Распространённые причины сдвигов макета

• Изображения или видео без указанных размеров.
• Рекламные объявления или сторонние вставки, загружающиеся асинхронно.
• Загрузка шрифтов с задержкой, вызывающая переформатирование текста.
• Динамически вставляемый контент без правильного резервирования места.

Использование CSS для предотвращения сдвигов макета

Правильные CSS-техники играют важную роль в минимизации CLS. Два основных подхода — определение явных размеров и использование свойства aspect-ratio.

1. Задание ширины и высоты

Всегда указывайте атрибуты ширины и высоты для изображений и видео или явно задавайте их с помощью CSS. Это помогает браузеру выделить необходимое пространство на странице до загрузки ресурса, предотвращая смещения контента по мере появления медиаэлементов.

2. Использование свойства aspect-ratio

Свойство aspect-ratio в CSS позволяет задавать соотношение ширины и высоты элемента без необходимости фиксированных значений высоты. Особенно полезно для отзывчивых изображений и контейнеров, которые должны сохранять определённое соотношение при изменении размера экрана.

img {
  ширина: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Задавая соотношение сторон, браузеры резервируют необходимое пространство перед полной загрузкой изображения, исключая неожиданное смещение.

3. Резервирование места для динамического контента

Для рекламы, iframe или любого контента, вставляемого асинхронно, используйте контейнеры с фиксированными размерами или свойство aspect-ratio, чтобы зарезервировать место. Это снижает вероятность смещения окружающего контента при загрузке динамичного содержимого.

4. Предотвращение изменений макета при загрузке шрифтов

Используйте стратегии отображения шрифтов, такие как font-display: swap;, чтобы избежать невидимого текста во время загрузки шрифтов, что вызывает перераспределение и смещение. Предзагружайте шрифты для ускорения их доступности.

Дополнительные советы

• Используйте заполнитель или скелеты для оповещения пользователей о загрузке контента.
• Проверяйте свои страницы с помощью инструментов, таких как Google Lighthouse, для мониторинга CLS и выявления проблемных элементов.
• Используйте свойства min-height или min-width для сохранения стабильности макета во время асинхронной загрузки контента.

Заключение

Предотвращение сдвигов макета крайне важно для обеспечения плавного и удобного взаимодействия с сайтом. Использование CSS-свойств, таких как явные размеры и aspect-ratio, помогает эффективно размещать пространство и стабилизировать макет во время загрузки. Совмещая эти стратегии с хорошими практиками загрузки контента, вы значительно снизите CLS и улучшите производительность и удобство вашего сайта.