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

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

Katie Hempenius

Карусель — это компонент 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 . Чтобы избежать сдвигов макета, вместо этого используйте свойство CSS transform для перехода этих элементов.

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

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

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

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

Дополнительную информацию о сдвигах макета см. в разделе Отладка сдвигов макета .

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

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

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

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

• Создание компонента «Истории» (web.dev)
• Веб-стиль нового поколения: прокрутка привязки (web.dev)
• Карусель только на CSS (хитрости CSS)
• Как создать карусель только на CSS (хитрости CSS)

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

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

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

В этом разделе обсуждается измерение LCP в отношении каруселей. Хотя карусели обрабатываются так же, как и любой другой элемент UX во время расчета LCP, механика расчета 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 изменил поведение горизонтально прокручиваемых изображений, таких как карусели. Теперь они используют те же пороговые значения, что и вертикальная прокрутка. Это означает, что в случае использования карусели изображения будут загружены до того, как они станут видны в области просмотра. Это означает, что загрузка изображения с меньшей вероятностью будет заметна пользователю, но за счет большего количества загрузок.

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

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

Лучшие практики навигации

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

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

Указать ход навигации

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

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

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

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

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

Лучшие практики по читабельности

Не используйте автовоспроизведение

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

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

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

Разделяйте текст и изображения

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

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

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

Лучшие практики в области продуктов

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

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

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

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

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

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

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