Long content display - pagination, auto-loading with infinite scrolling

26.11.18 IT / Misc 2791

It is often required to display long content on a page, and this can be done in different ways. So content can be anything you like - plain text, images, products etc. The simplest approach is to leave it as it is, all content will be shown. But this is not the best option, since it takes more time to load all content from the database at once and render it on the page. Because of this, the browser may even freeze for a while. Therefore, it is necessary to use a pagination mechanism.

There are two known approaches to displaying long content on a site page - pagination or infinite scrolling . And the third is a combination of these options, this approach is used in popular services, social networks, etc.

Pagination of content

The first method is to splitting the content into separate pages . This approach has its merits and demerits. Among the disadvantages, one can single out the fact that the visitor has to perform additional actions on the page. Among the advantages are:

• good enough conversion - visitors are more likely to interact with the site;
• feeling of control - the user can easily find the desired piece of text or element, as well as quickly change the page;
• easy to remember the layout of the elements thanks to the clear navigation structure.

Auto-loading with infinite scrolling

The second way is infinite scrolling or scrolling. More suitable for large elements such as images. Among the advantages are:

• visitor engagement and material disclosure;
• no extra mouse clicks needed;
• it is easier to scroll content on mobile devices.

But there are also disadvantages of this campaign, of which there are more than the first method:

• higher device resource requirements, page performance suffers;
• the scrollbar may not show real navigation;
• difficulty of finding elements;
• the lack and difficulty of scrolling to the bottom of the page.

Hybrid approach

The third way is the most correct - to use the first approach where needed, in other places - the second approach, as well as their combinations. For example, scrolling to a certain position - you can show a navigation bar with a list of pages.

Thus, you can use different ways of breaking content on the page . The required approach is determined based on specific requirements based on content type and its other characteristics.