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

Цифры против карусели. В известном исследовании университета Нотр-Дам по слайдеру на главной кликали около 1 процента посетителей, и подавляющее большинство кликов приходилось на первый слайд. Остальные слайды - это вес, который грузят все, а видят почти никто. С тех пор исследования юзабилити стабильно подтверждают картину.

Почему слайдер замедляет загрузку сайта: три причины

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

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

Что карусель делает с конверсией первого экрана

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

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

Переделаем первый экран под скорость и заявки

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

Разогнать первый экран

Чем заменить слайдер на главной странице

Рабочая связка: статичный первый экран с одним главным оффером, заголовком и кнопкой, а под ним - сетка из 2-4 баннеров для остальных предложений. Так каждый оффер получает постоянное место, посетитель видит всё без ожидания, а страница легчает на мегабайт-полтора. На посадочных страницах это правило ещё жёстче: один экран - одно сообщение, что мы всегда закладываем в разработку лендингов.

Как облегчить слайдер, если убрать его нельзя

  1. Сожмите изображенияWebP вместо PNG и JPEG, отдельные размеры для мобильных через srcset. Типичный слайд худеет с 800-1500 КБ до 100-200 КБ.
  2. Грузите заранее только первый слайдПервый слайд - с высоким приоритетом и preload, остальные - лениво, по мере листания. Ленивая загрузка первого слайда - ошибка, ухудшающая LCP.
  3. Отключите автопрокруткуОна раздражает, мешает читать и сжигает ресурс главного потока. Пусть посетитель листает сам - заодно статистика покажет, листает ли вообще.
  4. Замените библиотеку на лёгкуюСтарые карусели тянут jQuery и сотни килобайт. Современные CSS-решения со scroll-snap обходятся почти без JavaScript.
  5. Сократите число слайдовТри вместо восьми: по статистике кликов дальше третьего всё равно почти никто не доходит.
Проверка за 5 минут. Откройте PageSpeed и посмотрите, какой элемент назван LCP. Если это слайд карусели - вы нашли главный тормоз первого экрана. Сравните также вес страницы с включённым и вырезанным слайдером через DevTools: разница обычно впечатляет.
Важно. Меняя слайдер, не удаляйте его резко вместе с разметкой: на слайды часто ссылаются рекламные кампании и меню. Сначала статичная замена и редиректы с якорей, потом чистка кода - иначе к вопросу скорости добавится вопрос битых ссылок.

Частые вопросы про слайдеры и скорость

Слайдер вообще нельзя использовать на сайте?
Можно - там, где посетитель сам управляет просмотром: галерея фото товара, отзывы, портфолио. Вредна именно автоматическая карусель офферов на первом экране: она тяжёлая и размывает сообщение. Внутри страницы лёгкий слайдер - нормальный инструмент.
Как понять, что тормозит именно слайдер, а не сайт в целом?
Три признака: LCP-элементом в PageSpeed назван слайд, в списке ресурсов страницы картинки слайдов занимают верхние строчки по весу, а на скриншотах загрузки первый экран долго остаётся пустым. Если метрики плохие и без слайдера - смотрите шире: разбор Core Web Vitals поможет с диагнозом.
Руководство настаивает на карусели - что делать?
Показать цифры: карту кликов по слайдам из вебвизора и балл PageSpeed с каруселью и без. Обычно статистика «по второму слайду кликнули 4 человека за месяц» убеждает лучше любых статей. Компромисс - лёгкая карусель без автопрокрутки на 2-3 слайда.
Сколько стоит заменить слайдер на статичный первый экран?
Типовая задача: дизайн-макет первого экрана, вёрстка, перенос офферов в баннерную сетку - от 200-400 BYN в зависимости от шаблона. Точную смету считаем за день после взгляда на сайт.

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