Smaller Google home page

"If you're a Google engineer, you know that those nine words comprised about 120 bytes of data, enough to slow download time for users with modems by 20 to 50 milliseconds. You can estimate the stress that 120 bytes, times millions of searches per minute, put on Google's 10,000 servers."

Fastcompany, How Google Grows...and Grows...and Grows

Introduction

I edited Google's homepage to make its gzipped size as small as possible.

Improvements:

Compare smaller and original in your browser.

Tabs

I rewrote two features of the tabs (Web, Images, Groups, Directory, News).

The first is that clicking a tab preserves a search that you have typed into the textbox. It used to work by adding a hidden field to the form and submitting the form immediately. I reimplemented it to work by changing the URL of the link. This change saves space and makes it work in Netscape 4 and Omniweb, which it didn't work in before.

The second is that you can click anywhere in the tab to activate it. It used to be implemented through td onclick, and a cursor hint was added through CSS. I reimplemented it by using CSS display:block to make the link itself take up the entire tab. This change saves space, makes Opera 6 show a hand cursor for a wider area (even though it was clickable before), and makes the entire area act more like a link (status bar text, shift+click to open in a new window, etc).

See the original tab code and the tab new code.

Visual differences between smaller and original

The only visual differences are minor and only affect older browsers.

Things I removed without being sure it was safe

Things I did not remove but think could be removed

Other differences

I edited a version that Google served to Mozilla. Google serves slightly different versions to different browsers, so you might notice these differences if you compare my "original" to what you see on www.google.com:

I added code to focus the text field as soon as possible instead of waiting for the logo to load. I left the onload focus() in because of a bug in IE for Windows: if you reach the Google home page by hitting the back button, IE will restore focus from session history just before onload.

Notes

The biggest size savings came from removing non-required closing tags, display:blocking tab links, rewriting the tab-switching code, and removing all newline characters.

I counted sizes with Windows newlines (2 bytes). In reality, Google pages are served with Linux newlines (1 byte). This probably makes my figures look slightly better than they really are.

You can try to read my scratch notes if you want.


© 2003 Jesse Ruderman (jruderman@hmc.edu), except for the parts I copied from Google.
Google may use these ideas and/or the code.
Created March 31, 2003. Last modified August 21, 2003.