Every quarter at Radware, we measure and analyze the performance of the top 500 retail websites.* And every quarter, I’ve grown accustomed to the persistence of two trends: pages are growing bigger and, not coincidentally, slower.
But while I expected to see some growth and slowdown in our latest research — released this week in our State of the Union: Ecommerce Page Speed & Web Performance [Summer 2014] — I have to admit that I wasn’t expecting to see this much:
- The median top 100 ecommerce page now takes 6.2 seconds to render primary content (AKA Time to Interact or TTI). In our Summer 2013 report, the median TTI was 4.9 seconds. In other words, TTI has slowed down by 27% in just one year.
- The median page has grown by 67% in one year — from 1007 KB in June 2013 to 1677 KB in June 2014.
Our other findings included:
- Only 14% of the top 100 pages we tested were able to meet user expectations by rendering primary content in 3 seconds or less.
- 17% of the pages we tested had a TTI of 10 seconds or longer.
- 43% of sites failed to implement image compression.
- 66% did not use progressive JPEGs.
Why the dramatic slowdown?
The long answer to this question is as complex as modern web pages themselves. But the short answer is simple: web pages have never been as large and complex as they are today.
The performance challenges that plague modern web pages have been born out of all the great things we can now make pages do: dynamic content, high-resolution images, carousels, custom fonts, responsive design, and third-party scripts that gather sophisticated data about visitors.
But all of this amazing functionality comes with a high performance price tag if it’s not implemented with performance in mind.
Take images, for example. We’re so accustomed to expecting to see 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. As such, they represent an extremely fertile ground for optimization.
Yet we found that many leading retailers are not taking advantage of techniques such as image compression and progressive image rendering, which can improve both real and perceived load time. More on this later in this post.
Page complexity and how it affects Time to Interact
To better understand the impact of page size and complexity, we can look to two additional metrics for more insight:
- Time to First Byte (TTFB) – This is the window of time between when the browser asks the server for content and when it starts to get the first bit back.
- Start Render Time – This metric indicates when content begins to display in the user’s browser. Start Render Time can be delayed by slow TTFB, as well as a number of other factors, which we’ll discuss after we’ve taken a moment to enjoy this nifty graph:
Slow Time to First Byte is usually a sign that the site has server issues or a latency problem. These problems can be addressed updating your server environment and by using a content delivery network (CDN) to cache page resources closer to end users. Most (78%) of the sites we tested currently use a CDN, and this number has not changed appreciably in recent years. And while our research doesn’t give us visibility into each site’s server environment, it’s safe to assume that the sites we studied are already on top of that. Therefore it’s not a surprise that TTFB has not changed significantly. Site owners are already doing about as much as they can to address TTFB. Throwing more servers at the problem won’t do anything.
Images: The low-hanging fruit of front-end optimization
At least half of a typical page’s weight is comprised of images, yet most of the pages we tested failed to properly implement image optimization techniques that could make their pages significantly faster.
Almost half (43%) of the pages we tested failed to implement image compression, with 8% scoring an A. Image compression is a performance technique that minimizes the size (in bytes) of a graphics file without degrading the quality of the image to an unacceptable level. Reducing an image’s file size has two benefits:
- reducing the amount of time required for images to be sent over the internet or downloaded, and
- increasing the number of images that can be stored in the browser cache, thereby improving page render time on repeat visits to the same page.
In last week’s post, I wrote about how progressive image rendering can improve both real and perceived performance. Yet despite the promise of progressive images, we found that two out of three of the pages we tested didn’t use progressive JPEGs, and only 5% scored an A.
These are just two image optimization techniques among many others, such as spriting, lazy loading (when you defer “below the fold” images to load after “above the fold” content), and auto-preloading (which predicts which pages users are likely to visit next based on analyzing overall traffic patterns on your site, and then “preloads” page resources in the visitor’s browser cache). As I mentioned during a talk I gave yesterday at a Shop.org event, unless you’re already implementing all of these best practices, these techniques represent a huge untapped opportunity to optimize your pages.
Even for leading retailers, tackling performance is like trying to take aim at a constantly moving target. As soon as you’ve gotten a bead on one performance issue, a brand-new challenge pops up. Images grow ever richer, custom fonts proliferate, new third-party scripts are introduced, and stylesheets perform increasingly complex tasks. 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.
*Using WebPagetest, we test the home pages of the top 500 retail sites as they would perform in Chrome over a DSL connection. Each URL is tested nine times, and the median result is used in our analysis.