Piazam's home page now uses less than half the data

Most people shop on Piazam from a phone, and many of them on mobile data. Every kilobyte the home page weighs is data they pay for and time they spend waiting on a budget phone. So this week we put the home page on a diet. Opening it used to take about 1.2 MB of data, not counting the product photos. Now it takes about 0.5 MB, and it looks exactly the same.

Where the weight came from

When we looked closely, most of the page wasn't products. It was the small things around them, repeated on every card:

• Stars and icons. Every card drew its rating star by star, with its own copy of each star, plus a heart and an eye. Across the page that came to more than 800 tiny drawings.
• Too many products at once. On a phone, the first load carried 40 products, with details for 100, when a screen shows about six.
• Sections phones never show. The page also carried the shop's category sections, which only appear on a computer screen. Phones downloaded them and then hid them.
• More detail than a card needs. Every product came with its full record, when a card only shows its picture, name, price, rating and a few labels.

What we changed

Each rating drawn in one go. A card's rating is now drawn in one go instead of star by star, using the same star shape as before. The heart and eye work the same way. The page went from more than 800 little drawings to under 100. We compared the new stars with the old ones pixel by pixel to make sure nobody would see a difference.

12 products first, the rest straight after. A phone now gets 12 products with the page, enough to fill the screen and a few rows more. The rest load right after the page appears, in the same order, so scrolling feels the same as before.

Sections only where they show. On a computer, the first two category sections come with the page and the others load as you scroll toward them, well before you reach them. Phones don't show these sections, so they no longer download them at all.

Only what the card shows. Each product now travels with just the details its card displays. The shop's menu got the same treatment: it used to carry every category's full record on every page of the site, and now it carries only what the menu shows. That alone saves about 60 KB on every page, not just the home page.

What it changed for shoppers

• Opening the home page takes less than half the data: about 0.5 MB instead of about 1.2 MB, not counting the product photos.
• In our tests on a simulated mid-range phone, the time the page kept the phone too busy to respond to a tap fell by half, from about 2.3 seconds to about 1.1.
• The phone has nearly half as many parts to lay out.

Nothing about how Piazam looks or works changed. The products, the order they come in, your cart and your saved items are all as they were.

What we'd tell anyone building a shop

• Look at what repeats. One small icon doesn't matter. The same icon on 80 cards does.
• Send what fits the screen first. Load the rest just after the page appears, not before.
• Don't send what you hide. If a phone never shows something, it shouldn't download it.
• Send what the page displays, not everything you know. The full record can wait for the product's own page.

If anything on Piazam still feels slow on your phone, tell us at info@hexerize.com.