Website Optimization

1
Website Optimization

• Jesse Martinez

2
Overview
The 3 Ws WWW Four finicky websites Results W
hat else can be done?
3
The 3 Ws
What? Why? hoW?
4
What ?
As defined by The American Heritage Dictionary
The procedure or procedures used to make a system
or design as effective or functional as possible,
especially the mathematical techniques involved.
5
Why ?
Usability - speed is a factor in user experience
6
Why ?
Usability - speed is a factor in user experience
Still a good number of 56k modem users
7
Why ?
Usability - speed is a factor in user experience
Still a good number of 56k modem users
Download speed is often the biggest
impediment 81 users said speed was concern
(1996 survey)
8
Why ?
Usability - speed is a factor in user experience
Still a good number of 56k modem users
Download speed is often the biggest
impediment 81 users said speed was concern
(1996 survey)
Attention Threshold 8 /- 2 seconds (probably
less)
9
hoW ?
Take this finicky website . . .
10
hoW ?
Take this finicky website . . .
Meant to mimic a poorly designed site 1st
generation website An example that shows
improvement
bad
11
hoW ?
Whats wrong?
bad
12
hoW ?
Whats wrong?
Redundant tags ltfont . . . Nested tables No
CSS styling Too many comments Non-optimized jpeg
bad
13
hoW ?
Html file 20744 bytes Media 1.7
Mbytes Total 1.9 Mbytes
bad
14
hoW ?
Take this good finicky website . . .
good
15
hoW ?
Whats wrong?
Redundant tags ltfont . . . Nested tables No
CSS styling Too many comments Non-optimized jpeg
good
16
hoW ?
Html file 19116 bytes Media 1.7
Mbytes Total 1.9 Mbytes
good
17
hoW ?
Take this gooder finicky website . . .
gooder
18
hoW ?
Whats wrong?
Redundant tags ltfont . . . Nested tables No
CSS styling Too many comments Non-optimized jpeg
gooder
19
hoW ?
Html file 8947 bytes Media 1.7
Mbytes Total 1.7 Mbytes
gooder
20
hoW ?
Take this goodest finicky website . . .
goodest
21
hoW ?
Whats wrong?
Redundant tags ltfont . . . Nested tables No
CSS styling Too many comments Non-optimized jpeg
goodest
22
hoW ?
Html file 8956 bytes Media 118
kbytes Total 127 kbytes
goodest
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
What does this show us?
For our trinket website
Optimizing pictures works gt10x improvement in
size gt 6x improvement in speed
For a content heavy site (text) CSS may help
more use external CSS use less white space
27
What else can be done?
K I S S Keep Ads to a minimum Keep JavasSript to
a minimum Keep media to a minimum Use something
eye-catching up top Use good navigation tools
28
What else can be done?
Verify and validate your HTML code Be sure to not
use obscure or uncommon plug-ins unless
absolutely necessary Use a screen capture from
the video clip as a place holder Dont
automatically start playing streaming media
29
References
http//www.yourhtmlsource.com/optimisation/basicop
timisation.htmlWHY http//webdesign.about.com/od/
speed/index.htm http//www.websiteoptimization.com
/speed/1/ http//www.websiteoptimization.com/servi
ces/analyze/ http//www.pantos.org/atw/35305.html
http//www-static.cc.gatech.edu/gvu/user_surveys/s
urvey-04-1996/ I love cats http//hometown.aol.co
m/mailflier/ Wikipedia text http//en.wikipedia.or
g/wiki/Cats
30
Figure 1. Output from script
31
Figure 2. Script used in experiment