Оптимизация CLS

«Проблема с cls: значение показателя выше порогового» — уведомление от Google, на которое следует обратить пристальное внимание. Мы расскажем, что такое CLS и как его можно улучшить.

CLS — Cumulative Layout Shift — совокупный сдвиг элементов страницы. Иными словами на сколько далеко и часто «дергаются» элементы первого экрана по мере загрузки страницы. Ключевой показатель Google Core Web Vitals. Все мы были в ситуации, когда страница не прогрузилась, но я уже вижу текст и начинаю его читать. Но, вдруг, «бац» и появляется баннер, который сдвигает всю страницу далеко-далеко вниз, на дно. Примерно там же находится значимость вашего визита для владельца сайта.

Cumulative layout shift оптимизация

1 — Указывайте актуальные размеры изображений. Если у тега <img> не заданы атрибуты width и height, то браузер заранее просто не знает какого размера будет занимаемая им область до того как полностью загрузки изображение. Как следствие страница будет «дергаться» по мере загрузки таких изображений и вы получите штраф за высокий cls показатель.

2 — Указывайте актуальные размеры фреймов. Youtube прекрасен и заботливо отдает код для вставки своих видео в iframe уже с учетом пропорций ролика. Будь как youtube. Но к сожалению не все проявляют подобную заботу, тогда браузер сам решает до какого размера растянуть ваш фрейм с видео, что также отрицательно скажется на «неподвижности» содержимого страницы и google cls.

3 — Ограничивайте рекламу, динамический контент. И пожалуй лидер нашего антирейтинга — реклама, которая вставляется динамически (js-кодом). Обязательно проверяем в личном кабинете рекламных сетей «регион» где будет размещен код и заранее узнаем типоразмеры возможной рекламы.

4 — Нестандартные шрифты. В зависимости от выбранной стратегии подгрузки нестандартных шрифтов могут возникать 2 проблемы: «мигание невидимого текста» (FOIT), и «мигание не стилизованного текста» (FOUT). Из-за этого также может возникнуть проблема с cls google. Здесь нам поможет предварительная загрузка и разумный подход к чрезмерному использованию нестандартных шрифтов.

Как же понять в чем проблема с cls, когда значение показателя выше порогового?

Здесь также поможет Google Chrome и его шикарная панель разработчиков Developer Tools. Переходим в раздел Perfomance, собирает значения Core Web Vitals и находим все случаи сдвига содержимого (layout shift). Те же данные предоставляет Lighthouse от Google.