0

I'm creating an eCommerce website, and I've read numerous posts about making the UX better by loading more products when the user gets near to the end of the page. However, why not just load all products and use a script like lazyload to load images later? That way I think it would depend less on the client side, therefore making the browser more responsive.

So here is my main question:

Why not load all products at once and load images separately?

2

For an ecommerce application I would say that infinite scrolling is not the way to go. Infinite scrolling tends to be better for social media/discovery type websites as it allows for more user engagement and tends to be better for mobile as the user simply scrolls and never has to click.

However, these positives come with a price. Mainly, poor page performance, heavy consumption of device resources, inability to bookmark previous locations to come back to it later and unless you have a fixed footer you will typically not ever be able to show that to the user which can have valuable information.

That being said, from the UX perspective, on an ecommerce website it is often better to get the necessary items at once rather than anything you can find because you can better direct your user.

I would recommend a pagination system that allows the user to choose how many items are displayed on their screen. This gives the user more control and allows them to bookmark items as they paginate past. Although there may seem to be more actions for the user to perform, it gives them the tools to more intuitively navigate your products. They will be able to say "Oh, that item was on page 3" and quickly access it.

According to UX Planet, pagination can lead to better conversion rates, a deeper sense of control for the user and allows for easier item location.

If you are wishing to minimize page refresh, you might consider an AJAX solution to load paginated content within the page. Just make sure the URL gets updated with each "page" within your product area.

I recommend reading through the entire UX Planet article as it goes into more detail and could help you with your decision.

As for the better practice between JSON appending to the dom or loading directly as html. I believe that is a better question for the Stack Overflow portion of stack exchange.

Hope this helped.

  • Thanks, the only problem i have with pagination is that it involves the user doing actions every 30 products for example , especially when i know that they will not be bookmarking it because the order changes with time – Ahmed Wessam Aug 3 '17 at 19:15
  • Order changes? Not sure what you mean. If it is ecommerce similar to Amazon or most large retail websites, people will see something, remember where it is and come back to purchase or get more details later. You could also give them the option of loading up to 100 items at a time if it's an issue of just not enough items. They still would be able to benefit from the pagination because you are giving them the tools to control their flow. – Nick_M Aug 3 '17 at 19:21
  • Well yes its a grocery store and order would change as new items show first . I understand the benefits of pagination however most of my users will just go throught the websites and buy what the like and not go directly some where , thats why i think pagination is not beneficial for me , i think i will stick with loading everything once , do you know any drawbacks of that ? – Ahmed Wessam Aug 3 '17 at 19:24
  • The only drawbacks are: page performances get slower, heavy device resource use, item search and location, scroll bar does not accurately reflect the amount of data and lack of footer. Visit the site I posted in the original response and they have extreme detail. Etsy also did a study and tried to switch their application to infinite scrolling several months ago, but ended up returning to pagination as user engagement suffered. They found the pagination much more effective. – Nick_M Aug 3 '17 at 19:28
0

Your page would load too slowly, as it waits for the larger amount of data to download. Specifically, your above the fold content would be delayed waiting for content the user might never see.

Google recommends that only a small amount data should be required to display the initial "above the fold" content of a web page:

If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.

Even if you don’t care about SEO, you want to take Google’s advice on this, as it’s based on what they know about use behavior. Even a small delay before content being displayed will cause users to give up on your page loading.

Nielson/Norman Group agrees:

Summary: Slow page rendering today is typically caused by server delays or overly fancy page widgets, not by big images. Users still hate slow sites and don't hesitate telling us.

Speed is one of the most important aspects of a website, and loading large amounts of data to a browser is inherently slow. You want to stive to get screenfuls (especially the first screenful) of data to the user quickly, when they request it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.