3
Google Code: Let's make the web faster

August 10, 2009

All, Productivity

Let s Make The Web Faster (by Google)

Article written by Jeeremie

Maybe you remember this post and this video from Google when they announced earlier this year on their official blog their plan to make the web faster.

They created a wiki page hosted on Google Code site to give us a series of tutorials to improve website performance:

Google Code: Let's make the web faster

What about their code?

I wanted to check if Google put into practice what they teach us on that page so I opened their search page and examined it with Firebug.

Is their code optimized for a better website performance? Yes, definitely!

HTML, CSS, JS

Their Javascript, CSS and html code is compressed to fit on one single line only, no external style sheet.

They use short CSS tags such as “ssb”, “tbd”, “cnt”… to make their code lighter (this is only a sample of their code):

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
 <head done="done"></head>
 <body id="gsr">
  <textarea id="csi" style="display: none;"/>
  <div id="header"></div>
  <div id="ssb"></div>
  <div id="tbd" class="med"/>
  <div id="cnt"/></div>
  <br clear="all"/>
  <table id="nav"></table>
  <div class="std"></div>
  <div id="wml"></div>
  <div id="xjsd"></div>
  <div id="xjsi"></div>
</body>
</html>

Images:

They use only one image instead of a few small images:

nav_logo6

… and just change background position for each css class:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

.w10, .w11, .w20, .w21, .w24, .wci, .wpb, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    background: url(/images/nav_logo6.png) no-repeat;
    border: 0;
    cursor: pointer;
    display: none;
    margin-right: 3px;
    height: 14px;
    vertical-align: bottom;
    width: 14px
}
 
.w10, .w11, .w20, .w21, .w24 {
    height: 16px;
    margin-left: 8px;
    width: 16px
}
 
.w10 {
    background-position: -104px -42px
}
 
.w11 {
    background-position: -134px -27px;
    cursor: default;
    display: inline
}
 
.w20 {
    background-position: -104px -57px
}
 
.w21 {
    background-position: -104px -27px
}
 
.w24 {
    background-position: -134px -44px;
    cursor: default;
    display: inline
}
 
.wci, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    display: inline;
    height: 14px;
    width: 14px
}
 
.w14, .w44, .w54 {
    display: none
}
 
.wci {
    background-position: -119px -87px;
    height: 14px;
    width: 16px
}
 
.wpb {
    background-position: -91px -74px;
    display: inline;
    height: 13px;
    vertical-align: 5px;
    width: 13px
}
 
.w4, .w40, .w41, .w44 {
    background-position: -104px -42px
}
 
.w5, .w50, li.w0 .w5, .w54 {
    background-position: -104px -57px
}
 
.w51, li.w1 .w5 {
    background-position: -104px -27px
}
 
.wcd {
    margin-top: 2px;
    max-width: 42em
}

This is a technic I use often but I never thought to convert all my images in just one big image.

Last Word

Knowing that Google counts some of the best engineers on the web, makes use of the latest web standards and technologies (HTML5, CSS3, AJAX…) and is maybe one of the most innovative company on the web, I think it is definitely worth and good practice to follow their tips and take time to view their source code. There s a lot to learn in there for anyone eager to learn.

Link: Let s Make The Web Faster
Firefox Plugin: Page Speed

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Tweet

Want to become a guest author on this blog?

WPSynergy.org - Opensource WordPress Themes
Annoucement: The Gorilla Project WPSynergy Project, Open Source WordPress Themes
Next/Previous Post Top ↑ ↓ Form

3 Comments

  1. George - Planet Anarky says:

    11 Sep, 2009

    Interesting article: I ve seen this technique once or twice before, and it s certainly a novel way of showing imagery.

    I wonder, though, whether 1x big image takes up more space than lots of smaller optimised images? I dunno.

  2. Jeremie Tisseau says:

    11 Sep, 2009

    In google s case (only buttons), it is more interesting to have just one big image and change the background position for each button image than to have 30 or more images and load them one by one. It seems to take a little bit longer the first time you load the big image but once it is done it is ready to use for all the buttons.

  3. Mr-H says:

    20 Jun, 2011

    thanks for this tut.
    I think download from external links (javascript and css) make pages faster to download. because it reduces the http requests, and cached by the browser.i ve installed a plugin called YSlow mozilla, just perfect to see the performance of my site

Leave a Reply

Sorry, comments are closed