2

I'm developing an e-commerce site and there are about 200-500 products available for sale. We want to show a 100KB .jpg for each product on the home page. So the home page would essentially load 200-500 images that are each 100KB.

Doesn't that amount to a 20-50MB page load which is really bad?

My main concern is that the search engines will penalize us and we will never be able to get on the first page of the search results. Is this true?

And the other main concern is that we are forcing users to download 20-50MB of content...which sounds pretty bad.

If this is as bad as I think it is, then is there any way to keep all 200-500 images on the home page without using pagination? What would you recommend?

Improve this question
5
  • 2 questions: Are these all different products, or just X number of products plus variations? . 2nd question: if 300 different products, what's the rationale behind it? Why do you want to do this and what are your goals?
    – Devin
    Nov 15, 2018 at 18:31
  • They are all different with different names and different prices but some look very similar. Regarding the rationale, we think we have a unique set of products that have never been seen together before and if people see them all at once then they will spread the word.
    – Ryan
    Nov 17, 2018 at 21:55
  • How do you envision people navigating the 300 items?
    – Michael Hogan
    Nov 21, 2018 at 14:53
  • Have you developed a persona for your audience? If so, can you edit your question to add a list of expectations you have for what device they’ll use to access your site and whether they’ll access it at home with WiFi or on the go with cellular?
    – Michael Hogan
    Nov 21, 2018 at 15:38
  • The 300 items/images are simply an image grid - no other content. Each item belongs to a single category and each category is grouped together in the image grid. The site header is sticky and it has a category drop down. When you select a category from the drop down you jump to that category in the image grid via hashtag URLs. We haven't done a persona - the site is responsive and anyone can use any device.
    – Ryan
    Nov 22, 2018 at 15:12

6 Answers 6

Reset to default
4

Doesn't that amount to a 20-50MB page load which is really bad?

Yes. This is alot of images (and size) to download, especially for mobile. It will take an age to load and hammer the users data usage. The average size of a web page is 3mb.

Id also look to compress those images more, if this is just the cover images of the site then you can compress the size down further if needed. Look at image optimisers or the way you are exporting them to do this.

  1. Presenting the user with 500 products straight away, I would argue, is quite overwhelming. I would consider looking at a landing page style format to allow users to filter their way to what they want exactly. Presenting the user with alot of products at once will likely not get as many sales, read the Jam Study, this is a great example of consumer psychology and how more choice does not mean more sales:

https://medium.com/@FlorentGeerts/the-jam-experiment-how-choice-overloads-makes-consumers-buy-less-d610f8c37b9b

https://digitalwellbeing.org/the-jam-study-strikes-back-when-less-choice-does-mean-more-sales/

  1. If you have your heart set on all at once, look at infinite scrolling that loads in a batch of images/products and then another batch lazy-loads more images as users scroll down the page.

Id strongly recommend the first option.

Improve this answer
3

Why would you mess with a user in such a way ? Giving him 500 products will not drive a sale for sure. Try at least to display if not only 5 to 10 products at most 20 products with a shadow and button saying view all 500 products. Not to mention loading times, SEO and other stuff.

Improve this answer
1
  • 1
    "will not drive a sale" ... it would actively drive me away from a sale! I think any site that did this would instantly be on my "never go there again" list.
    – TripeHound
    Nov 13, 2018 at 15:09
1

Personally (as I've already said in a couple of comments) I'd never go near a site again if it tried to show that many images on the home page – even if it used some combination of progressive or lazy loading as mentioned in other answers.

Apart from the loading times and data usage, that many images would be far too many to "take in", so it would be (in my opinion) completely counter-productive to try to do so.

The only conceivable way you could allow this outcome (show everything on one page) would be to divide your products into a few categories (I would say probably not more than 10; certainly not more than 20) and either show a single image for each category (e.g. in a grid), or show a few sample products from each category in rows (one row of images per category).

You could then implement a "Show all products in a category" function. On many websites this would take you to a per-category page, showing all relevant products: in your case you could dynamically expand the selected category on the home page and start loading all products. There should also be a "Hide products" function of some sort to collapse the category (but probably leaving the images "present" in the page; just hidden).

With all that in place, you could then conceivably add a "Show all 495 products" button which would expand all categories and (eventually) show all products. I would still argue against the overall usefulness of such a function, but at least it only happens at the user's choice and they are warned in advance how many images are going to be loaded.

Improve this answer
0

This seems to be a bit too much. Is there a reason for showing all the products on the homepage? There are just too many products. If we assume that you will have approx 4-6 products per row, it is still 83 rows. That is quite a lot.

So, the suggestion from Owen Hughes that you should use infinite scrolling is a good one. But infinite scrolling has its disadvantages (users usually loose progress if they refresh the page, they can never reach the footer etc). Which might not be a problem for you. But it is still, technically a pagination.

One of the other possibilities you could do is called a lazy loading. Meaning that you start loading images when you reach a certain scroll position? It is very similar to infinite scrolling, but without hiding the actual content.

Improve this answer
0

No

The problem with 300 images is a user would have to browse up to 300 images to find the right product.

In commerce there are all kinds of patterns for filtering and searching products; its a cornerstone of UX

Furthermore, 300 large images will be very unwieldy on mobile devices.

My strong advice is to organise the products into some kind of IA (needs testing of course) and control the display via filters, search etc

Improve this answer
0

Its more than OK, its ideal.

I'm visiting an online shop and their homepage is the full product catalogue? What? I do not have to pass through a boring and time-consuming homepage? Excellent!
And there is no need to "battle" again with a malfunctioning and badly organized menu? Great!
And I do not have to switch again from "12 products per page" to "show them all"? Awesome!
As a client, I would be very happy with your shop.

And from the other side, the production side, it is possible. Can you compromise your initial page design and reduce the image dimensions a bit?
Can you optimize images for web usage? (this includes image editing, it is not only file compression)
Can you design and develop a user-friendly downloading system for this page? Loading everything at once may not work well or not work at all for some visitors. Breaking the full load to smaller pieces may help. You can even include the user to this system. You can ask him "Did you find the product? Should I download 100 more?"

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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