How Google makes GMail mobile fast

When I saw the title of the Meetup talk, “High Performance Mobile” and that it was in the south bay, I was sold in an instant.  Who doesn’t want to know how to make their mobile web apps go faster?  The SF Web Performance Meetup talk took place at LinkedIn who graciously provided space, drinks (non-alky), some appetizers, and a foldable water bottle with LinkedIn on it.  Not too shabby.

The speaker, Steve Souders, is a Head Performance Engineer at Google and previously worked at Yahoo! as Chief Performance Yahoo!.  He’s written a couple of O’Reilly books and created many performance tools.  You can tell that he is very passionate about web performance.  In fact, you would think that he was talking about kids because of how excited he was talking about performance.

Let’s get started about the talk take aways.

Why web performance is important?  If your web application is slow, this can cost you money.  Fred Wilson from Union Square Ventures said about successful web apps, “Speed is the most important feature.”  NetFlix turned on gzip and saved about half of their outbound traffic.  Just about all smart phone ads talk about fast this, fast that.  These companies know what sells phones.

Mobile in general is exciting because there is so much more growth to be had.  If you compare the same relative point in time of when mobile web browsers were introduced versus desktop web browsers were introduced, mobile web is almost 5 times the number of desktop browsers.  In 2010, 2.6% of eCommerce purchases were made via mobile.

Souders says web performance optimization will drive traffic, improve user experience, increase revenues, and cut costs.  A lot of the tips that he covered are applicable to desktop web also.

Of the many tips that he talked about, here are the top important 3:

  1. Make fewer http requests
    • Combine files into fewer files, use sprites, inline images, canvas, and SVG
  2. Reduce DNS lookups
    • The number of DNS lookups is equal to the number of unique hostnames in the web page.  Reducing the number of unique hostnames reduces the number of DNS lookups.
  3. Avoid redirects
    • Shouldn’t have different URLs for different clients (desktop, mobile, tablet), should be same URL for all, “it’s a mistake to have different best practices for mobile and desktop”

It seemed that java script is a thorn in Souders’ side when it comes to performance.  He recommends that java script be put at the bottom of the HTML page. When java script is downloading, rendering of the page is blocked (aka stopped).  This is a bad user experience especially if java script is not helping paint the picture of the web page.

For GMail mobile, in the background, they download the java script, but wrap it in comment tags.  This is so the file gets downloaded without affecting the rendering of the web page.  When they want to execute java script, they get the script DOM text elements and remove the comment tags and use eval().  In a way, they are prefetching java script that may not be needed, but have a way to execute the java script if needed.  Genius!

Another cool thing that companies are doing is writing java script and CSS blocks to HTML5 localstorage.  Bing and Google both do this for their search pages.  When you download a webpage on your mobile browser, they will set key/value pairs of unique IDs pointing to java script and CSS.  So the next time, you visit their sites, they don’t need to download this information again.  Souders did a quick demo where he sniffed the packets and dumped the info being downloaded in the first website visit and in the second.  He showed us that indeed there were unique IDs pointing to blocks of java script and CSS in the first trip then less data transmitted on the second trip.  The only problem with localstorage though is that you don’t have a way to see how much storage is left/available.  All you can do is keep saving until it throws an error.

More tidbits:

  • Check out Steve’s blog at SteveSouders.com, you will find the slides of his talk there along with tons of information about web performance.
  • Use “DSUG” discount code for 40%-50% off of O’Reilly books – it’s for awesome SF Web Performance Meetup members!
  • Blaze.io will show you waterfall performance of your mobile website
  • Httparchive.com will show you the average download sizes for desktop web and mobile web – website download size is 490k, mobile is 311k
  • Most people close SSL connections which is bad because it takes so long to set those up
  • Performance and parameters for tablet browsers are more like smartphone browsers, visually create like to desktop but aim for perf like smart phones
  • Browsers caching are too small and purging algorithms are poor

Last, but not least, Souders was very adamant about mobile applications being open.  Maybe it’s the Google in him hahahaha.  He said that he wouldn’t look into improving performance of native mobile apps as part of his research.  Too bad for me since I am an iOS developer, but maybe I should consider HTML5?  Hmm…

I really enjoyed this Meetup because there were some invaluable discussions going on.  Until we meet again!

Sophia Perl

Sophia Perl is a product manager for a database tool at IBM. She has over 10 years of software development and management experience. Sophia holds a BS in Computer Science from University of Southern California and an MBA from University of California at Davis. She is the creator of iPhone apps PicPredict and Eventabulous.

One thought on “How Google makes GMail mobile fast

Leave a Reply

Your email address will not be published.