Velocity 09: “High Performance Search at Google”

Yes, I know this was a while ago, but I finally made the time to listen through this entire presentation:

Kyle Scholz and Yaron Friedman are front-end developers for Google Search, focused on one thing: Make Google Search faster.  The main bullet points to me are:

  • Remove unnecessary tags & whitespace:
    • Google Search HTML weighs just over 10kb.
    • Includes no </body> or </html>, as they are unrequired.
    • Includes as few " as possible, such as:
      <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b
    • Includes no comments and almost no whitespace.
    • Use smallest tags possible, such as <b class=gb1>Web</b>
  • Customize JavaScript you send to the user’s browser, so you’re only sending the code needed for that browser (using server headers).
  • Heavily tout use of Google Page Speed to analyze page weight.
  • Deliver pages as “chunks”: while back-end is processing, servers can deliver static parts of page that can be delivered prior to server response time.
  • Minimize HTTP Requests:
    • Sprite everything into a single sprite, even images used infrequently.
    • Each new connection increases page-to-load time (latency) by approximately 10%…
  • Minify, Obfuscate, and bundle JS files.
  • Defer JS downloads for anything unneeded for initial display, using variant of Steve Souder‘s Script DOM Elements, but creating a closed and IDed <div> located within the <body> to which all deferred JS is appended (appending to the <head> can have negative affects in some cases in IE).
  • Take advantage of caching images and JS files, working heavily with “chunks” to only refresh the parts of the page that need to refresh.
  • Doing a lot of work using <iframe>s and JS “hacks” to work around Ajax History state.

As good as all of the above sounds, and mostly is, I have to say I was a little dismayed when I dug into their code and found that they apparently have no regard for standards, exhibited by them improperly nesting a <div> inside of a <div> inside of a <span> (<span id=main><div id=ghead><div id=gbar>), and the use of tags like <center> and <font size=-2>…  Tsk tsk…

Happy coding,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.