Client‐side performance in web
applications ‐ Resources
Files:
1.CSS file example “shiny.css”:
.easytabletitle {
background: url(./shinyimages/shinyheader.gif) #FFF;
background: repeat‑x scroll center left;
font: normal normal normal;
font‑size: 11px;
font‑family: Verdana, Geneva, Arial, Helvetica,sans‑serif;
padding‑left: 5px;
padding‑right: 5px;
padding‑top: 5px;
padding‑bottom: 5px;
border: 1px solid;
border‑color: #CCC;
text‑align: left;
}
.easytableheader {
background: url(./shinyimages/shinyheader.gif) #FFF repeat‑x scroll center left;
font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica,
sans‑serif;
padding: 5px;
border: 1px solid #CCC;
text‑align: left;
}
2.CSS file example “shini1.css”:
.easytabletitle{font:11px verdana,geneva,arial,helvetica,sans‑
serif;padding:5pxbackground:url(./shinyimages/shinyheader.gif) #FFF;background:repeat‑x scroll
center left;font:normal normal normal;border:1px solid;border‑
color:#CCC}.easytabletitle,.easytableheader{text‑
align:left}.easytableheader{background:url(./shinyimages/shinyheader.gif) #FFF repeat‑x scroll
center left;font:normal normal normal 11px Verdana,Geneva,Arial,Helvetica,sans‑
serif;padding:5px;border:1px solid #CCC}
3.CSS file example “shiny2.css”:
.easytabletitle{background:repeat‑x scroll center left;font:normal normal normal;font‑size:11px;font‑
family:Verdana, Geneva, Arial, Helvetica,sans‑serif;border:1px solid;text‑align:left;border‑
color:#CCC;padding:5px;}.easytableheader{background:url(./shinyimages/shinyheader.gif) #FFF
repeat‑x scroll center left;font:normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans‑
serif;border:1px solid #CCC;text‑align:left;padding:5px;}

4.CSS file example “example.css”:
h2 {
font‑size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no‑repeat 5px 10px;
}
p2 {
font‑size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no‑repeat 5px 10px;
}
.block {
font‑size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no‑repeat 5px 10px;

Images:
1. Firebug Net Panel
2. Firebug HTTP headers for request and response
3. Firebug HTML/CSS Inspector

4. Firebug JavaScript Debugger
5. Y!Slow Weight Graphs