Google’s performance evangelist and Velocity co-chair Steve Souders (@souders) recently talked with me about speed, browser wars, and desktop performance vs mobile performance. He also discussed a new project he’s working on called the HTTP Archive, which documents how web content is constructed, how it changes over time, and how those changes play out.
Our interview follows.
What are the major factors slowing down site performance?
Steve Souders: For years when developers started focusing on the performance of their websites, they would start on the back end, optimizing C++ code or database queries. Then we discovered that about 10% or 20% of the overall page load time was spent on the back end. So if you cut that in half, you only improve things 5%, maybe 10%. In many cases, you can reduce the back end time to zero and most users won’t notice.
Why do load times vary by browser?
Are we in the middle of a “speed arms race” between browser developers?
Steve Souders: We’re certainly in a phase where there’s a lot of competition across the browser teams, and speed is one of the major competitive differentiators. That’s music to my ears. I don’t know if we’re in the middle of it, because it’s been going on for two or three years now. Going forward, I think speed is always going to be a critical factor for a browser to be successful. So perhaps we’re just at the very beginning of that race.
We’re just reaching the point where the browsers are catching up with the rich interactive web apps that they’re hosting. And all of a sudden, HTML5 came on the scene — the audio tag, video tag, canvas, SVG, web workers, custom font files — and I think as we see these HTML5 features get wider adoption, browsers are going to have to put even more focus on performance. Certainly mobile is another area where browser performance is going to have a lot of growth and is going to have a critical impact on the adoption and success of the web.
What new optimization quirks or obstacles does mobile browsing create?
Steve Souders: As large and multi-dimensional as the browser matrix currently is, it’s nothing compared to the size of that matrix for mobile, where we have even more browsers, hardware profiles, connection speeds, types of connections, and proxies.
One of the biggest challenges developers are going to face on the mobile side is getting a handle on the performance of what we’re building across the devices we care about. I talked earlier about how on the desktop, without any change in connection speed, developers could work around some of the network obstacles and get significant improvement in their page load times. On mobile, that’s going to be more difficult.
The connections on mobile are slower, but they’re also constrained in other ways. For example, the number of connections per server and the maximum number of connections across all servers are typically lower on mobile devices than they are on the desktop. And the path that HTTP requests have to take from a mobile device to their origin server can be much more convoluted and slower than they are on the desktop.
What should companies be doing to optimize mobile browsing?
Steve Souders: Developers are in a great place when it comes to building desktop websites because there’s a significant number of performance best practices out there with a lot of research behind them and a lot of tooling and automation. The problem is, we don’t have any of that for mobile. That’s the goal, but right now, it doesn’t exist.
When I started talking a year or so ago about switching the focus to mobile performance, most people would respond with, “Don’t the best practices we have for desktop also apply to mobile?” And I always said the same thing, “I don’t know, but I’m going to find out.” My guess is that half of them are important, a quarter of them don’t really matter, and a quarter of them actually hurt mobile performance. Then there’s a whole set of performance best practices that are really important for mobile but don’t matter so much for the desktop, so no one’s really focused on them.
In the first few months that I’ve been able to focus on mobile, that’s played out pretty well. There are some things, like domain sharding, that are really great for desktop performance but actually hurt mobile performance. And there are other things — like “data: URIs” for embedding images, and relying on localStorage for long-term caching — that are great for mobile and don’t exist in any of the popular lists of performance best practices. Unfortunately, companies that want to invest in mobile performance don’t have a large body of best practices to refer to. And that’s where we are now, at least that’s where I am now — trying to identify those best practices. Once we have them, we can evangelize, codify, and automate them.
What is the HTTP Archive and how can developers use it to improve site speed?
Steve Souders: Over the last five years, we’ve seen a lot of interest in website optimization — and websites have changed over that time. Unfortunately, we don’t have any record of what those changes have been, how significant they’ve been, or what areas we’ve seen change and what areas we haven’t seen change. The purpose of the HTTP Archive is to give us that history.
It’s similar to the Internet Archive started by Brewster Kahle in 1996 — the Internet Archive collects the web’s content and the HTTP Archive archives how that content was built and served. Both are important: The Internet Archive provides society with a record of the evolution of digital media on the web, and the HTTP Archive provides a record of how that digital content has been served to users and how it’s changing, specifically for people interested in website performance.
Right now, there aren’t that many slices of the data, but the ones that are there are pretty powerful. I think the most impactful ones are the trending charts because we can see how the web is changing over time. For example, we noticed that the size of images has grown about 12% over the last five months. That’s pretty significant. And there are new technologies that address performance issues like image size — Google has recently released the WebP proposal for a new image format that reduces image size. So, the adoption of that new format by developers and other browsers might be accelerated when they see that image size is growing and will consume even more bandwidth going forward.
Associated photo on index pages: Speedy Gonzales by blmurch, on Flickr
- High Performance Web Sites (Book)
Souders: Making Web Sites Faster in the Web 2.0 Age
- To the end of bloated code and broken websites
- Why HTML5 is worth your time
- Mobile operating systems and browsers are headed in opposite directions
- What will the browser look like in five years?