Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

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

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

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

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

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

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

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

Рекомендации по навигации

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

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

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

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

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

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

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

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

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

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

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