Сегодня я расскажу в чем проблема библиотек слайдеров на javascript. В целом я не против слайдеров и каруселей - их можно сделать так, чтобы они минимально влияли на быстродействие сайта. Однако готовые библиотеки, например slick и owl, сильно влияют на #LCP, #CLS и #TBT. Сегодня я расскажу в чем основная ошибка этих библиотек, и как избежать этих ошибок, разрабатывая свое решение.
1. Стилизация слайдера происходит через классы, которые добавляются только при инициализации. В связи с этим до инициализации страница выглядит совсем по другому, или часть элементов вообще скрыта, зависит от библиотеки и настроек. Это влияет на LCP, если слайдер скрыт, и на CLS, если не заданы размеры. Слайдер изначально развернут, и потом схлопывается до конечных размеров.
2. Слайдер при инициализации вносит изменения в DOM, добавляя классы и элементы, меняя родительские и дочерние элементы. Происходит буквально переверстка страницы, а как следствие ее перерисовка. Это влияет в первую очередь на TBT.
3. При карусели с бесконечной прокруткой, слайдер добавляет клоны предыдущих и следующих элементов, чтобы обеспечить анимацию. Это вызывает лишние перерисовки и раздувает DOM, если внутри содержится сложная верстка.
Как сделать свой слайдер без всех этих ошибок? Используйте CSS. Делайте так, чтобы даже с выключенным JS слайдер можно было скроллить при помощи встроенного скролла и свойства
scroll-snap-type. Все элементы слайдера формируйте в верстке или на backend, и в js прописывайте только взаимодействие. Например, клики по стрелкам или точкам под слайдером. JS не должен менять структуру DOM без явного взаимодействия с пользователем. Только после клика или свайпа можно добавлять класс, или следующий элемент для плавных анимаций. Внешний вид слайдера не должен отличаться при выключении JS.
Когда-нибудь я напишу пример на чистом JS, чтобы поделиться с вами.
Пишите коммент, и ставьте лайк, если нужен пример хорошего слайдера, или присылайте свое решение.
