Лучшие практики для каруселей

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

Кэти Хемпениус
Katie Hempenius
X

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

В этой статье обсуждаются лучшие практики производительности и UX для каруселей.

Изображение с каруселью

Производительность

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

  • LCP (самая большая содержательная краска)

    Большие карусели, расположенные выше сгиба, часто содержат элемент LCP страницы и, следовательно, могут оказать существенное влияние на LCP. В этих сценариях оптимизация карусели может значительно улучшить LCP. Подробное объяснение того, как работает измерение LCP на страницах, содержащих карусели, см. в разделе «Измерение LCP для каруселей» .

  • INP (Взаимодействие со следующей отрисовкой)

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

  • CLS (кумулятивный сдвиг макета)

    Удивительное количество каруселей использует некачественную, некомпонованную анимацию, которая может способствовать CLS. На страницах с автоматически воспроизводимыми каруселями это может привести к бесконечному CLS. Этот тип CLS обычно не заметен человеческому глазу, поэтому проблему легко не заметить. Чтобы избежать этой проблемы, избегайте использования некомпонованной анимации в карусели (например, во время переходов между слайдами).

Рекомендации по повышению производительности

Загрузка содержимого карусели с помощью HTML

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

Делать 
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
Не 
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

Избегайте смещения макета

Переходы между слайдами и элементы управления навигацией — два наиболее распространенных источника изменений макета в каруселях:

  • Переходы между слайдами. Сдвиги макета, возникающие во время переходов между слайдами, обычно вызваны обновлением свойств элементов DOM, вызывающих макет. Примеры некоторых из этих свойств: left , top , width и marginTop . Чтобы избежать сдвигов макета, вместо этого используйте свойство transform CSS для перехода этих элементов. В этой демонстрации показано, как использовать transform для создания простой карусели.

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

Вот некоторые из распространенных вопросов, вызывающих путаницу при измерении CLS для каруселей:

  • Карусели с автоматическим воспроизведением. Переходы между слайдами являются наиболее распространенным источником смещения макета, связанного с каруселями. В карусели без автоматического воспроизведения эти изменения макета обычно происходят в течение 500 мс после взаимодействия с пользователем и поэтому не учитываются при расчете совокупного смещения макета (CLS) . Однако для каруселей с автоматическим воспроизведением эти изменения макета не только потенциально могут учитываться в CLS, но и могут повторяться бесконечно. Таким образом, особенно важно убедиться, что карусель автоматического воспроизведения не является источником сдвигов макета.

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

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

Используйте современные технологии

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

Однако в зависимости от типа создаваемой вами карусели JavaScript может вообще не понадобиться. Новый API Scroll Snap позволяет реализовать карусельные переходы, используя только HTML и CSS.

Вот несколько ресурсов по использованию scroll-snap , которые могут оказаться вам полезными:

Оптимизируйте контент карусели

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

Измерение производительности

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

Измерение LCP для каруселей

Вот ключевые моменты для понимания того, как работает расчет LCP для каруселей:

  • LCP учитывает элементы страницы по мере их отрисовки во фрейме. Новые кандидаты на элемент LCP больше не рассматриваются, когда пользователь взаимодействует со страницей (нажимает, прокручивает или нажимает клавиши). Таким образом, любой слайд в автоматически воспроизводимой карусели потенциально может стать последним элементом LCP, тогда как в статической карусели потенциальным кандидатом на LCP может быть только первый слайд.
  • Если визуализируются два изображения одинакового размера, первое изображение будет считаться элементом LCP. Элемент LCP обновляется только в том случае, если кандидат LCP больше текущего элемента LCP. Таким образом, если все элементы карусели имеют одинаковый размер, элемент LCP должен быть первым отображаемым изображением.
  • При оценке кандидатов LCP LCP учитывает « видимый размер или внутренний размер, в зависимости от того, какой из них меньше ». Таким образом, если карусель с автоматическим воспроизведением отображает изображения одинакового размера, но содержит изображения различных внутренних размеров , которые меньше размера дисплея, элемент LCP может меняться при отображении новых слайдов. В этом случае, если все изображения отображаются в одном размере, изображение с наибольшим собственным размером будет считаться элементом LCP. Чтобы поддерживать низкий уровень LCP, вы должны убедиться, что все элементы в автоматически воспроизводимой карусели имеют одинаковый внутренний размер.

Изменения в расчете LCP для каруселей в Chrome 88.

Начиная с Chrome 88 , изображения, которые позже удаляются из DOM, считаются потенциально наиболее информативными отрисовками. До Chrome 88 эти изображения были исключены из рассмотрения. Для сайтов, использующих автоматически воспроизводимые карусели, это изменение определения окажет либо нейтральное, либо положительное влияние на оценки LCP.

Это изменение было сделано в ответ на наблюдение , что многие сайты реализуют карусельные переходы, удаляя ранее отображавшееся изображение из дерева DOM. До Chrome 88 каждый раз при представлении нового слайда удаление предыдущего элемента вызывало обновление LCP. Это изменение влияет только на автоматическое воспроизведение каруселей — по определению, потенциально самые большие содержательные отрисовки могут произойти только до того, как пользователь впервые взаимодействует со страницей.

Изменения пороговых значений в Chrome 121

Chrome 121 изменил поведение изображений с горизонтальной прокруткой, таких как карусели. Теперь они используют те же пороговые значения, что и вертикальная прокрутка. Это означает, что в случае использования карусели изображения будут загружаться до того, как они появятся в области просмотра. Это означает, что загрузка изображения с меньшей вероятностью будет заметна для пользователя, но за счет большего количества загрузок. Используйте демонстрацию горизонтальной отложенной загрузки , чтобы сравнить поведение в Chrome, Safari и Firefox.

Другие соображения

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

Обеспечьте заметные элементы управления навигацией.

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

Отображение прогресса навигации

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

Поддержка мобильных жестов

На мобильных устройствах в дополнение к традиционным элементам управления навигацией (например, экранным кнопкам) должны поддерживаться жесты смахивания.

Предоставьте альтернативные пути навигации

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

Рекомендации по удобочитаемости

Не используйте автозапуск

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

Таким образом, автовоспроизведение редко бывает хорошим выбором. Если контент важен, отказ от автовоспроизведения увеличит его доступность; Если контент карусели не важен, то использование автозапуска отвлечет внимание от более важного контента. Кроме того, автоматически воспроизводимые карусели могут быть трудными для чтения (и раздражающими). Люди читают с разной скоростью, поэтому карусель редко переключается в «нужное» время для разных пользователей.

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

Держите текст и изображения отдельно

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

Будьте краткими

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

Лучшие практики продукта

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

Однако карусели не всегда используются эффективно.

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

Проверьте свои предположения

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

Будьте актуальны

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

,

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

Кэти Хемпениус
Katie Hempenius
X

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

В этой статье обсуждаются лучшие практики производительности и UX для каруселей.

Изображение с каруселью

Производительность

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

  • LCP (самая большая содержательная краска)

    Большие карусели, расположенные выше сгиба, часто содержат элемент LCP страницы и, следовательно, могут оказать существенное влияние на LCP. В этих сценариях оптимизация карусели может значительно улучшить LCP. Подробное объяснение того, как работает измерение LCP на страницах, содержащих карусели, см. в разделе «Измерение LCP для каруселей» .

  • INP (Взаимодействие со следующей отрисовкой)

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

  • CLS (кумулятивный сдвиг макета)

    Удивительное количество каруселей использует некачественную, некомпонованную анимацию, которая может способствовать CLS. На страницах с автоматически воспроизводимыми каруселями это может привести к бесконечному CLS. Этот тип CLS обычно не заметен человеческому глазу, поэтому проблему легко не заметить. Чтобы избежать этой проблемы, избегайте использования некомпонованной анимации в карусели (например, во время переходов между слайдами).

Рекомендации по повышению производительности

Загрузка содержимого карусели с помощью HTML

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

Делать 
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
Не 
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

Избегайте смещения макета

Переходы между слайдами и элементы управления навигацией — два наиболее распространенных источника изменений макета в каруселях:

  • Переходы между слайдами. Сдвиги макета, возникающие во время переходов между слайдами, обычно вызваны обновлением свойств элементов DOM, вызывающих макет. Примеры некоторых из этих свойств: left , top , width и marginTop . Чтобы избежать сдвигов макета, вместо этого используйте свойство transform CSS для перехода этих элементов. В этой демонстрации показано, как использовать transform для создания простой карусели.

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

Вот некоторые из распространенных вопросов, вызывающих путаницу при измерении CLS для каруселей:

  • Карусели с автоматическим воспроизведением. Переходы между слайдами являются наиболее распространенным источником смещения макета, связанного с каруселями. В карусели без автоматического воспроизведения эти изменения макета обычно происходят в течение 500 мс после взаимодействия с пользователем и поэтому не учитываются при расчете совокупного смещения макета (CLS) . Однако для каруселей с автоматическим воспроизведением эти изменения макета не только потенциально могут учитываться в CLS, но и могут повторяться бесконечно. Таким образом, особенно важно убедиться, что карусель автоматического воспроизведения не является источником сдвигов макета.

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

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

Используйте современные технологии

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

Однако в зависимости от типа создаваемой вами карусели JavaScript может вообще не понадобиться. Новый API Scroll Snap позволяет реализовать карусельные переходы, используя только HTML и CSS.

Вот несколько ресурсов по использованию scroll-snap , которые могут оказаться вам полезными:

Оптимизируйте контент карусели

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

Измерение производительности

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

Измерение LCP для каруселей

Вот ключевые моменты для понимания того, как работает расчет LCP для каруселей:

  • LCP учитывает элементы страницы по мере их отрисовки во фрейме. Новые кандидаты на элемент LCP больше не рассматриваются, когда пользователь взаимодействует со страницей (нажимает, прокручивает или нажимает клавиши). Таким образом, любой слайд в автоматически воспроизводимой карусели потенциально может стать последним элементом LCP, тогда как в статической карусели потенциальным кандидатом на LCP может быть только первый слайд.
  • Если визуализируются два изображения одинакового размера, первое изображение будет считаться элементом LCP. Элемент LCP обновляется только в том случае, если кандидат LCP больше текущего элемента LCP. Таким образом, если все элементы карусели имеют одинаковый размер, элемент LCP должен быть первым отображаемым изображением.
  • При оценке кандидатов LCP LCP учитывает « видимый размер или внутренний размер, в зависимости от того, какой из них меньше ». Таким образом, если карусель с автоматическим воспроизведением отображает изображения одинакового размера, но содержит изображения различных внутренних размеров , которые меньше размера дисплея, элемент LCP может меняться при отображении новых слайдов. В этом случае, если все изображения отображаются в одном размере, изображение с наибольшим собственным размером будет считаться элементом LCP. Чтобы поддерживать низкий уровень LCP, вы должны убедиться, что все элементы в автоматически воспроизводимой карусели имеют одинаковый внутренний размер.

Изменения в расчете LCP для каруселей в Chrome 88.

Начиная с Chrome 88 , изображения, которые позже удаляются из DOM, считаются потенциально наиболее информативными отрисовками. До Chrome 88 эти изображения были исключены из рассмотрения. Для сайтов, использующих автоматически воспроизводимые карусели, это изменение определения окажет либо нейтральное, либо положительное влияние на оценки LCP.

Это изменение было сделано в ответ на наблюдение , что многие сайты реализуют карусельные переходы, удаляя ранее отображавшееся изображение из дерева DOM. До Chrome 88 каждый раз при представлении нового слайда удаление предыдущего элемента вызывало обновление LCP. Это изменение влияет только на автоматическое воспроизведение каруселей — по определению, потенциально самые большие содержательные отрисовки могут произойти только до того, как пользователь впервые взаимодействует со страницей.

Изменения пороговых значений в Chrome 121

Chrome 121 изменил поведение изображений с горизонтальной прокруткой, таких как карусели. Теперь они используют те же пороговые значения, что и вертикальная прокрутка. Это означает, что в случае использования карусели изображения будут загружаться до того, как они появятся в области просмотра. Это означает, что загрузка изображения с меньшей вероятностью будет заметна для пользователя, но за счет большего количества загрузок. Используйте демонстрацию горизонтальной отложенной загрузки , чтобы сравнить поведение в Chrome, Safari и Firefox.

Другие соображения

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

Обеспечьте заметные элементы управления навигацией.

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

Отображение прогресса навигации

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

Поддержка мобильных жестов

На мобильных устройствах в дополнение к традиционным элементам управления навигацией (например, экранным кнопкам) должны поддерживаться жесты смахивания.

Предоставьте альтернативные пути навигации

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

Рекомендации по удобочитаемости

Не используйте автозапуск

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

Таким образом, автовоспроизведение редко бывает хорошим выбором. Если контент важен, отказ от автовоспроизведения увеличит его доступность; Если контент карусели не важен, то использование автозапуска отвлечет внимание от более важного контента. Кроме того, автоматически воспроизводимые карусели могут быть трудными для чтения (и раздражающими). Люди читают с разной скоростью, поэтому карусель редко переключается в «нужное» время для разных пользователей.

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

Держите текст и изображения отдельно

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

Будьте краткими

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

Лучшие практики продукта

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

Однако карусели не всегда используются эффективно.

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

Проверьте свои предположения

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

Будьте актуальны

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

,

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

Кэти Хемпениус
Katie Hempenius
X

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

В этой статье обсуждаются лучшие практики производительности и UX для каруселей.

Изображение с каруселью

Производительность

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

  • LCP (самая большая содержательная краска)

    Большие карусели, расположенные выше сгиба, часто содержат элемент LCP страницы и, следовательно, могут оказать существенное влияние на LCP. В этих сценариях оптимизация карусели может значительно улучшить LCP. Подробное объяснение того, как работает измерение LCP на страницах, содержащих карусели, см. в разделе «Измерение LCP для каруселей» .

  • INP (Взаимодействие со следующей отрисовкой)

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

  • CLS (кумулятивный сдвиг макета)

    Удивительное количество каруселей использует некачественную, некомпонованную анимацию, которая может способствовать CLS. На страницах с автоматически воспроизводимыми каруселями это может привести к бесконечному CLS. Этот тип CLS обычно не заметен человеческому глазу, поэтому проблему легко не заметить. Чтобы избежать этой проблемы, избегайте использования некомпонованной анимации в карусели (например, во время переходов между слайдами).

Рекомендации по повышению производительности

Загрузка содержимого карусели с помощью HTML

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

Делать 
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
Не 
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

Избегайте смещения макета

Переходы между слайдами и элементы управления навигацией — два наиболее распространенных источника изменений макета в каруселях:

  • Переходы между слайдами. Сдвиги макета, возникающие во время переходов между слайдами, обычно вызваны обновлением свойств элементов DOM, вызывающих макет. Примеры некоторых из этих свойств: left , top , width и marginTop . Чтобы избежать сдвигов макета, вместо этого используйте свойство transform CSS для перехода этих элементов. В этой демонстрации показано, как использовать transform для создания простой карусели.

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

Вот некоторые из распространенных вопросов, вызывающих путаницу при измерении CLS для каруселей:

  • Карусели с автоматическим воспроизведением. Переходы между слайдами являются наиболее распространенным источником смещения макета, связанного с каруселями. В карусели без автоматического воспроизведения эти изменения макета обычно происходят в течение 500 мс после взаимодействия с пользователем и поэтому не учитываются при расчете совокупного смещения макета (CLS) . Однако для каруселей с автоматическим воспроизведением эти изменения макета не только потенциально могут учитываться в CLS, но и могут повторяться бесконечно. Таким образом, особенно важно убедиться, что карусель автоматического воспроизведения не является источником сдвигов макета.

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

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

Используйте современные технологии

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

Однако, в зависимости от типа карусели, которую вы строите, вам может вообще не понадобиться JavaScript. Новый API Scri Snap Snap позволяет реализовать переходы, похожие на карусель с использованием только HTML и CSS.

Вот несколько ресурсов по использованию scroll-snap , которые вы можете найти полезными:

Оптимизировать содержание каруселей

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

Измерение производительности

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

Измерение LCP для каруселей

Это ключевые моменты для понимания того, как работает расчет LCP для каруселей:

  • LCP рассматривает элементы страниц, когда они окрашены в кадр. Новые кандидаты для элемента LCP больше не рассматриваются после того, как пользователь взаимодействует (Taps, Scrolls или Keypresses) со страницей. Таким образом, любой слайд в автоматической карусели может стать конечным элементом LCP - пролеивания в статической карусели только первым слайдом будет потенциальным кандидатом в LCP.
  • Если два изображения одинакового размера отображаются, первое изображение будет считаться элементом LCP. Элемент LCP обновляется только тогда, когда кандидат в LCP больше текущего элемента LCP. Таким образом, если все элементы карусели имеют одинаковый размер, элемент LCP должен быть первым изображением, которое отображается.
  • При оценке кандидатов в LCP LCP рассматривает « видимый размер или внутренний размер, в зависимости от того, что меньше ». Таким образом, если автоматическая карусель отображает изображения в постоянном размере, но содержит изображения различных внутренних размеров , которые меньше размера дисплея, элемент LCP может изменяться при отображении новых слайдов. В этом случае, если все изображения отображаются при одном и том же размере, изображение с наибольшим внутренним размером будет считаться элементом LCP. Чтобы поддерживать LCP минимум, вы должны убедиться, что все элементы в автоматической карусели имеют одинаковый внутренний размер.

Изменения в расчете LCP для каруселей в хроме 88

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

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

Изменения в порогах в хроме 121

Chrome 121 изменил поведение для горизонтальных изображений, таких как карусели. Теперь они используют те же пороги, что и вертикальная прокрутка. Это означает, что для варианта использования карусели изображения будут загружены до того, как они будут видимыми в просмотре. Это означает, что загрузка изображения с меньшей вероятностью будет заметна для пользователя, но за счет большего количества загрузок. Используйте горизонтальную демонстрацию ленивой нагрузки , чтобы сравнить поведение в хроме и сафари и Firefox.

Другие соображения

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

Предоставьте заметные навигационные элементы управления

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

Укажите прогресс навигации

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

Поддержка мобильных жестов

На мобильных устройствах следует поддерживать жесты в дополнение к традиционным навигационным элементам управления (например, на кнопках на экране).

Предоставьте альтернативные пути навигации

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

Лучшие практики читаемости

Не используйте Autoplay

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

Таким образом, редко, что Autoplay является хорошим выбором. Если контент важен, не использование Autoplay максимизирует его воздействие; Если содержание каруселей не важно, то использование Autoplay будет отвлекать от более важного контента. Кроме того, автоматические карусели могут быть трудно читать (и раздражать тоже). Люди читают на разных скоростях, поэтому редко карусель постоянно переходит в «правильное» время для разных пользователей.

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

Держите текст и изображения отдельными

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

Быть кратким

У вас есть только часть секунды, чтобы привлечь внимание пользователя. Короткая, копия, копия, увеличит шансы, которые донесет ваше сообщение.

Лучшие практики продукта

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

Однако карусели не всегда используются эффективно.

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

Проверьте свои предположения

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

Быть актуальным

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