Website Optimization

Jesse Martinez

Overview

The 3 W’s : WWW

Four finicky websites

Results

What else can be done?

The 3 W’s

What?

Why?

hoW?

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.

Why ?

Usability - speed is a factor in user experience

Why ?

Usability - speed is a factor in user experience

Still a good number of 56k modem users

Why ?

Usability - speed is a factor in user experience

Still a good number of 56k modem users

Download speed is often the biggest impediment81% users said speed was concern (1996 survey)

Why ?

Usability - speed is a factor in user experience

Still a good number of 56k modem users

Download speed is often the biggest impediment81% users said speed was concern (1996 survey)

Attention Threshold = 8 +/- 2 seconds(probably less)

hoW ?

Take this finicky website . . .

hoW ?

Take this finicky website . . .

Meant to mimic a poorly designed site

1st generation website

An example that shows improvement

hoW ?

What’s wrong?

hoW ?

What’s wrong?

Redundant tags <font . . .

Nested tables

No CSS styling

Too many comments

Non-optimized jpeg

hoW ?

Html file 20744 bytes

Media ~ 1.7 Mbytes

Total ~ 1.9 Mbytes

hoW ?

Take this good finicky website . . .

hoW ?

What’s wrong?

Redundant tags <font . . .

Nested tables

No CSS styling

Too many comments

Non-optimized jpeg

hoW ?

Html file 19116 bytes

Media ~ 1.7 Mbytes

Total ~ 1.9 Mbytes

hoW ?

Take this gooder finicky website . . .

hoW ?

What’s wrong?

Redundant tags <font . . .

Nested tables

No CSS styling

Too many comments

Non-optimized jpeg

hoW ?

Html file 8947 bytes

Media ~ 1.7 Mbytes

Total ~ 1.7 Mbytes

hoW ?

Take this goodest finicky website . . .

hoW ?

What’s wrong?

Redundant tags <font . . .

Nested tables

No CSS styling

Too many comments

Non-optimized jpeg

hoW ?

Html file 8956 bytes

Media ~ 118 kbytes

Total ~ 127 kbytes

Improvement in size(less is better)

0

500000

1000000

1500000

2000000

2500000

bad good gooder goodest

website revision

total page size in bytes

html size

Improvement in Time(smaller is better)

7 7 6 1

210 210

180

30

0

50

100

150

200

250

bad good gooder goodest

website revision

time in seconds

broadband

56K

Improvements in html page size(smaller is better)

8947

8947

19116

20744

0 5000 10000 15000 20000 25000

goodest

gooder

good

bad

website revision

html size in bytes

html page size

What does this show us?

For our trinket websiteOptimizing pictures works>10x improvement in size> 6x improvement in speed

For a content heavy site (text)CSS may help moreuse external CSSuse less white space

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

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

Don’t automatically start playing

streaming media

References

http://www.yourhtmlsource.com/optimisation/basicoptimisation.html#WHYhttp://webdesign.about.com/od/speed/index.htmhttp://www.websiteoptimization.com/speed/1/http://www.websiteoptimization.com/services/analyze/http://www.pantos.org/atw/35305.htmlhttp://www-static.cc.gatech.edu/gvu/user_surveys/survey-04-1996/

I love catshttp://hometown.aol.com/mailflier/Wikipedia texthttp://en.wikipedia.org/wiki/Cats

Figure 1. Output from script

Figure 2. Script used in experiment