This is the second post in a series on what makes great performing retail apps. See previous: 3 Essential Traits of Retailers with Great End-User Experience

When we studied the top 20% of the Internet Retailer 500 list for load time, we saw some dramatic differences between those apps and the rest of the top 500.

As we noted in our last post, a major differentiator is related to the complexity of content and weight (in bytes).  The best-performing 20% have forty percent fewer on-page assets overall.

This could be attributable optimization practices such as script concatenation and image spriting that reduce the number of assets by bundling them into single requests. Fewer assets mean fewer requests to the server, and since each request takes time (no matter how small the file) these techniques can help to streamline the page load process.

Gotta carry that weight

Concatenation and spriting  don’t change the weight, or total number of bytes, however.  Simply bundling assets won’t materially change their properties.  and the difference in weight of these top sites was even more pronounced, at 45%:

So these top retailers could have done something to compress their files as well. There are a litany of techniques, many applicaple to images, to cut down on weight. They range from the common (standard gzip compression) to advanced (as described here by an expert).

A simpler explanation?

It could be that these are just simpler pages, with less content.

Let’s look at a couple examples.  An unscientific comparison, sure, but we tried to match application styles and functionality.

From the top 20%: Stagestores.com

This app has excellent performance. It renders primary content in half a second, and fully loads in 2.5 seconds. It’s buoyed by a 791 KB page weight, making it among the lightest in the IR 500. They also have included an interesting performance trick by making the central content area a single image and placing a clickable HTML area over the “links” shown on the image.

The page load sequence looks like this:

Most importantly, this is by most accounts a fully functional, robust eCommerce applicaton with all the features you would expect to find. They didn’t have to cut many corners to achieve great performance.

Next, let’s look at a lower ranked app: Discountdance.com.

This doesn’t appear to be significantly more functional than Stage Stores’ application. And yet the performance story is much different. This app takes over 2 seconds to display any content, 6 seconds to fully display, and 9 seconds to be fully interactive.

One major contributor is likely the images. The page contains 1400 KB of images alone – compared with 555 KB of images on Stage Stores. Overall, this page’s 2.1 MB weight is nearly triple the overall page weight of the Stage Stores app.

The page load sequence looks like this:

Notice that a small dialogue on the far left side – that offers to bring users who are dance teachers to a unique app experience – pops in before the main image. To be in line with best practices, this dialogue could be delay-loaded or de-prioritized behind the main image to ensure that it doesn’t block or slow down the rendering of more important content. It’s unlikely that a user will utilize that feature until they can visually engage with the fully rendered page.

These two apps represent a tiny sample, and it’s far from a comprehensive study. But the comparison shows that lighter pages don’t have to sacrifice functionally.

Lessons in App Optimization to Improve End User Experience

The takeaways from our findings are:

• Lighter, simpler pages perform better
• Images carry much of the weight gain or loss for apps
• Simpler doesn’t necessarily mean less functional; with a thoughtful approach to app optimization you can have the best of both

Look out for our next post on mobile performance soon!