CLS (совокупное смещение макета)

Cumulative Layout Shift (CLS) — это метрика [Core Web Vitals](/glossary/core-web-vitals), которая измеряет визуальную стабильность страницы при загрузке. Вместо измерения скорости или отзывчивости CLS фокусируется на том, перемещается ли видимый контент неожиданно во время и после процесса загрузки. Каждый раз, когда элемент смещается без взаимодействия пользователя, браузер фиксирует расстояние и размер сдвига. Эти отдельные оценки группируются в сессионные окна, и наибольшее сессионное окно становится показателем CLS страницы. Показатель 0,1 или ниже считается хорошим, от 0,1 до 0,25 — требует улучшения, выше 0,25 — плохой.

Неожиданные сдвиги макета напрямую ухудшают пользовательский опыт. Читатель, собирающийся нажать кнопку, может случайно нажать на другой элемент, когда контент прыгает. Пользователь, прокручивающий документ, может полностью потерять своё место. Эти раздражения увеличивают [показатель отказов](/glossary/bounce-rate) и сокращают время на странице. Google использует CLS как один из трёх Core Web Vitals в своём алгоритме ранжирования, поэтому страницы с плохой визуальной стабильностью получают штрафы как по вовлечённости, так и по SEO. Для цифровых издателей, встраивающих интерактивный контент вроде флипбуков, контроль CLS особенно важен, поскольку встраивания сторонних сервисов — один из самых частых источников сдвигов макета.

Просмотрщик FlipLink спроектирован для минимизации CLS путём резервирования фиксированных размеров для контейнера флипбука до полной загрузки контента страницы. Изображения и интерактивные элементы рендерятся в заранее выделенных областях, чтобы макет не смещался при поступлении ассетов. Рендерер флипбуков [Three.js](/glossary/three-js) и просмотрщик документов [PDF.js](/glossary/pdf-js) инициализируются со стабильным фреймом, предотвращая скачки макета при анимации перелистывания страниц. Код [адаптивного встраивания](/features/sharing-and-distribution), генерируемый FlipLink, использует контейнеры с соотношением сторон, которые немедленно занимают правильное пространство на странице хоста. Это решение полезно как для встроенного просмотрщика на вашем сайте, так и для публикации, размещённой на go.fliplink.me.

CLS измеряется с использованием двух компонентов для каждого сдвига: **impact fraction** (процент вьюпорта, затронутый сдвигом) и **distance fraction** (насколько далеко элемент переместился относительно вьюпорта). Оценка layout shift для одного кадра равна impact fraction, умноженной на distance fraction. Сдвиги, происходящие в течение 500 миллисекунд после действия пользователя (например, клика или касания), исключаются, так как пользователь ожидает движение в ответ на своё действие. Chrome DevTools, Lighthouse, PageSpeed Insights и JavaScript-библиотека Web Vitals — все отображают CLS. Полевые данные из Chrome User Experience Report (CrUX) предоставляют реальные показатели CLS, собранные от фактических посетителей.

CLS использует подход **сессионных окон** для вычисления итоговой оценки. Сессионное окно — это группа layout shift, происходящих в пределах одной секунды друг от друга, с максимальной продолжительностью окна в пять секунд. Показатель CLS страницы — это наибольшее отдельное сессионное окно, а не сумма всех сдвигов. Этот метод был обновлён в 2021 году для более точного отражения долгоживущих страниц и одностраничных приложений, где контент загружается поэтапно. Частые причины высокого CLS включают изображения без атрибутов ширины и высоты, динамически вставленные рекламные блоки или баннеры, веб-шрифты, вызывающие мигание нестилизованного текста (FOUT), и сторонние встраивания, загружающиеся асинхронно без зарезервированного пространства.

**«CLS имеет значение только при первоначальной загрузке страницы.»** CLS отслеживает сдвиги на протяжении всего жизненного цикла страницы, включая вызванные отложенной загрузкой изображений, бесконечной прокруткой или динамически вставленными элементами. Одностраничные приложения, которые заменяют контент при навигации, могут накапливать CLS, если переходы не обрабатываются аккуратно. **«Цель — показатель CLS равный 0.»** Хотя ноль идеален, показатель 0,1 или ниже считается хорошим. Погоня за абсолютным нулём может привести к чрезмерной оптимизации. Практическая цель — сделать сдвиги незаметными для пользователей. **«CLS измеряет скорость загрузки страницы.»** CLS не имеет отношения к скорости. Страница может загрузиться менее чем за секунду и при этом иметь ужасный CLS, если элементы прыгают во время рендеринга. Скорость измеряется показателем [LCP](/glossary/lcp) и другими метриками времени, а не CLS.