Смещение макета как исправить - Исправление недочетов и поиск решений вместе с Examum.ru

Что такое показатель CLS (Cumulative Layout Shift) и как довести его до минимума, чтобы не терять посетителей сайта.

В статье:

Причины внезапных сдвигов на странице
CLS — показатель визуальной стабильности сайта
Как измерить CLS
Не все сдвиги макета — это плохо
Что делать, чтобы улучшить CLS и избавиться от внезапных сдвигов

Представьте, что вы читаете статью онлайн, но на странице что-то внезапно меняется и вы теряете место, на котором остановились. Или еще хуже — хотите нажать на кнопку и отказаться от предложения, как страница сама сдвигается и вы попадаете на кнопку «Скачать».

Из-за сместившихся кнопок пользователь промахнулся

В большинстве случаев это раздражает, а в некоторых может и нанести ущерб — к примеру, если из-за сдвига кнопки вы соглашаетесь что-то купить или оформить ненужную подписку.

Такой нестабильный сайт может потерять часть пользователей, потому что с ним невозможно удобно работать. И, к сожалению, это частая проблема сайтов. Разберемся, как ее решать.

Причины внезапных сдвигов на странице

Неожиданные сдвиги содержимого обычно случаются из-за асинхронной загрузки ресурсов или динамического добавления элементов DOM над существующими на странице элементами.

Если добавить до расположения контента, который смотрит пользователь, асинхронно загружающееся видео, изображение, шрифт, который отображается больше или меньше, чем его запасной вариант, или сторонний виджет, меняющий размер, при загрузке этих элементов контент ниже может сдвинуться.

Дело в том, что функционирование сайта в процессе разработки отличается от того, что в итоге воспринимают пользователи. Персонализированный и сторонний контент часто ведет себя по-разному. При разработке тестовые изображения часто уже находятся в кэше браузера разработчика, а локальные вызовы API выполняются быстро и задержки незаметны.

Решить проблему поможет измерение того, как часто сдвиги макета происходят у реальных пользователей.

CLS — показатель визуальной стабильности сайта

Сдвиг макета происходит каждый раз, когда видимый элемент изменяет свое положение от одного визуализируемого кадра к другому.

Визуальная стабильность сайта количественно измеряется показателем Cumulative Layout Shift. CLS — это совокупный сдвиг макета. Показатель входит в перечень трех главных метрик оценки пользовательского опыта — Core Web Vitals.

CLS помогает оценить, как часто пользователи сталкиваются с неожиданными сдвигами. Он измеряет общую сумму всех индивидуальных оценок сдвига макета для каждого неожиданного сдвига, который происходит в течение всего срока службы страницы.

Чем ниже показатель CLS, тем лучше.

Сайты должны стремиться к тому, чтобы CLS не превышал значение 0,1. Хороший показатель, если не меньше 75% сессий, сегментированных по мобильным и настольным устройствам, не превышают это значение.

Шкала CLS

Как измерить CLS

Инструмент Chrome User Experience Report собирает данные по пользователям для метрик Core Web Vitals, включая CLS. Эти данные используют два инструмента, которые доступны рядовому пользователю:

PageSpeed Insights

Отчет в PageSpeed Insights

Search Console (отчет Core Web Vitals в Отчете об основных интернет-показателях)

Отчет в консоли

Есть еще вариант — проверить скорость сайта в инструменте от PR-CY. Он проанализирует процесс загрузки, разложит его по этапам и даст советы по улучшению каждого. Работает бесплатно онлайн.

Фрагмент результатов

Не все сдвиги макета — это плохо

На сайтах и в приложениях элементы меняются в зависимости от действий пользователя. Он ввел данные в поисковую строку и появились подсказки, кликнул по ссылке в названии и подгрузилась карточка с описанием, щелкнул по кнопке и появилась дополнительная кнопка для окончательного согласия. Если ожидаемые пользователей окна и кнопки появляются сразу в ответ на действие — сдвиг макета допустим.

Если действие пользователя запускает какой-то сетевой запрос, требующий времени на загрузку, лучше освободить место под элементы, которые должны появиться, и отобразить значок загрузки. Так пользователь поймет, что сейчас что-то появится, и не будет пытаться кликать куда-то еще во время ожидания.

Полезно по теме:
Юзабилити и психология: почему ваши клиенты не замечают изменений на сайте

Как отобразить новые элементы и не сбить с толку пользователя

Контент, который резко и неожиданно появляется на странице, может сбить с толку, ведь пользователь уже решил куда-то кликнуть. Анимация и переходы — хороший способ отобразить новые элементы на странице так, чтобы пользователь понял, что происходит, и был к ним готов.

Свойство CSS позволяет анимировать элементы, не вызывая сдвигов макета:

вместо изменений height и width свойства, можно использовать transform: scale();
для перемещения элементов можно не менять top, right, bottom или left свойства и использовать вместо этого transform: translate().

Что делать, чтобы улучшить CLS и избавиться от внезапных сдвигов

На большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря этим правилам:

Всегда включайте атрибуты размера в свои изображения и видео. Либо как-то по-другому резервируйте нужное им пространство, к примеру, с помощью полей соотношения сторон CSS. Так браузер сможет выделить правильный объем места в документе во время загрузки изображения.
Не вставляйте контент поверх загруженного контента, за исключением ответа на взаимодействие пользователя. Тогда все изменения на странице будут ожидаемы для него.
Используйте анимацию и плавные переходы, чтобы подготовить пользователя к изменениям на странице.

На основе статьи «Cumulative Layout Shift (CLS)»

Расскажите в комментариях, о чем еще вам было бы интересно почитать в блоге по теме навигации и юзабилити или по другим темам о развитии сайтов.

Источник

Нет времени читать?

Отправить статью на почту

Перевод статьи Даниэля Роэ от 25 февраля 2021 г.

Готовы ли вы к добавлению основных интернет-показателей к сигналам поиска, сообщающим об удобстве страницы? С тех пор как Google анонсировал очередные нововведения, я нашел множество ресурсов и инструментов, предназначенных для улучшения основных интернет-показателей (Core Web Vitals — CWV). Тем не менее лишь очень немногие инструменты предоставляют подробную информацию о том, как определить и улучшить один из трех сигналов основных интернет-показателей. Речь идет о визуальной стабильности (Visual Stability), также известной как кумулятивный сдвиг макета (Cumulative Layout Shift — CLS). Как объясняет Google, «сдвиг макета происходит каждый раз, когда видимый элемент меняет свое положение от одного отображаемого кадра к следующему». CLS измеряет совокупный эффект всех неожиданных сдвигов макета на конкретной странице.

Типичный пример, который используется для демонстрации CLS и того, как улучшить данный показатель, — это реклама. Поскольку рекламные объявления часто подаются со сторонних сайтов, они загружаются после блоков контента страницы и элементов навигации и при отображении сдвигают контент вниз или в сторону. Однако, если на вашем сайте отсутствуют блоки контента для рекламы, это вовсе не повод расслабляться, когда дело касается CLS! Давайте разберемся, как определить элементы, ухудшающие показатель CLS, и как исправить сдвиги макета.

Поиск страниц с плохим CLS

Определение сдвигов макета

Существует несколько вариантов поиска страниц с плохим CLS, которые основаны как на данных имитации загрузки страницы, так и на наблюдениях реальных пользователей (их еще называют данными наблюдений). Здесь важно уяснить разницу.

Данные имитации загрузки страницы доступны в Lighthouse, Page Speed Insights (PSI) и Chrome DevTools. В этой статье все примеры созданы с помощью PSI и Chrome DevTools. Однако обычно я предпочитаю запускать массовые отчеты по страницам, используя PSI API с нашим скриптом приложений Google Sheets или Screaming Frog.

Данные наблюдений доступны в отчете Chrome User Experience (CrUX). Эти данные служат источником для основных интернет-показателей в Google Search Console, и их можно обнаружить в разделе «Данные наблюдений» в Page Speed Insights, а также используя удобное расширение Chrome Core SERP Vitals от defaced.dev. Для получения этих данных исследуемая страница должна иметь «достаточное количество отдельных образцов, которые обеспечивают репрезентативное анонимное представление о производительности URL-адреса» за последние 28 дней. Так заявляет Google. Джон Мюллер из Google рекомендует использовать данные имитации загрузки страницы для более быстрого мониторинга.. Несмотря на то что для поиска страниц с проблемным CLS я буду использовать расширение Core SERP Vitals, мне потребуются данные имитации загрузки страницы, чтобы обнаружить немедленные изменения. Ниже на снимке экрана видно, что данные могут значительно отличаться.

Используя расширение Chrome Core SERP Vitals (и осуществляя поиск моего любимого горячего напитка), я разыскал несколько возможных кандидатов для решения проблемы сдвига макета. Последний результат на картинке имеет показатель CLS, равный 1.0.

Рисунок 1. Расширение Chrome Core SERP Vitals

Расширение использует данные наблюдений, однако нужно взглянуть и на данные имитации загрузки страницы, чтобы убедиться в эффективности наших усилий. Я введу URL-адрес в инструменте PSI, чтобы увидеть данные имитации загрузки страницы.

Рисунок 2. Данные имитации загрузки страницы

Core SERP Vitals использует мобильные данные, которые, как мы видим, соответствуют показателю 1 в разделе данных наблюдений отчета PSI. Хотя показатель имитации загрузки страницы не так высок, как показатель данных наблюдений, результат выше 0,25 все еще считается «плохим».

Рисунок 3. Показатель имитации загрузки страницы

Запуск отчета о производительности в Chrome DevTools

Теперь, когда у нас есть конкретная страница для оценки сдвига макета, давайте откроем Chrome DevTools.

Загрузите URL-адрес в браузере Chrome. Нажмите правую кнопку мыши и выберите «Просмотреть код». В DevTools откроется вкладка Elements. Поскольку мы используем мобильные данные, нужно выбрать в DevTools имитацию мобильного устройства. Для этого нажмите на значок слева от меню инструментов с изображением планшета и смартфона.

Рисунок 4. Вкладка Elements

В верхней части реальной веб-страницы выберите iPhone X, чтобы увеличить рамку отображения. Рамка помогает нам обнаружить сдвиг, поэтому увеличенное окно просмотра упростит нашу задачу.

Рисунок 5. Выбор iPhone Xs

Теперь перейдем на вкладку Performance в DevTools. Убедитесь, что выбран параметр Screenshots.

Рисунок 6. Вкладка Performance

Параметр Web Vitals был добавлен в DevTools в Chrome 88, но данные о сдвиге макета в Chrome 84 предоставляют нам более подробную информацию. Вы увидите, что отчет Performance с несколькими разделами может выглядеть немного пугающе, поэтому я не буду дополнительно использовать параметр Web Vitals. Также я бы рекомендовал открывать DevTools в отдельном окне. Для этого выберите значок с тремя точками справа от панели инструментов DevTools.

Начните новую запись данных о производительности, нажав кнопку перезагрузки или Ctrl + Shift + E (в Windows). Запись займет несколько секунд, чтобы перезагрузить и сформировать отчет. Появится всплывающее окно с указанием текущего процесса и оставшегося времени. По завершении вкладка Performance будет выглядеть очень красочно и, как я уже говорил, немного пугающе.

Рисунок 7. Отчет

Интерпретация отчета о производительности

Сначала давайте рассмотрим раздел Experience, в котором сдвиги макета показаны красными блоками. При выборе конкретного блока вкладка Summary в нижней части окна Performance отображает подробную информацию о сдвиге макета.

Рисунок 8. Раздел Experience

О первом сдвиге макета беспокоиться не нужно. Помните, что CLS — это сумма показателей, основанная на неожиданных сдвигах. Первый сдвиг макета указывает, что его причиной стал пользовательский ввод. Такие ожидаемые сдвиги не учитываются в CLS.

Рисунок 9. Первый сдвиг

А вот второй сдвиг макета является неожиданным, поскольку переменная had recent input («недавний ввод») имеет значение No. Так как этот сдвиг добавляет только 0,004 к показателю CLS, он не представляет большой проблемы. Другое дело, если бы таких сдвигов было множество, поскольку, как мы помним, CLS — это совокупный результат.

Рисунок 10. Второй сдвиг

Однако последний блок сдвига макета требует особого внимания. Мы видим, что он добавляет 0,23 к показателю CLS, что соответствует диапазону needs improvement («нуждается в улучшении») от 0,1 до 0,25. Давайте выберем элемент Related Node и просмотрим его на вкладке Elements в DevTools. Это поможет нам отследить перемещение элемента.

Рисунок 11. Элемент Related Node

Теперь, когда мы знаем, что имел место сдвиг слогана Embracing the simplicity of natural living and real food, можно проверить кадры на вкладке Performance и увидеть, что именно произошло.

Переместите слайдер скриншота, чтобы «увеличить» этот раздел сдвига макета на вкладке Performance. Начните увеличение раздела непосредственно перед блоком сдвига макета. Если у вашей мыши есть колесико, вы также можете использовать его для увеличения. Затем вы можете провести курсором по кадрам в верхней части профиля Performance, чтобы увидеть, как произошел сдвиг слогана. Подсказка: если Related Node в сдвиге макета находится «ниже сгиба», вы можете прокрутить вниз до нужного элемента и повторно запустить профиль Performance, чтобы зафиксировать его в кадрах.

Благодаря скриншотам мы видим, что во время сдвига макета блок кнопок отодвигает слоган вверх.

Исправление сдвигов макета

Чтобы исправить сдвиг макета, необходимо понять, что происходит с блоком кнопок. Это можно проверить на вкладке Elements.

Рисунок 12. Вкладка Elements

Поскольку высота не указана на вкладке Computed, этот параметр не применяется к элементу напрямую, а определяется высотой кнопок.

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

Чтобы жестко закодировать это изменение, нужно извлечь полный HTML-код веб-сайта в редактор и локально обновить его. Затем требуется разместить локальные файлы на общедоступном сервере, чтобы сделать их доступными для PSI и проверить влияние изменений на показатель CLS. В этом нам поможет сервис ngrok. Если вы хотите узнать, как работать в ngrok, у Google есть хорошее руководство. Также вы должны иметь навыки работы с командной строкой, поэтому ознакомьтесь с моими советами.

Итак, давайте посмотрим на обновленную веб-страницу. На вкладке Styles видно, что теперь минимальная высота элемента div.wprm-recipe-snippets составляет 200 пикселей.

Рисунок 13. Минимальная высота элемента div.wprm-recipe-snippets

Как это влияет на сдвиг макета? Мы видим, что сдвиг элемента span.tagline больше не происходит.

А что говорит имитация загрузки страницы?

Рисунок 14. Имитация загрузки страницы wprm-recipe-snippets

Мы улучшили показатель CLS с 0,255 до 0,031, изменив всего одну декларацию CSS! Примечание: другие показатели производительности будут сильно отличаться от исходного отчета PSI, поскольку он получен с локального сервера.

Многие, вероятно, подумают, что мне просто повезло, или этот метод работает только для определенных типов веб-сайтов. Чтобы развеять все сомнения, я применил аналогичный процесс к сайту электронной коммерции.

Рисунок 15. Сайт электронной коммерции

Первоначальный показатель CLS при имитации загрузки этой страницы составил 0,83.

Используя описанный метод проверки сдвигов макета в отчете Performance, я обнаружил, что на данной странице сдвиг вызывает рейтинг в виде звезд, что показано на видео ниже.

Я добавил минимальную высоту для элементов класса stamped-product-reviews-badge.

Рисунок 16. Минимальная высота для элементов класса stamped-product-reviews-badge

И опять мы смогли исправить сдвиг макета, изменив лишь одну декларацию CSS. Показатель CLS улучшился с 0,83 до 0,029!

Рисунок 17. Улучшение показателя CLS

Хотя в этих двух примерах мы использовали установку минимальной высоты элементов, другой распространенной причиной сдвигов макета являются веб-шрифты, которые могут изменять высоту или ширину блоков контента. У одного нашего клиента плохие показатели CLS на сайте электронной коммерции были вызваны именно загрузкой веб-шрифтов. Среди улучшений, которые мы внесли для исправления CLS, были:

Замена иконочных шрифтов на SVG
Обновление отображения шрифтов с помощью font-display. Обратите внимание: если вы разрешите отображение невидимого текста (FOIT), то в разделе PSI «Диагностика» появится соответствующее уведомление. Однако раздел «Диагностика» не влияет напрямую на оценку производительности.

Даже если у вас нет навыков программирования, чтобы исправить эти сдвиги макета, обязательно познакомьтесь поближе с отчетом Performance. Если я за пару дней улучшил показатели двух незнакомых сайтов, представьте, каких успехов вы сможете добиться до мая, когда новые изменения вступят в силу! Кстати сказать, пока я проводил исследования и готовил эту публикацию, сайты из наших примеров уже обновили проблемные элементы. Если они смогли, значит, сможете и вы!

P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых полезных материалов.

Источник

Приветствую, друзья. Сегодня разберем еще один элемент оптимизации сайта под требования Google Page Speed Insights, обозначенный как смещение макета страницы в процессе загрузки, в результатах проверки фигурирует под названием Cumulative Layout Shift (CLS).

Если говорить простым языком, то уровень Cumulative Layout Shift показывает, насколько сильно прыгают разные блоки на сайте, в течение загрузки веб-страницы.

Содержание:

Какой вред несет высокий Cumulative Layout Shift;
Поиск элементов, смещающих макет;
Исправление ошибок, влияющих на CLS.

Причиной таких попрыгушек являются элементы с неопределенными или неверно заданными параметрами ширины и высоты. Например, картинка вставлена без размеров и в начале загрузки показывается как узкая область, обтекаемая текстом, а после загрузки изображение увеличивается до заданного размера, и весь текст уходит вниз.

Часто аналогичное влияние могут давать блоки рекламы, формы и т.д.

Для исправления необходимо обладать базовыми знаниями в CSS и уверенно пользоваться браузером.

Какой вред несет смещение макета

Чтобы долго не объяснять, приведу картинку, где показано, как из-за CLS смещения пользователь ошибочно нажимает на рекламу вместо кнопки социальной сети, так как блок рекламы загрузился позднее и сдвинул контент в момент клика.

Так как такие ошибки вредны людям, негативно к ним относятся и поисковые системы. Сайты, имеющие подобные ошибки, могут понижаться в поисковой выдаче.

Параметр Cumulative Layout Shift лежит в диапазоне от 0 до 1.

0 – это очень хорошо, означает, что все размеры и расположение элементов страницы задаются при первичном обращении браузера к сайту, а в процессе загрузки только заполняются данными.
1 – это очень плохо, означает, что первый отрисованный экран не имеет ничего общего с конечным видом сайта.

На значение влияет доля контента, который сдвигается, и расстояния, на которое происходит смещение.

Нормальным совокупным смещением макета считается значение <0,1, CLS в диапазоне 0,1-0,25 приемлемы, но Google уже обратит внимание на проблему, а цифры выше 0,25 – явная ошибка.

К сожалению, сам Page Speed Insights не указывает конкретные элементы, оказывающие негативный эффект.

Встает вопрос, как оптимизировать Cumulative Layout Shift, если неизвестны проблемные места.

На помощь придет DevTools – утилита уже встроенная в Яндекс Браузер и Chrome.

Я покажу весь процесс на примере собственного сайта, на котором как раз оказались страницы с проблемами.

Работа проводится в 2 этапа:

Поиск элементов с неправильными свойствами;
Правка их CSS стилей.

Поиск элементов, смещающих макет

Чуть не забыл, найти страницы с высоким значением CLS, если они вам заранее неизвестны можно через Google Search Console (инструкция, как туда добавить сайт).

В консоли нужна вкладка «Основные интернет показатели», там пункт «Мобильный». Внизу страницы приведен список замечаний, требующих устранения, среди них находится CLS.

Клик по строке откроет список страниц.

Открываем страницу, требующую улучшения, в браузере и нажимаем одновременно кнопки Ctrl+Shift+I. Откроется инструмент веб-разработчиков. Второй вариант его запустить – кликнуть правой кнопкой мыши в любом месте сайта и в меню выбрать «Исследовать элемент».

В панели переводим сайт в мобильный режим и открываем вкладку «Perfomanse».

Теперь перезапускаем страницу в отладочном режиме, нажав на Ctrl+Shift+E.

Это действие приведет не только к обновлению страницы, но и к покадровой записи всего процесса загрузки страницы со сбором разной информации.

Отчет покажется очень сложным, но нам в нем нужна всего одна строка под названием «Experience».

Размер полей в отладочной панели DevTools меняется с помощью мыши, для этого зажимаем край блока и тянем в нужную сторону, так можно увеличить отчет до комфортного размера.

В этой строке отмечаются участки, на которых макет страницы меняется. Этапов смещения может быть несколько, кликните по каждому для подробностей.

Под диаграммой идет сводный список сдвигаемых элементов.

По метке в Related Node мы поможет понять, какая часть сайта меняется и негативно влияет на Cumulative Layout Shift. Осталось понять, что приводит к изменениям.

Переносим внимание на строку диаграммы, где размечены скриншоты и аккуратно переводим курсор мыши в том районе, где происходит смещение макета. Если изменения велики, то ответ будет виден невооруженным глазом.

Итак, то, что ломает наш макет обнаружено. В моем примере это картинка статьи, у которой неверно заданы начальные размеры. Стандартно, для десктопной версии, картинка имеет размер 300 на 170, а для маленьких экранов ширина меняется на 160, а высота была задана параметром auto. В результате браузер сначала подтягивал размер 170, а уже потом, когда картинка прогружалась полностью, пропорционально приводил высоту к ширине.

Исправление ошибок в макете

Чтобы исправить ошибку я открыл файл style.css. В блоке отвечающем за маленькие экраны (у меня это меньше 560 пикселей шириной) была добавлена строчка max-height: 100px.

Теперь в базовом макете высота изображения устанавливается на 100 px вместо 170 и после полной загрузки контента изменения практически не происходят. В DevTools совокупное смещение макета показывает 0,0163, а проверка Гугл снизила Cumulative Layout Shift до 0.

У сайтов, работающих на CMS, как правило, ошибки имеют повторяющийся характер и связаны с настройками шаблона, поэтому, исправление в одном месте скажется на всех страницах сайта или на определенной группе страниц. В моем примере одна строка в CSS файле WordPress шаблона уменьшила Cumulative Layout Shift до нуля одновременно на главной и на всех страницах категорий.

Иногда, повысить качество сайта проще, чем кажется. Если что-либо по теме CLS осталось непонятно или не получается так, как описано в инструкции, то задавайте вопросы, в комментариях, постараюсь помочь.

Источник

Оптимизация совокупного смещения макета

Узнайте, как избежать внезапных смещений макета, чтобы улучшить взаимодействие с пользователем

May 5, 2020 — Обновлено Aug 17, 2021

«Я собирался щелкнуть по нему! Почему он сдвинулся? 😭»

Смещение макета может отвлекать пользователей. Представьте, что вы начали читать статью, как вдруг элементы смещаются по странице, сбивая вас с толку и заставляя снова искать строчку, на который вы остановились. Такое очень часто встречается в Интернете, в том числе при чтении новостей или попытке нажать кнопки «Поиск» или «Добавить в корзину». Такие ситуации с визуальным смещением контента раздражают и расстраивают. Они часто возникают, когда видимые элементы смещаются из-за того, что другой элемент был внезапно добавлен на страницу или изменен в размерах.

CLS (Совокупное смещение макета)метрика Core Web Vitals, которая измеряет нестабильность контента путем суммирования оценок смещения для каждого смещения макета (за исключением периода в 500 миллисекунд после ввода пользователя). Метрика оценивает, насколько видимый контент сместился в области просмотра, а также учитывает расстояние, на которое сдвинулись затронутые элементы.

В этой статье мы рассмотрим, как оптимизировать распространенные причины смещений макета.

Наиболее частые причины плохого показателя CLS:

изображения без размеров;
рекламные объявления, встраиваемые объекты и плавающие фреймы без размеров;
динамически добавляемый контент;
веб-шрифты, вызывающие побочные эффекты FOIT или FOUT;
действия, ожидающие ответа сети перед обновлением DOM.

Изображения без размеров 🌆 #

Резюме: всегда включайте атрибуты width и height для изображений и видеоэлементов. В качестве альтернативы зарезервируйте необходимое пространство с помощью CSS-свойства aspect-ratio. Такой подход гарантирует, что браузер сможет выделить правильный объем места в документе во время загрузки изображения.

Изображения без указания высоты и ширины.

Изображения с указанной шириной и высотой.

Отчет Lighthouse, показывающий значения CLS до и после установки размеров для изображений

Lighthouse 6.0, влияние установки размеров для изображений на CLS.

Предыстория #

На заре Интернета разработчики добавляли атрибуты width и height к своим тегам <img>, чтобы обеспечить достаточное пространство на странице до того, как браузер начнет загружать изображения. Это позволяло свести к минимуму пересчет положения элементов на странице и их перекомпоновку.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

Вы можете заметить, что в примере выше атрибуты width и height не содержат единицы измерения. «Пиксельные» размеры обеспечивают резервирование области 640×360. Чтобы вписаться в это пространство, изображение будет растягиваться, независимо от своих истинных размеров.

С появлением адаптивного веб-дизайна разработчики начали опускать атрибуты width и height, и вместо этого для изменения размера изображений стали использовать CSS:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

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

Вот тут и появляется соотношение сторон. Соотношение сторон изображенияэто отношение его ширины к его высоте. Обычно оно выражается в виде двух чисел, разделенных двоеточием (например, 16:9 или 4:3). При соотношении сторон x:y изображение имеет ширину «x» единиц и высоту «y» единиц.

Это означает, что если мы знаем один из линейных размеров, то другой можно определить. Для соотношения сторон 16:9:

если puppy.jpg имеет высоту 360 пикселей, то ширина изображения составит 360 x (16/9) = 640 пикселей;
если puppy.jpg имеет ширину 640 пикселей, то высота изображения составит 640 x (9/16) = 360 пикселей.

Знание соотношения сторон позволяет браузеру рассчитать и зарезервировать достаточное пространство для высоты и соответствующей ширины изображения.

Современный способ #

Современные браузеры устанавливают соотношение сторон изображений по умолчанию на основе атрибутов ширины и высоты изображения, поэтому полезно задать их для предотвращения смещений макета. Благодаря CSS Working Group разработчики могут задать атрибуты width и height обычным способом:

<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

… А таблицы стилей UA stylesheets всех браузеров добавляют соотношение сторон по умолчанию на основании существующих атрибутов width и height:

img {
  aspect-ratio: attr(width) / attr(height);
}

Здесь соотношение сторон вычисляется на основании атрибутов width и height до загрузки изображения. Эта информация предоставляется в самом начале расчета макета. Как только изображению задается определенная ширина (например, width: 100%), его высота вычисляется с помощью соотношения сторон.

Совет. Если вам трудно представить соотношение сторон, воспользуйтесь удобным калькулятором.

Вышеупомянутые изменения соотношения сторон изображения были реализованы в Firefox и Chromium и будут добавлены в WebKit (Safari).

Чтобы фантастически глубоко погрузиться в тему о соотношении сторон и адаптивных изображениях, прочитайте статью «Загрузка страницы без подвисания с медиавыражением, проверяющим соотношение сторон».

Если ваше изображение находится в контейнере, вы можете использовать CSS, чтобы изменить размер изображения до ширины этого контейнера. Устанавливаем height: auto;, чтобы высота изображения не была фиксированной (например, 360px).

img {
  height: auto;
  width: 100%;
}

А как насчет адаптивных изображений?

При работе с адаптивными изображениями атрибут srcset определяет изображения, среди которых браузер будет выбирать подходящее, и размер каждого изображения. Чтобы обеспечить возможность установки атрибутов ширины и высоты <img>, каждое изображение должно использовать одинаковое соотношение сторон.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

А как насчет метода художественного направления ?

Основная идея метода художественного направленияотображать разные изображения в зависимости от размеров экрана устройства, например, обрезанное изображение в узких окнах просмотра и полное изображение на настольных компьютерах.

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Вероятно, что эти изображения могут иметь разное соотношение сторон, и браузеры всё еще оценивают, каким должно быть наиболее эффективное решение, в том числе следует ли указывать размеры во всех источниках. Пока общее решение не принято, перекомпоновка в этом случае всё ещё возможна.

Рекламные объявления, встраиваемые объекты и плавающие фреймы без размеров 📢😱 #

Рекламные объявления #

Рекламаодин из основных факторов, способствующих изменению макета в Интернете. Рекламные сети и веб-мастеры часто поддерживают динамические размеры объявлений. Размеры объявлений увеличивают эффективность/доход за счет более высоких показателей кликов и большего числа объявлений, участвующих в аукционе. К сожалению, это может привести к неоптимальному взаимодействию с пользователем из-за того, что реклама выталкивает видимый контент, который вы просматриваете, вниз по странице.

В течение жизненного цикла объявления многие моменты могут вызвать смещение макета:

когда сайт вставляет рекламный контейнер в DOM;
когда сайт изменяет размер рекламного контейнера с помощью собственного кода;
когда библиотека рекламных тегов загружается (и меняет размер рекламного контейнера);
когда объявление заполняет контейнер (и меняет размер, если окончательное объявление имеет другой размер).

Хорошая новостьсайты могут применять передовые методы, чтобы уменьшить сдвиг. Смещение в макете можно уменьшить за счет следующих действий:

Статически зарезервировать место для рекламного блока.
- Другими словами, задайте стиль для элемента до загрузки библиотеки тегов объявлений.
- При размещении рекламы в потоке контента убедитесь, что сдвиги устранены, зарезервировав место под размер рекламного блока. Эти объявления не должны вызывать смещения макета, если загружаются за пределами области просмотра.
Будьте осторожны при размещении нелипких баннеров в верхней части области просмотра.
- В приведенном ниже примере рекомендуется переместить рекламу под логотип world vision и зарезервировать достаточное место для этого блока.
Если под рекламный блок на странице зарезервировано пространство, но само объявление не появилось, не стоит сворачивать это пространство, лучше показать там заполнитель, чтобы не сдвигать контент.
Устраните смещения, зарезервировав максимально возможный размер для рекламного блока.
- Это работает, но может остаться пустое место, если блок заполнит реклама меньшего размера.
Выберите наиболее вероятный размер рекламного блока на основании исторических данных.

На некоторых сайтах уменьшить смещение макета можно за счет первоначального сворачивания места под рекламный блок, если вероятность его заполнения невелика. Не существует простого способа каждый раз выбирать точный размер, если только вы сами не контролируете показ рекламы.

Объявления без достаточного зарезервированного места.

Объявления с достаточным зарезервированным местом.

Отчет Lighthouse, показывающий значения CLS до и после резервирования места для рекламных баннеров

Lighthouse 6.0, влияние резервирования места для рекламного баннера на CLS

Статическое резервирование места для рекламного блока #

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

Также учитывайте размеры объявлений меньшего размера. Если подается объявление меньшего размера, веб-мастер может сверстать (больший) контейнер, чтобы избежать смещения макета. У такого подхода есть недостатокувеличивается количество пустого пространства, поэтому попытайтесь найти компромиссное решение.

Избегайте размещения рекламы в верхней части области просмотра #

Объявления в верхней части области просмотра могут вызывать большее смещение макета, чем объявления в середине. Это связано с тем, что под объявлениями в верхней части располагается больше контента, а значит, больше элементов перемещается, когда объявление вызывает сдвиг макета. И наоборот, объявления, расположенные в середине области просмотра, могут смещать не так много элементов, так как контент над ними с меньшей вероятностью будет смещаться.

Встраиваемые объекты и плавающие фреймы #

Встраиваемые виджеты позволяют встраивать переносимый веб-контент на вашу страницу (например, видео с YouTube, карты из Google Карты, публикации в социальных сетях и т. д.). Такие встраиваемые объекты могут иметь несколько форм:

резервный HTML-код и тег JavaScript, преобразующий резервный вариант в элегантный встраиваемый объект;
встроенный фрагмент кода HTML;
встроенный плавающий фрейм.

В случае встраиваемых объектов размер встраиваемого контента, как правило, не известен заранее (например, публикация в социальных сетяхбудет ли там встроенное изображение, видео или текст в несколько строк). В результате платформы, предлагающие встраивание, не всегда резервируют достаточно места для встраиваемых объектов, что может привести к смещению макета при их окончательной загрузке.

Встраиваемые объекты без зарезервированного места.

Встраиваемые объекты с зарезервированным местом.

Отчет Lighthouse, показывающий значения CLS до и после резервирования места для встраиваемого объекта

Lighthouse 6.0, влияние резервирования места для встраиваемого объекта на CLS

Чтобы обойти эти проблемы, вы можете свести к минимуму CLS, предварительно вычислив размер достаточного места для встраиваемого объекта с заполнителем или резервным вариантом. Вот один из рабочих процессов, который вы можете использовать для встраиваемых объектов:

Определите окончательную высоту встраиваемого объекта, проверив его с помощью инструментов разработчика в браузере.
После загрузки встраиваемого объекта размер плавающего фрейма изменится, и соответственно изменится его содержимое.

Учитывайте размеры, и предусмотрите заполнитель на месте встраиваемого объекта. Возможно, потребуется учесть тонкие различия в размерах объявлений/заполнителей для разных форм-факторов с помощью медиа-запросов.

Динамический контент 📐 #

Резюме: Избегайте вставлять контент поверх существующего, кроме случаев, когда это требуется в ответ на взаимодействие с пользователем. Это гарантирует, что любые изменения макета будут ожидаемыми.

Вы наверняка сталкивались со смещениями макета из-за пользовательского интерфейса, который появлялся вверху или внизу области просмотра, когда вы пытались загрузить сайт. Как и в случае с рекламой, это часто происходит из-за баннеров и форм, смещающих остальное содержимое страницы:

«Подпишитесь на наши новости!» (Эй, сбавьте обороты! Мы же только что встретились!)
«Связанный контент».
«Установите наше приложение [iOS/Android]».
«Мы всё ещё принимаем заказы».
«Уведомление о GDPR».
Динамический контент без зарезервированного места.

Если вам нужно отобразить эти типы возможностей пользовательского интерфейса, заранее зарезервируйте для этого достаточное пространство в области просмотра (например, с помощью заполнителя или скелета пользовательского интерфейса), чтобы при загрузке они не вызвали неожиданного смещения содержимого страницы.

В некоторых случаях динамическое добавление контента является важной частью взаимодействия с пользователем. Например, при загрузке дополнительных продуктов в список элементов или при обновлении содержимого прямой трансляции. В таких случаях есть несколько способов избежать неожиданного смещения макета:

Замените старый контент новым контентом в контейнере фиксированного размера или используйте карусель и удалите старый контент после перехода. Не забудьте отключить любые ссылки и элементы управления до завершения перехода, чтобы предотвратить случайные щелчки или касания при поступлении нового контента.
Попросите пользователя инициировать загрузку нового контента, чтобы он не был удивлен сдвигом (например, с помощью кнопки «Загрузить больше» или «Обновить»). Рекомендуется предварительно загрузить контент до взаимодействия с пользователем, чтобы он отображался немедленно. Напоминаем, что смещения макета, которые происходят в течение 500 мс после пользовательского ввода, не учитываются в CLS.
Незаметно для пользователя загружайте контент за пределами области просмотра, а затем выводите пользователю уведомление о доступности контента (например, с помощью кнопки «Прокрутить вверх»).

Примеры загрузки динамического контента без непредвиденных смещений макета. Слева: загрузка содержимого прямой трансляции в Twitter. Справа: пример «Загрузить больше» на сайте Chloé. Узнайте, как команда YNAP оптимизировала CLS при загрузке большего количества контента.

Веб-шрифты, вызывающие побочные эффекты FOIT или FOUT #

Загрузка и рендеринг веб-шрифтов может вызвать смещение макета двумя способами:

резервный шрифт заменяется новым шрифтом (FOUTмигание нестилизованного текста);
«невидимый» текст отображается до тех пор, пока не будет отображен новый шрифт (FOITмигание невидимого текста).

Эти побочные эффекты могут помочь минимизировать следующие инструменты:

свойство font-display позволяет изменять поведение визуализации пользовательских шрифтов, оно имеет пять значений auto, swap, block, fallback и optional. К сожалению, все эти значения (кроме optional) могут вызвать перекомпоновку одним из вышеуказанных способов.
Font Loading API (API загрузки шрифтов) может сократить время, необходимое для получения необходимых шрифтов.

Что касается Chrome 83, я также могу порекомендовать следующее:

использовать тег <link rel=preload> для загрузки основных веб-шрифтов: у предварительно загруженного шрифта будет больше шансов попасть в первую отрисовку контента, и в этом случае смещения макета не происходит;
объединить <link rel=preload> и font-display: optional.

Более подробную информацию см. в статье «Предотвращение смещения макета и побочных эффектов FOIT (Мигание невидимого текста) путем предварительной загрузки дополнительных шрифтов».

Анимации 🏃‍♀️ #

Резюме: Используйте свойство transform вместо анимации свойств, которая запускает смещение макета.

При изменении значений свойств CSS может потребоваться реакция браузера на эти изменения. Ряд значений запускает повторную компоновку, отрисовку и организацию слоев, например, box-shadow и box-sizing. Некоторые свойства CSS можно изменить менее ресурсоёмким способом.

Дополнительные сведения о том, какие свойства CSS запускают смещение макета, см. в таблице «Триггеры CSS» и статье «Высокопроизводительная анимация».

Инструменты разработчика 🔧 #

Я рад сообщить, что существует ряд инструментов для измерения и отладки CLS (Совокупного смещения макета)

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

Панель Performance в DevTools показывает смещения макета в разделе Experience в Chrome 84. Представление Summary для Layout Shift включает совокупную оценку сдвига макета, а также прямоугольное наложение, показывающее затронутые области.

После записи новой трассировки на панели Performance в разделе Experience появляется красная полоса, отображающая запись Layout Shift Щелкнув по этой записи, вы сможете просмотреть затронутые элементы (например, увидеть смещенные записи из/в).

Измерить реальные значений CLS, агрегированные на уровне источника, также можно с помощью отчета Chrome User Experience Report. Данные CrUX CLS доступны через BigQuery, а также доступен образец запроса для проверки производительности CLS.

Вот и всё. Надеюсь, приведенная информация поможет сделать ваши страницы чуть менее увёртливыми

Выражаем благодарность Филиппу Уолтону, Кенджи Бахе, Уоррену Мареске, Энни Салливан, Стиву Кобесу и Джильберто Кокки за их полезные обзоры.

Return to all articles

Источник

Автор: Аймен Лукил (Aymen Loukil) – консультант по SEO, предприниматель и бывший разработчик.

Совокупное смещение макета (Cumulative Layout Shift, CLS) – это одна из самых важных метрик пользовательского опыта и веб-производительности в настоящее время.

CLS является частью Core Web Vitals (LCP, FID и CLS) – набора показателей для оценки UX, предложенного Google, и измеряет стабильность шаблона страницы.

В статье вы узнаете подробнее о том, что представляет собой CLS, как измерить этот показатель, и как его улучшить.

Что такое CLS?

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

Мы все сталкивались с сайтами, особенно на мобильных устройствах, страницы которых сдвигались вверх, вниз, вправо или влево во время загрузки.

Появляется текст, вы начинаете читать статью и тут загружается изображение и сдвигает текст вниз. Вы думаете, что теперь уже всё загрузилось, хотите нажать на «Подробнее», а страница снова сдвигается и вместо нужно ссылки вы нажимаете на рекламное объявление. Знакомая ситуация? Это очень раздражает.

Что касается оценки CLS, то низкое или равное нулю значение свидетельствует о хорошем пользовательском опыте, а высокое – о плохом.

Хороший, средний или плохой CLS?

Хороший показатель CLS должен быть меньше 0,1. При этом на уровне домена важно добиться 75-го процентиля загрузки страницы для мобильных и десктопных пользователей.

Хороший CLS	Требует улучшения	Плохой CLS
Ниже 0,1	0,1 – 0,25	Выше 0,25

По сравнению с LCP показатель CLS имеет меньший вес в расчёте общей оценки по сайту в Lighthouse:

Показатель	Вес
LCP	25%
CLS	5%

Как измерить CLS?

Совокупный сдвиг макета можно измерить как в синтетической (лабораторной) среде, так и в «полевых» условиях (мониторинг поведения реальных пользователей).

CLS в синтетических инструментах:

Chrome-расширение Web Vitals
Google Lighthouse:

WebPageTest:

СОВЕТ: кликните на «View JSON result», чтобы просмотреть подробные данные по сдвигам макета:

Инструменты разработчика Chrome (Chrome Dev Tools), вкладка «Network»:

С помощью JavaScript

CLS в «полевых» условиях:

Chrome User Experience Report (CrUX)
Панель по Core Web Vitals, созданная Риком Вискоми (Rick Viscomi)
Также можно выполнить следующий SQL-запрос в BigQuery

SELECT

p75_cls,

small_cls AS good,

medium_cls AS needs_improvement,

large_cls AS poor

FROM

`chrome-ux-report.materialized.metrics_summary`

WHERE

origin = ‘https://netflix.com’

И проверить отчёт об основных показателях загрузки в Search Console:

Кроме того, CLS можно измерить в PageSpeed Insights (и лабораторные, и полевые данные):

Какие элементы смещаются?

Чтобы узнать, какие элементы сдвигаются, выполните аудит в Lighthouse и прокрутите отчёт вниз до раздела «Устраните большие смещения макета». Кликните по нему, чтобы увидеть список элементов.

СОВЕТ: закрепите панель Chrome DevTools слева или справа, чтобы при наведении курсора на элементы в отчёте Lighthouse вы могли видеть их на странице.

Как улучшить CLS

Всегда указывайте атрибуты «width» и «height» для таких элементов, как:

Изображения
Видео
Встраиваемый контент и iframes
Рекламные блоки и баннеры

Резервируйте необходимое место для элементов веб-страницы, чтобы браузер выделил необходимое пространство (см. CSS Aspect Ratio);
Никогда не вставляйте контент динамически поверх существующего без взаимодействия с пользователем;
При наличии элементов, добавляемых при взаимодействии с пользователем, показывайте их в окне 0.5s, в противном случае это будет считаться смещением макета;
Если на странице нужна анимация, отдайте предпочтение анимации с помощью свойства transition (CSS-переходы);
Не обновляйте DOM асинхронно;
Убедитесь, что необходимые веб-шрифты быстро загружаются, чтобы избежать FOIT/FOUT;
Выполняйте сортировку по загруженным шрифтам. Часто мы загружаем шрифты без надобности;
Используйте предварительную загрузку для самых важных шрифтов;
Добавьте свойство font-display:optional, чтобы избежать проблем с переключением шрифтов.

Источник