Бесконечная прокрутка против пагинации (и против дополнительной загрузки)
easy

Бесконечная прокрутка против пагинации (и против дополнительной загрузки)

На это можно смотреть бесконечно

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

Пагинация

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

Есть несколько видов такого разбиения:

  • нумерация страниц в прямом или обратном порядке — от первой к последней или наоборот;
  • диапазоны в прямом или обратном порядке;
  • по алфавиту;
  • точки.

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

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

Результаты поиска в Яндексе отображаются постранично
Результаты поиска в Яндексе отображаются постранично

У пагинации есть много плюсов, из-за чего она используется до сих пор:

  • Если информация как-то ранжируется, польза первых страниц очевидна. Считается, что результаты поиска на первой странице выдачи поисковой системы будут чем-то лучше, чем на следующих.
  • Контент разбивается на части, что облегчает его обработку. Можно приблизительно запомнить, на какой странице отображалось что-то конкретное, так что к ней легко вернуться при повторном поиске. Это проще, чем просматривать бесконечный список.
  • Каждая порция информации имеет собственную страницу и URL-адрес. Это удобно, если нужно поделиться ссылкой.
  • Страница загружается быстрее. С пагинацией производительность сайта растёт, так как одновременно нужно загружать меньше данных. С более быстрой загрузкой страниц навигация по сайту более плавная.
  • Можно оценить количество информации на сайте. Когда мы видим, сколько страниц можно просмотреть, нам легче представить примерный общий объём и сколько времени предстоит потратить.

А теперь про минусы, они тоже есть:

  • Большинство пользователей не открывает страницы дальше второй или третьей. Это обратная сторона очевидной пользы первых страниц — если они лучше, часто непонятно, зачем просматривать остальные.
  • Плохие результаты индексации. Страницы, которые находятся в нескольких кликах от той, на которую попадёт пользователь, обычно занимают не очень высокие позиции в поисковых системах.
  • От пользователя требуются дополнительные действия. Если страниц много, на странице могут отображаться ссылки только на часть из них. Чтобы перейти на остальные страницы, нужно нажать на кнопки «Дальше» или «В начало».
  • Пагинацией неудобно пользоваться на мобильных устройствах. При просмотре контента на смартфоне или планшете нам привычнее листать и смахивать, чем нажимать на кнопки.

Бесконечная прокрутка

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

Результаты поиска в Гугле отображаются бесконечно

Бесконечную прокрутку за счёт её плюсов чаще всего можно встретить на развлекательных и новостных ресурсах, а также в социальных сетях:

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

Но есть и минусы:

  • По мере прокрутки количество порций данных увеличивается, страница становится тяжелее, и сайт может работать медленнее. Представьте, что вы прокрутили вниз примерно 50 экранов — и многое из этого браузеру приходится хранить в памяти (или выгружать куда-то, что тоже может повлиять на удобство использования).
  • Поисковые роботы не умеют имитировать поведение человека на таких страницах, проще говоря — они не умеют бесконечно скроллить. Контент на сайте нужно настраивать для индексации.
  • Если загружено много порций, уже просмотренную информацию сложнее найти. При постраничной навигации можно примерно помнить, где был какой-то контент, а при прокрутке это невозможно — мы не запоминаем, сколько экранов назад что-то видели.
  • Чтобы вернуться в начало страницы, нужно либо прокрутить наверх всю подгруженную информацию, либо перезагрузить страницу.
  • Подвал сайта становится бесполезным — пользователь до него просто не доберётся :-) Если там расположены разделы с контактной информацией, условиями использования и всем остальным, ссылки на них нужно дублировать в шапке сайта.

Дополнительная загрузка

Дополнительная загрузка контента происходит не по мере того, как пользователь достигает конца уже загруженного, а по нажатию какой-то кнопки, например «Загрузить ещё» или «Показать больше».

На сайте «Кода» — как раз дополнительная загрузка контента

Дополнительную загрузку можно назвать компромиссом между пагинацией и бесконечной прокруткой. У неё есть свои плюсы:

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

Минусы тоже есть:

  • От пользователя всё-таки требуются какие-то действия, помимо листания страницы.
  • Сложно найти ранее просмотренный результат по памяти.
  • Вовлечённость пользователя меньше, чем при бесконечной прокрутке.

Как это сделать технически

Любой из видов разбиения контента на порции можно реализовать с помощью основных технологий, которые используются в веб-разработке. Классический вариант — реализовать нужное разбиение при помощи JavaScript, HTML и CSS, но вместо JavaScript можно использовать и Python, и PHP, и AJAX и так далее.

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

А что лучше?

Как обычно, всё зависит от задач:

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

А вообще перед настройкой такого на сайте надо посоветоваться с SEO-специалистами: скорее всего, у них уже будет ответ, что именно сработает лучше конкретно в вашем случае.

Текст:

Инна Долога

Редактор:

Михаил Полянин

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Юлия Зубарева

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Начать бесплатно
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy