Почему у вас высокие проблемы с CLS и как их исправить | Журнал "Вольт"
Сб. Окт 31st, 2020


CLS, Cumulative Layout Shift или Cumulative Layout Shift – один из ключевых показателей для оценки технической оптимизации сайтов в Google.

Суть в том, что любые элементы на странице не должны произвольно менять свое положение в процессе загрузки. Это выглядит не очень красиво, и посетитель может пропустить кнопку, как на видео ниже.

Чем больше общая площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет показатель CLS. В идеале он должен быть нулевым.

В сентябре 2020 года наша команда разработчиков наконец победила Cumulative Layout Shift – контент больше не смещается при загрузке. Некоторые проблемы все еще остаются, но 75-й процентиль за 7 дней равен нулю:

Из таблицы видно, что мы переоценили задержку первого ввода (First Input Delay) на мобильных устройствах и опасную тенденцию во времени рендеринга контента (Largest Contentful Paint) – над этим будем работать. Google, однако, считает, что сейчас проблем нет:

Вот несколько ключевых советов по устранению сдвигов в содержании. В нашем случае 90% задач решались достаточно просто и сводились к трем правилам:

  1. Если размеры элемента известны заранее, то их нужно прописать явно. Например, блок счетчика комментариев, закладок и лайков загружается динамически, но высота иконок известна заранее и может быть прямо установлена ​​в CSS.
  2. Если вы загружаете контент после «скелета» страницы, то вместо контента вставьте заполнитель высотой 100vh, который будет держать нижний колонтитул за пределами экрана. Когда появится контент, удалите заполнитель. Пример: страница вакансии.
  3. Отображение динамически загружаемых блоков в том порядке, в котором они не смещают другие блоки. Или дождитесь загрузки всех блоков и покажите их одновременно. Пример: на основном в правой боковой панели на рабочем столе.

DevTools в Google Chrome удобно использовать для диагностики. Установите эмуляцию медленного Интернет-соединения и установите флажок Layout Shift Regions на вкладке Rendereing. Или используйте отладчик производительности, который недавно научился выделять области со сдвигом содержимого.



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *