главная/Оптимизация CLS (Cumulative Layout Shift) на сайте
cumulative-layout-shift-optimize

Оптимизация CLS (Cumulative Layout Shift) на сайте

CLS (Cumulative Layout Shift) — это метрика пользовательского опыта, измеряющая нестабильность макета страницы во время загрузки.

Ниже приведены главные шаги для улучшения CLS:

Оптимизация изображений:

  • Укажите размеры изображений (ширина и высота) с помощью атрибутов width и height для тега img. Это поможет браузеру выделить правильное пространство для этих элементов и предотвратить сдвиг макета.
  • Используйте современные форматы изображений, такие как WebP, для уменьшения размера файла без потери качества.

Оптимизация веб-шрифтов:

  • Ограничьте количество веб-шрифтов, используемых на вашем сайте.
  • Убедитесь, что веб-шрифты предварительно загружаются с помощью тега link rel=»preload».
  • Используйте font-display: swap в вашем CSS для отображения системного шрифта до загрузки кастомного шрифта.

Оптимизация стилей CSS:

  • Удалите неиспользуемые стили и объедините внешние файлы CSS.
  • Минифицируйте файлы CSS и загружайте их с помощью атрибута media, чтобы указать, какие стили должны быть применены в разных ситуациях.

Оптимизация JavaScript:

  • Удалите неиспользуемые или устаревшие скрипты.
  • Загружайте JavaScript асинхронно с помощью атрибутов async или defer.
  • Минифицируйте и объедините внешние файлы JavaScript.

Ленивая загрузка (lazy loading) медиа-контента:

Используйте атрибут loading=»lazy» для изображений и видео, чтобы они загружались только при появлении во вьюпорте пользователя.

Избегайте внезапных изменений макета:

  • Используйте CSS-анимации и переходы для плавного изменения состояний элементов.
  • Избегайте вставки контента с помощью JavaScript после загрузки страницы без предварительного резервирования места.

Убедитесь, что сторонние виджеты и рекламные блоки имеют зарезервированное пространство:

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

Используйте CSS-сетки и Flexbox

Используйте сетки CSS и Flexbox для создания адаптивных макетов, которые лучше справляются с изменениями размеров и перестройками контента.