Steve Souders on Fonts, Cache, and Other Performance Topics
Our conversation with Steve Souders about HTML5 led down some interesting paths.
On Web Fonts
Benchmark: You’ve highlighted a number of performance wins for HTML5, but also point out one potential performance hang-up, and that’s fonts. What’s the issue?
Steve Souders: Really it's CSS3 and custom font files. I feel like the lone voice in the woods here. Typically, you would use custom font files for a design element in the page that is critical — that you want to put a lot of effort and attention toward. So it seems illogical to me to have one of the most important design elements in the page require an extra HTTP round trip in order to render. I just don't know what designers and developers are thinking.
The Google WebFont loader helps with that a little bit. After a certain amount of time, it will render the element in the default font if the custom font file isn't downloaded quickly enough. But to me, that's not a very good experience either.
Benchmark: Do you think that's a serious hit? Do you anticipate that's really going to make things sluggish?
Steve Souders: Yes, for those design elements an extra round trip is significant — especially for people on mobile or people who have slow Internet connections or high packet loss.
Some of these problems will be mitigated with improvements to the browser. Right now browsers have different behavior with blocking rendering on the page. IE has the biggest problems here. So if you use a custom font file in certain situations, the entire page is blank, waiting for that font file in Internet Explorer. So in many cases it doesn't just affect that one design element. It can affect the entire page. Browsers could just build in the behavior that, after 250 milliseconds, if the font file hasn't returned, then it will render in a default font. That could be built into the browser.
On Disk Cache
Benchmark: Speaking of cache, you have some thoughts on what you'd like to see happen with browser caches, is that correct?
Steve Souders: Yes, I've had conversations with all the major browser vendors except for Apple about disk cache. And all of them pretty much admit that this is an area that hasn't had much focus in years, maybe even five or ten years for some browsers.
If you look at it, the growth of disk space has far outpaced the growth in default cache size. So we're at the point now where I've got 120 gig of free disk space on my tiny laptop, and my Firefox cache is still defaulted at around 50 megabytes. That's just ridiculous! The main thing I do on my laptop is surf. I'd be willing to give Firefox 50 gig of disk space for the browser cache. And yet, they're using orders of magnitude smaller than is actually available on my machine.
Luckily, the browser vendors are paying attention to this, and in IE9 and the latest versions of Chrome and Firefox, we're seeing the cache sizes grow. And so that's a really good thing.
On mobile app development
Benchmark: What's your POV on mobile apps?
Steve Souders: Probably it's not a surprise to hear me say I am very interested in the more open technologies. I think the ability to build a Web experience that can run across multiple platforms is really important. I think it's a huge challenge for companies out there today to build an engaging mobile experience.
I think we're seeing — especially as these mobile browsers adopt more HTML5 capabilities, and we see tools like PhoneGap and SproutCore and jQuery's mobile touch libraries — we're seeing that it's possible to build a very engaging mobile Web app. And now you have code that doesn't have to be served through an app store. You can choose to do that if you want to, but you don't have to. And it runs across multiple devices.
I think that's very compelling. And it lowers the bar for companies that are trying to launch an engaging mobile experience.
Benchmark: But companies still have to build and maintain a desktop app and at least one mobile app. That takes a lot of resources.
Steve Souders: Right now companies have to build two code bases for that. So that's a ripe opportunity for tool companies out there — to figure out a way to have one code base that can be offered up across both desktop and mobile. But right now you're right. To offer a mobile Web app, it's probably going to be a separate code base than your desktop. On the front end you're probably doubling the amount of code and number of developers that you have working on it.
On Mobile and TV
Benchmark: OK. So what looks exciting to you for the future? What technologies are you watching?
Steve Souders: Certainly the U.S. lags behind the rest of the world in the area of mobile. So that's going to be very different. Over the next few years, we're going to get tools and technologies to make it easier to build a mobile presence, and have that deployed across multiple devices more easily, and have it be fast.
The other is TV…So, mobile's pervasive, TV's pervasive. I want the Internet on my TV. Certainly we saw with Web TV a decade ago, there are challenges with surfing the Web and interacting with Web pages on TV. I think we'll see improvements in that. New technologies to help users navigate forms and fill out forms and things like that.
E-commerce is going to be an area for huge improvement on mobile and TV. Right now, the checkout process, even on the desktop where I have a mouse and a full keyboard, is difficult and lengthy. How can we improve that on mobile and on TV?
But I think those two areas, mobile and TV, are where we're going to see a lot of growth, a lot of interaction with the Web and a lot of opportunities to have a faster experience. But it's going to be hard. When I started this work focusing on Web performance for desktop browsers five years ago, six years ago, there were no tools. And that's where we are today with mobile and certainly, TV.
Steve works at Google on Web performance and open source initiatives. His book High Performance Web Sites explains his best practices for performance along with the research and real-world results behind them. Steve is the creator of YSlow, the performance analysis extension to Firebug. He is the co-chair of Velocity, the Web performance and operations conference from O'Reilly, and is co-founder of the Firebug Working Group. He is teaching at Stanford, and frequently speaks at conferences including OSCON, The Ajax Experience, Rich Web Experience, and Web 2.0 Expo.