A product page with lots of options can do a surprising amount of work before the customer has chosen anything. Prices, images, availability and purchase controls all need to be assembled.
I make the first view useful, load expensive option details in a controlled order and give failed requests their own message. A customer should be able to tell whether an option is still loading, unavailable to buy or temporarily unable to load.
Make the first view useful
A faster first paint is worthwhile only if the page helps someone move towards a decision. The product’s identity and explanation should be available while the extra options arrive. I do not want someone staring at a collection of animated grey boxes with no idea what they are waiting for.
Placeholders should reserve a sensible amount of space. Otherwise the controls can jump as prices and images appear, just as someone reaches for them. I look at the whole transition, not just a screenshot before or after loading.
Load options in a sensible order
Group related requests and keep a limit on concurrent work. Smaller batches and a queue can make a large option list more manageable than requesting every card at once. Check that the public read path returns the right option data without exposing information the visitor should not receive.
There is no universal rule that every product option should wait until the whole page has loaded. I choose when to fetch based on what the customer needs first, and check it on a slower connection. Deferring essential controls too aggressively can make the page look quick while leaving the shopping task slow.
A failed request is not an out-of-stock result
If the details fail to arrive, the interface knows that loading failed. It does not know that the product has sold out. The April changes gave that path an explicit message instead of leaving the card looking permanently busy.
I want a clear way to recover, whether that means retrying or opening the full product page. I also check the accessible text: decorative placeholders can be hidden from assistive technology, but the real options and any useful error must be available once they replace them.
Check the options, not just the animation
- Only request variations the customer is meant to see.
- Keep the returned card associated with the correct product and option.
- Check prices and availability after a product update.
- Try a slow response, a failed response and navigating away halfway through.
- Check keyboard use and what remains available if the extra script fails.
For a shop, useful performance means making the choice easier to complete. The loading state is part of that experience, rather than a bit of decoration around the real page.