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.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)