By Sophia Perl (Producer, PicPredict)
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.

Here are the top 3 tips for web performance:

  • Make fewer http requests — Combine files into fewer files, use sprites, inline images, canvas, and SVG.
  • 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.
  • 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 Javascript is a thorn in Souders’ side when it comes to performance. He recommends that Javascript be put at the bottom of the HTML page. When Javascript is downloading, rendering of the page is blocked (aka stopped). This is a bad user experience especially if Javascript is not helping paint the picture of the web page.

For GMail mobile, in the background, they download the Javascript, 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 Javascript, they get the script DOM text elements and remove the comment tags and use eval(). In a way, they are prefetching Javascript that may not be needed, but have a way to execute the Javascript if needed. Genius!

Another cool thing that companies are doing is writing Javascript 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 Javascript 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 Javascript 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.

This post was originally posted at Sophia Perl’s blog.

Editor’s note: Got a question for our guest blogger? Leave a message in the comments below.
About the guest blogger: Sophia Perl is a product manager for a database server and client administration tool at IBM. She has over 10 years of combined software development, product management, and research experience. Sophia is the iOS developer for iPhone apps PicPredict and Eventabulous. She is an avid blogger on topics of Silicon Valley startups and technology at Sophia holds a B.S. in Computer Science from University of Southern California and an MBA from University of California at Davis. Follow her on Twitter at @sounalath.