310 likes | 434 Views
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:.
E N D
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 impediment 81% 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 impediment 81% 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 bad
hoW ? What’s wrong? bad
hoW ? What’s wrong? Redundant tags <font . . . Nested tables No CSS styling Too many comments Non-optimized jpeg bad
hoW ? Html file 20744 bytes Media ~ 1.7 Mbytes Total ~ 1.9 Mbytes bad
hoW ? Take this good finicky website . . . good
hoW ? What’s wrong? Redundant tags <font . . . Nested tables No CSS styling Too many comments Non-optimized jpeg good
hoW ? Html file 19116 bytes Media ~ 1.7 Mbytes Total ~ 1.9 Mbytes good
hoW ? Take this gooder finicky website . . . gooder
hoW ? What’s wrong? Redundant tags <font . . . Nested tables No CSS styling Too many comments Non-optimized jpeg gooder
hoW ? Html file 8947 bytes Media ~ 1.7 Mbytes Total ~ 1.7 Mbytes gooder
hoW ? Take this goodest finicky website . . . goodest
hoW ? What’s wrong? Redundant tags <font . . . Nested tables No CSS styling Too many comments Non-optimized jpeg goodest
hoW ? Html file 8956 bytes Media ~ 118 kbytes Total ~ 127 kbytes goodest
What does this show us? For our trinket website Optimizing pictures works >10x improvement in size > 6x improvement in speed For a content heavy site (text) CSS may help more use external CSS use 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#WHY http://webdesign.about.com/od/speed/index.htm http://www.websiteoptimization.com/speed/1/ http://www.websiteoptimization.com/services/analyze/ http://www.pantos.org/atw/35305.html http://www-static.cc.gatech.edu/gvu/user_surveys/survey-04-1996/ I love cats http://hometown.aol.com/mailflier/ Wikipedia text http://en.wikipedia.org/wiki/Cats