A blog about user experience.

Amazon's Home Page Performance on its 2nd Annual Prime Day

The Prime Day experience proves you can engage users with animation while ensuring good performance.

Amazon's second annual Prime Day on July 12, 2016, featured a redesigned home page to showcase all those special deals available for prime members. On top of that, a glitzy hero animation was featured. And best of all, web performance didn't suffer. Hat's off to Amazon for a great user experience.

Sure animation is cool, but how well will something like a simple .mp4 hero video perform? That really depends on your overall approach. Before I delve into the Prime Day performance, let's first think about the various ways to handle animation in the first place.

The easiest way is to put the animation on the page, and hope the user has a fast connection. Often times, this was my typical approach in the rare instances that the project called for a video. On such projects, there was usually little time for UX to work with dev to come up with a good solution. A better solution would be to use a skeleton screen approach, by adding a background color below the animation. While this is step in the right direction, users will still have to wait, and wait.

The Right Way

Amazon chose a great approach to handing the animated hero. In looking at the waterfall chart, a static hero image loads first in position 8, right behind an image sprite.

Being able to get the hero to download quickly is one of the best practices to get the above the fold content to render.

This behavior with the site is the rule rather than the exception for the Prime Day experience. Having reviewed numerous waterfall charts from the site over the past year, this is the standard pattern I've observed - to load the hero as quickly as possible. As a result, the hero image was displayed in 1.3 seconds, over a a cable connection, using Chrome.

What really makes the hero render that quickly though is because of the smooth sailing it receives. Notice in the waterall chart below, the red vertical line which is positioned at 1.3 seconds in the filmstrip. In looking at the files that are downloaded, notice that all the javascript files below the hero loads after the 1.3 second mark. In looking at the source code, it appears that some javascript is inlined into the page.

Next, came the .mp4 file. Apparently there were different versions. The one I saw featured various characters including a Corgi-shaped balloon that floated above a trolley. Throughout the animation, there was lots of colorful confetti being thrown about to celebrate.

This 28-second clip was roughly 3145.7 KB in file size, and took approximately 11190 ms to download. This animation then kicked in once the file was downloaded.

Takeaways

This approach was effective for the following reasons:

What This Means For UX

Although this good experience seems like it is common-sense and easy, it does really take careful planning and thought. Animation can create a great experience and we should embrace it when we think it will help the user. But we need to work with developers upfront to make that happen. As you've seen, there are many little moving parts that need to be in synch to make it work successfully. That might also mean talking to your project team to make sure that there is enough bandwidth and time allocated so it can be implemented effectively.


References

About · Contact

© 2016 Speedy UX. All rights reserved.