ATLANTIC INTERNET MARKETING CONFERENCE 2009 | M. JACKSON WILKINSON | APRIL 23, 2009
KEEPING IT
SNAPPY
Designe
IMPROVING
WEBSITE
P ER FOR MANC E
rs: Don
leave ye ’t
t. Pleas
e!

THE INTRO

M. JACKSON WILKINSON
Jackson of all Web Trades, Master of One

PERFORMANCE

http://www.flickr.com/photos/jurvetson/

PERFORMANCE:
MAKING THE CODEZ
BETTER?!

PERFORMANCE:
USER EXPERIENCE

BUT

Irate
Your Users’
Frustration
w/ Performance
Lenient
Pleasure to Use PayPal
Your Users’ Frustration
w/ Your Site

Irate
Your Users’
Frustration
w/ Performance
Lenient
One-Time Visit Daily Tool
Your Users’ Frequency
of Use of Your Site

Ye, the...
DESIGNERS

Irate
Your Users’
Frustration
w/ Performance
Lenient
Pleasure to Use PayPal
Your Users’ Frustration
w/ Your Site

Irate
Your Users’
Frustration
w/ Performance
Lenient
Pleasure to Use PayPal
Your Users’ Frustration
w/ Your Site

When we looked at the actual download speeds of
the sites we tested, we found that there was no
correlation between these and the perceived
speeds reported by our users. About.com, rated
slowest by our users, was actually the fastest site
(average: 8 seconds). Amazon.com, rated as one
of the fastest sites by users, was really the slowest
(average: 36 seconds).
http://www.uie.com/articles/download_time/

There was still another surprising finding from
our study: a strong correlation between perceived
download time and whether users successfully
completed their tasks on a site. There was,
however, no correlation between actual download
time and task success, causing us to discard our
original hypothesis. It seems that, when people
accomplish what they set out to do on a site,
they perceive that site to be fast.
http://www.uie.com/articles/download_time/

Tip #1:
SCENT

http://www.flickr.com/photos/julieanna/

CONFIDENCE
SCENT

Tip #2:
FEEDBACK

Submit

Submit

Tip #3:
SCANNABILITY

Tip #3:
SCANNABILITY
(not a Real Word)

HIERARCHY

Tip #4:
MENTAL MODELS
are your friend.

Telephone:
PICK UP PHONE
DIAL
WAIT (RINGING)
PERSON ANSWERS
SPEAK

Telephone: Skype:
PICK UP PHONE RUN PROGRAM
DIAL CLICK NAME
WAIT (RINGING) WAIT (RINGING)
PERSON ANSWERS PERSON ANSWERS
SPEAK SPEAK

Telephone: VoIP Product:
PICK UP PHONE RUN PROGRAM
CLICK NAME
DIAL
CHOOSE PROTOCOL
WAIT (RINGING) ENTER PASSPHRASE
PERSON ANSWERS WAIT (RINGING)
ATTEMPT CONNECTION
SPEAK SPEAK

Ye, the...
FRONT-END
DEVELOPERS

Tip #1:
WATCH THE JS!

1. KEEP SCRIPTS EXTERNAL

2. SCRIPTS AT THE BOTTOM

3. FRAMEWORKS

4. REFACTOR

Tip #2:
HTTP REQUESTS

1. DON’T USE @import
<style type=”text/css”>
@import url('/css/a.css');
</style>

1. DON’T USE @import
<link rel=‘stylesheet’ href=‘css/a.css’>

2. FEWER STYLESHEETS
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

3. IMAGE SPRITES

4. FLUSH THE BUFFER
<?php flush(); ?>

Tip #3:
ASSET AWARE

1. GZIP COMPONENTS

2. OPTIMIZE IMAGES

2. OPTIMIZE IMAGES
GIF > PNG
SOME JPEG > PNG
PNGCRUSH

3. MINIFY JAVASCRIPT

4. MULTIPLE ASSET HOSTS

Tip #4:
PREFETCH

Ye, the...
BACK-END
ENGINEERS

Tip #1:
AB

ab -n 1000 -c 100 http://humblegourmand.com/
Server Software: Apache/2.0.52
Server Hostname: humblegourmand.com
Server Port: 80
Document Path: /
Document Length: 13909 bytes
Concurrency Level: 100
Time taken for tests: 49.44416 seconds
Complete requests: 1000
Failed requests: 0
Write errors: 0
Total transferred: 14147000 bytes
HTML transferred: 13909000 bytes
Requests per second: 20.39 [#/sec] (mean)
Time per request: 4904.441 [ms] (mean)
Time per request: 49.044 [ms] (mean, across all concurrent requests)
Transfer rate: 281.68 [Kbytes/sec] received

ab -n 1000 -c 100 -H 'accept-encoding: gzip' http://humblegourmand.com/
Server Software: Apache/2.0.52
Server Hostname: humblegourmand.com
Server Port: 80
Document Path: /
Document Length: 4037 bytes
Concurrency Level: 100
Time taken for tests: 46.761164 seconds
Complete requests: 1000
Failed requests: 0
Write errors: 0
Total transferred: 4298000 bytes
HTML transferred: 4037000 bytes
Requests per second: 21.39 [#/sec] (mean)
Time per request: 4676.117 [ms] (mean)
Time per request: 46.761 [ms] (mean, across all concurrent requests)
Transfer rate: 89.75 [Kbytes/sec] received

Tip #2:
CACHING

1. PAGE CACHING

2. FRAGMENT CACHING

3. VARYING

MEMORY
DISK
DATABASE

Tip #3:
QUEUEING

Tip #4:
SERVING ASSETS

1. NEVER SERVE ASSETS
FROM THE APPLICATION

2. CONFIGURE ETAGS

3. SET AN EXPIRES HEADER

Tip #5:
HARDWARE

1. RAM HELPS DBs

2. APP SERVERS ARE EASY

3. DB SERVERS ARE HARD

FINAL THOUGHTS

FIN

Get in Touch!
speakerrate.com/whafro
jackson@jounce.net
@whafro