Оптимизируем CLS (Cumulative Layout Shift) - метрику из Web vitals

[@boris.zabolotskikh]

На CLS также влияет FOUT (мелькание и сдвиг шрифтов в момент когда системный шрифт заменяется внешним)

[@NickLavlinsky]

Да, хотя это копейки по сравнению с остальным.

[@NickLavlinsky]

Да, хотя это копейки по сравнению с остальным.

[@ЕвгенийЯковлев-э8в]

​@@NickLavlinsky0:41 0:58 1:00 1:01 1:14 1:19 1:20

[@БатырбекАйгалиев]

Спасибо за видео!

[@yakovenko-roman]

Смещение элементов важно именно для первого экрана или даже если элементы смещаются где-то внизу страницы то CLS тоже падает?

[@NickLavlinsky]

Только для первого экрана.

[@ДануфСвияга]

Спасибо за видео. Исходя из чего выбрана своя пропорция для .poster{padding-top: 42.74%;}? Вычислено опытным путем под высоту самого блока "poster" или...?

[@NickLavlinsky]

Да, вычислена.

[@egorgorbachev]

Спасибо!

[@IvanTarazevich]

"Молиться на неё не стоит..." Уже не совсем так, например на одном из проектов из-за Яндекс рекламы параметр CLS просел и сайт не проходит проверку в мобильной и десктопной версии. Поэтому для проектов вполне актуальная тема.

[@NickLavlinsky]

Какую проверку он не проходит?

[@IvanTarazevich]

@@NickLavlinsky PageSpeed Insights

[@denny_salmone]

В 2023 году CLS уже влияет не на 5%, а на 25% и стаёт очень большой проблемой

[@ЕвгенийЯковлев-э8в]

0:17

[@ddddddddddddddddd555]

Как ещё один способ для максимального добития CLS - можете все файлы css объединить в один, минимизировать все стили в одну строку и затем вставить перед закрывающимся head одной строчкой стили.

[@NickLavlinsky]

Очень сомнительный способ.

[@ddddddddddddddddd555]

@@NickLavlinsky , испытано на практике, попробуй ))