A typical retail site today takes 6.2 seconds to load its primary content — well short of the ideal load time of three seconds or less. Not only are e-commerce pages too slow to load, they appear to be getting slower rather than faster. Last summer, a typical page took 4.9 seconds to load primary content. This represents a 27 percent slowdown in just one year.
What Impact Does This Slowdown Have on Retailers?
According to a widely cited study by Aberdeen GroupOpens in a new window, a one-second delay in page load time equals, on average, a 7 percent loss in conversions, 11 percent fewer page views and a 16 percent decrease in customer satisfaction. Not surprisingly, offering a faster user experience has a positive impact on business metrics. Wal-Mart has famously announced that for every one second of performance improvement, its site sees up to a 2 percent increase in conversionsOpens in a new window
Why the Dramatic Slowdown?
The sheer growth in web page size and complexity is largely responsible for this deterioration in performance. The median retail page is 1,677 KB in size and contains 100 resources (e.g., CSS, image files, etc.). Last summer, the median page was 1,007 KB in size and contained 82 resources. In other words, a typical page has grown by 67 percent in just 12 months. This rate of growth is unprecedented in the history of the web.
Poorly Implemented Responsive Web Design (RWD)
Responsive design is the practice of constructing a single website so that it renders in the ideal size and format across all platforms. While RWD has been hailed as an alternative to overly simplified mobile sites, critics claim that responsive pages are inherently slow. This criticism is understandable. A few months ago, I conducted an informal survey of 60 popular sites that use RWD and found only 20 percent delivered an even remotely speedy user experience.
This slowness, however, has more to do with poor implementation than with RWD itself. Many web design and usability professionals advocate for practices such as using the largest possible images in their responsive designs and then letting the browser do all the work of scaling them down to the appropriate size. This practice might make the designer's job easier, but it has a huge negative impact on performance.
Oversized, Badly Formatted, Unoptimized Images
We're so accustomed to seeing high-quality images everywhere on the web that we take them for granted and don't think about their heavy performance impact. Page size has a direct impact on page speed, and images comprise at least half a typical page's weight. This represents an extremely fertile ground for optimization.
Most of the websites tested failed to properly implement image optimization techniques that could make their pages significantly faster. Almost half (43 percent) of the websites failed to implement image compression, a performance technique that minimizes the size (in bytes) of a graphic's file without degrading the quality of the image. Progressive image rendering is another technique that can improve both real and perceived performance, yet two out of three websites in this study didn't use progressive JPEGs.
Takeaway: 3-Second Load Times Are Possible
Even for top retailers, tackling web performance is like aiming at a constantly moving target. As soon as you've gotten a bead on one performance issue, a brand new challenge pops up. The silver lining here is that the impact of all this complexity can be mitigated with a thoughtful optimization strategy and a commitment to evolving this strategy to continue to meet future demands.
Overall, there are a number of optimization techniques that site owners can implement to speed up their pages. Here are a few:
- Make sure images are compressed and in the correct format.
- Minify page code.
- Ensure that featured content loads first and nonessential content loads last.
- Use a content delivery network to bring page resources closer to end users, thereby shortening server roundtrip time.
- Consolidate page resources into bundles so that fewer roundtrips to the server are required.
- Implement asynchronous versions of third-party scripts which don't block the rest of the page from rendering.
- Use a real-time monitoring solution to gain ongoing visibility into the performance of pages.
Tammy Everts is performance evangelist at RadwareOpens in a new window, a provider of application delivery and application security solutions.