Оптимизируйте карусели для повышения производительности и удобства использования.
Карусель — это UX-компонент, который отображает контент в виде слайд-шоу. Карусели могут воспроизводиться автоматически, или пользователи могут перемещаться по ним вручную. Хотя карусели можно использовать и где угодно, чаще всего они используются для отображения изображений, продуктов и рекламных акций на домашних страницах.
В этой статье обсуждаются лучшие практики производительности и UX для каруселей.
Производительность
Хорошо реализованная карусель сама по себе должна оказывать минимальное влияние на производительность или вообще не оказывать ее вообще. Однако карусели часто содержат крупные медиаресурсы. Большие ресурсы могут влиять на производительность независимо от того, отображаются ли они в карусели или где-то еще.
LCP (самая большая содержательная краска)
Большие карусели, расположенные выше сгиба, часто содержат элемент LCP страницы и, следовательно, могут оказать существенное влияние на LCP. В этих сценариях оптимизация карусели может значительно улучшить LCP. Подробное объяснение того, как работает измерение LCP на страницах, содержащих карусели, см. в разделе « Измерение LCP для каруселей» .
INP (Взаимодействие со следующей отрисовкой)
Карусели имеют минимальные требования к JavaScript и поэтому не должны влиять на отзывчивость страницы. Если вы обнаружите, что карусель вашего сайта содержит долго выполняемые скрипты, вам следует рассмотреть возможность замены инструментов карусели.
CLS (кумулятивный сдвиг макета)
Удивительное количество каруселей использует некачественную, некомпонованную анимацию, которая может способствовать CLS. На страницах с автоматически воспроизводимыми каруселями это может привести к бесконечному CLS. Этот тип CLS обычно не заметен человеческому глазу, поэтому проблему легко не заметить. To avoid this issue, avoid using non-composited animations in your carousel (for example, during slide transitions).
Рекомендации по повышению производительности
Загрузка содержимого карусели с помощью 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, вызывающих макет. Examples of some of these properties include:
left
,top
,width
, andmarginTop
. To avoid layout shifts, instead use the CSStransform
property to transition these elements. This demo shows how to usetransform
to build a basic carousel.Navigation controls: Moving or adding/removing carousel navigation controls from the DOM can cause layout shifts depending on how these changes are implemented. Карусели, демонстрирующие такое поведение, обычно делают это в ответ на наведение курсора мыши.
Вот некоторые из распространенных вопросов, вызывающих путаницу при измерении CLS для каруселей:
Карусели с автоматическим воспроизведением. Переходы между слайдами являются наиболее распространенным источником смещения макета, связанного с каруселями. In a non-autoplay carousel these layout shifts typically occur within 500ms of a user interaction and therefore do not count towards Cumulative Layout Shift (CLS) . Однако для каруселей с автоматическим воспроизведением эти изменения макета не только потенциально могут учитываться в CLS, но и могут повторяться бесконечно. Таким образом, особенно важно убедиться, что карусель автозапуска не является источником сдвигов макета.
Прокрутка. Некоторые карусели позволяют пользователям использовать прокрутку для навигации по слайдам карусели. If an element's start position changes but its scroll offset (that is,
scrollLeft
orscrollTop
) changes by the same amount (but in the opposite direction) this is not considered a layout shift provided that they occur in the same frame.
Дополнительные сведения об изменениях макета см. в разделе Отладка изменений макета .
Используйте современные технологии
Many sites use third-party JavaScript libraries to implement carousels. Если вы в настоящее время используете старые инструменты карусели, возможно, вы сможете повысить производительность, переключившись на более новые инструменты. Новые инструменты, как правило, используют более эффективные API и с меньшей вероятностью потребуют дополнительных зависимостей, таких как jQuery.
Однако в зависимости от типа создаваемой вами карусели JavaScript может вообще не понадобиться. Новый API Scroll Snap позволяет реализовать карусельные переходы, используя только HTML и CSS.
Вот несколько ресурсов по использованию scroll-snap
, которые могут оказаться вам полезными:
- Создание компонента Stories (web.dev)
- Веб-стиль нового поколения: привязка прокрутки (web.dev)
- Карусель только для CSS (CSS-хитрости)
- Как создать карусель только на CSS (хитрости CSS)
Оптимизируйте контент карусели
Карусели часто содержат одни из самых больших изображений на сайте, поэтому, возможно, стоит потратить время на то, чтобы убедиться, что эти изображения полностью оптимизированы. Выбор правильного формата изображения и уровня сжатия, использование CDN изображений и использование srcset для обслуживания нескольких версий изображений — все это методы, которые могут уменьшить размер передаваемых изображений.
Измерение производительности
В этом разделе обсуждаются измерения LCP применительно к каруселям. Хотя при расчете LCP карусели обрабатываются не иначе, чем любой другой UX-элемент, механика расчета LCP для автоматического воспроизведения каруселей часто вызывает путаницу.
Измерение LCP для каруселей
Вот ключевые моменты для понимания того, как работает расчет LCP для каруселей:
- LCP учитывает элементы страницы по мере их отрисовки во фрейме. Новые кандидаты на элемент LCP больше не рассматриваются, когда пользователь взаимодействует со страницей (нажимает, прокручивает или нажимает клавиши). Таким образом, любой слайд в автоматически воспроизводимой карусели потенциально может стать последним элементом LCP, тогда как в статической карусели потенциальным кандидатом на LCP может быть только первый слайд.
- Если визуализируются два изображения одинакового размера, первое изображение будет считаться элементом LCP. Элемент LCP обновляется только в том случае, если кандидат LCP больше текущего элемента LCP. Таким образом, если все элементы карусели имеют одинаковый размер, элемент LCP должен быть первым отображаемым изображением.
- При оценке кандидатов LCP LCP учитывает « видимый размер или внутренний размер, в зависимости от того, какой из них меньше ». Thus, if an autoplaying carousel displays images at a consistent size, but contains images of varying intrinsic sizes that are smaller than the display size, the LCP element may change as new slides are displayed. В этом случае, если все изображения отображаются в одном размере, изображение с наибольшим собственным размером будет считаться элементом LCP. Чтобы поддерживать низкий уровень LCP, вы должны убедиться, что все элементы в автоматически воспроизводимой карусели имеют одинаковый внутренний размер.
Изменения в расчете LCP для каруселей в Chrome 88.
Начиная с Chrome 88 , изображения, которые позже удаляются из DOM, считаются потенциально наиболее информативными отрисовками. До Chrome 88 эти изображения были исключены из рассмотрения. Для сайтов, использующих автоматически воспроизводимые карусели, это изменение определения окажет либо нейтральное, либо положительное влияние на оценки LCP.
This change was made in response to the observation that many sites implement carousel transitions by removing the previously displayed image from the DOM tree. До Chrome 88 каждый раз при представлении нового слайда удаление предыдущего элемента вызывало обновление LCP. Это изменение влияет только на автоматическое воспроизведение каруселей — по определению, потенциально самые большие содержательные отрисовки могут произойти только до того, как пользователь впервые взаимодействует со страницей.
Изменения пороговых значений в Chrome 121
Chrome 121 изменил поведение изображений с горизонтальной прокруткой, таких как карусели. Теперь они используют те же пороговые значения, что и вертикальная прокрутка. Это означает, что в случае использования карусели изображения будут загружаться до того, как они появятся в области просмотра. Это означает, что загрузка изображения с меньшей вероятностью будет заметна для пользователя, но за счет большего количества загрузок. Используйте демонстрацию горизонтальной отложенной загрузки , чтобы сравнить поведение в Chrome, Safari и Firefox.
Другие соображения
В этом разделе обсуждаются лучшие практики UX и продуктов, которые следует учитывать при внедрении каруселей. Карусели должны способствовать достижению ваших бизнес-целей и представлять контент таким образом, чтобы его было легко ориентироваться и читать.
Рекомендации по навигации
Обеспечьте заметные элементы управления навигацией.
Элементы управления карусельной навигацией должны быть легко нажимаемы и хорошо заметны. Это то, что редко делается хорошо: большинство каруселей имеют элементы управления навигацией, которые маленькие и незаметные. Имейте в виду, что один цвет или стиль управления навигацией редко будет работать во всех ситуациях. Например, стрелку, которая хорошо видна на темном фоне, может быть трудно увидеть на светлом фоне.
Отображение прогресса навигации
Элементы управления карусельной навигацией должны предоставлять контекст об общем количестве слайдов и прогрессе пользователя по ним. Эта информация облегчает пользователю переход к конкретному слайду и понимание того, какой контент уже был просмотрен. В некоторых ситуациях предварительный просмотр предстоящего контента — будь то отрывок из следующего слайда или список миниатюр — также может оказаться полезным и повысить вовлеченность.
Поддержка мобильных жестов
На мобильных устройствах в дополнение к традиционным элементам управления навигацией (например, экранным кнопкам) должны поддерживаться жесты смахивания.
Предоставьте альтернативные пути навигации
Поскольку маловероятно, что большинство пользователей будут взаимодействовать со всем содержимым карусели, контент, на который ссылается карусель, должен быть доступен из других путей навигации.
Рекомендации по удобочитаемости
Не используйте автозапуск
Использование автовоспроизведения создает две почти парадоксальные проблемы: анимация на экране отвлекает пользователей и отвлекает их внимание от более важного контента; одновременно, поскольку пользователи часто ассоциируют анимацию с рекламой, они игнорируют автоматически воспроизводимые карусели.
Таким образом, автовоспроизведение редко бывает хорошим выбором. Если контент важен, отказ от автовоспроизведения увеличит его доступность; Если контент карусели не важен, то использование автозапуска отвлечет внимание от более важного контента. Кроме того, автоматически воспроизводимые карусели могут быть трудными для чтения (и раздражающими). Люди читают с разной скоростью, поэтому карусель редко переключается в «нужное» время для разных пользователей.
В идеале навигация по слайдам должна управляться пользователем с помощью элементов управления навигацией. Если вам необходимо использовать автозапуск, автовоспроизведение следует отключить при наведении курсора мыши. Кроме того, скорость перехода между слайдами должна учитывать содержимое слайда: чем больше текста содержит слайд, тем дольше он должен отображаться на экране.
Держите текст и изображения отдельно
Текстовое содержимое карусели часто «вшивается» в соответствующий файл изображения, а не отображается отдельно с помощью HTML-разметки. Этот подход плох с точки зрения доступности, локализации и степени сжатия. Это также поощряет универсальный подход к созданию активов. Однако одно и то же форматирование изображений и текста редко одинаково читаемо в настольных и мобильных форматах.
Будьте краткими
У вас есть всего лишь доля секунды, чтобы привлечь внимание пользователя. Короткий и точный текст повысит вероятность того, что ваше сообщение будет донесено.
Лучшие практики продукта
Карусели хорошо работают в ситуациях, когда использование дополнительного вертикального пространства для отображения дополнительного контента невозможно. Карусели на страницах продуктов часто являются хорошим примером такого варианта использования.
Однако карусели не всегда используются эффективно.
- Карусели, особенно если они содержат рекламные акции или продвигаются автоматически, пользователи легко принимают за рекламу. Пользователи склонны игнорировать рекламу — явление, известное как баннерная слепота .
- Карусели часто используются, чтобы успокоить несколько отделов и избежать принятия решений по бизнес-приоритетам. В результате карусели могут легко превратиться в свалку неэффективного контента.
Проверьте свои предположения
Влияние каруселей на бизнес, особенно на домашних страницах, следует оценить и протестировать. Рейтинг кликов по карусели может помочь вам определить, эффективна ли карусель и ее контент.
Будьте актуальны
Карусели работают лучше всего, когда они содержат интересный и актуальный контент, представленный в четком контексте. Если контент не привлекает пользователя за пределами карусели, размещение его в карусели не улучшит его производительность. Если вам необходимо использовать карусель, расставьте приоритеты контента и убедитесь, что каждый слайд достаточно актуален, чтобы пользователь захотел перейти к следующему слайду.