Оптимизация Cumulative Layout Shift (CLS)

, Александр Мышов

Эдди Османи написал пост про решение проблем сдвига контента — "Optimize Cumulative Layout Shift".

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

Самые распространённые причины нежелательных смещений:

  • изображения без заданных размеров (можно исправить добавлением атрибутов width и height);
  • реклама, iframe, встраиваемый контент (можно исправить, предварительно выделив необходимое место);
  • динамически добавляемые блоки — GDPR-сообщения, похожие товары и т.п. (вместо них можно использовать временные заглушки);
  • web-шрифты, вызывающие FOIT/FOUT (такое смещение можно устранить с помощью font-display: optional и <link rel="preload">).

В свете последних новостей о том, что Google будет использовать показатели Web Vitals для ранжирования сайтов, очень советую почитать статью.

https://web.dev/optimize-cls/

← На главную