There are many reasons why you shouldn’t load all your results in a single page:

 

Pagination and infinite scrolling are common solutions to this problem. They’re not ideal. Baymard recommends using a Load More button if you have to.

 

Pagination isn’t great

Pagination is when web content such as search results or reviews is split into multiple pages that have to be loaded separately.

The page links are usually small and hard to click especially on mobile. Loading a second page can be a slow process that annoys the user to no end. But the most compelling argument against pagination is simply that no one will bother opening additional pages.

The average Google search returns thousands of results spread over multiple pages yet the first five results get 67% of all the clicks. Results on the first page get 95% of all the traffic, those on the second and subsequent pages get only 5%. 

 

Infinite scrolling is evil

You scroll down and think that you reached the footer, but no, here’s more results for you. But I want to get to the footer! Nope , not yet, keep trying.

It works fine for social media feeds but the objective of Twitter and Facebook is to keep users on their platforms for as long as possible by showing them as much stuff as possible. But your objective is to get them to spend money, not show them your entire inventory.

 

Implementing the “Load more” button on desktop

Use a combination of lazy loading and a “Load More” button. Show about 10-30 products on page load, and then lazy load another 10-30 products as they scroll down, until they reach 50-100 products. Then, display a “Load More” button and repeat.

 

Implementing the “Load more” on mobile

Show 15-30 on page load then show a “Load More” button. When the user clicks on it, load the next 15-30 elements all at once (no lazy loading).

Examples