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.
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.
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.
This approach was effective for the following reasons:
- The static image was able to load quickly, rather than forcing the user to wait.
- I didn't see the animation on mobile or tablet. This makes sense since it would take much longer to download, plus use more bandwidth.
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.