Blog

You've reached the blog of Jeremie Tisseau, a French Visual Interface Designer, Wordpress & Drupal developer, graphic designer, web addicted... Oh! and I am based in Bangkok, Thailand, with my family.

WPSynergy.org – Opensource WordPress Themes
Annoucement: The Gorilla Project WPSynergy Project, Open Source WordPress Themes
Next/Previous Post

Join Us!

Open source Wordpress theme by the WPSynergy communityAre you a talented WP designer or developer?

More Info

Hire Me!

I am currently available for Web/UI design projects. If you think we would work well together, contact me today to receive a free consultation.

Get in touch!

2
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

Sponsors

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a Visual Interface Designer focusing on Web Applications design, Wordpress/drupal development... I am also the founder of WPSynergy, an open source community focusing on building high quality Wordpress themes... for Free!

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

2 Comments

  1. George - Planet Anarky says:

    11 Sep, 2009

    Reply

    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

    Reply

    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.

Leave a Reply

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