A talk given to the Atlantic Internet Marketing conference about ways for front- and back-end web practitioners to improve website performance.

1. 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!

2. THE INTRO

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

4. PERFORMANCE

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

7. PERFORMANCE:
MAKING THE CODEZ
BETTER?!

8. PERFORMANCE:
USER EXPERIENCE

11. BUT

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

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

14. Ye, the...
DESIGNERS

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

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

18. 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/

19. 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/

20. Tip #1:
SCENT

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

24. CONFIDENCE
SCENT

25. Tip #2:
FEEDBACK

28. Submit

29. Submit

30. Tip #3:
SCANNABILITY

31. Tip #3:
SCANNABILITY
(not a Real Word)

32. HIERARCHY

33. Tip #4:
MENTAL MODELS
are your friend.

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

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

37. 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

38. Ye, the...
FRONT-END
DEVELOPERS

39. Tip #1:
WATCH THE JS!

40. 1. KEEP SCRIPTS EXTERNAL

41. 2. SCRIPTS AT THE BOTTOM

42. 3. FRAMEWORKS

43. 4. REFACTOR

44. Tip #2:
HTTP REQUESTS

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

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

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

48. 3. IMAGE SPRITES

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

50. Tip #3:
ASSET AWARE

51. 1. GZIP COMPONENTS

52. 2. OPTIMIZE IMAGES

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

54. 3. MINIFY JAVASCRIPT

55. 4. MULTIPLE ASSET HOSTS

56. Tip #4:
PREFETCH

57. Ye, the...
BACK-END
ENGINEERS

58. Tip #1:
AB

59. 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

60. 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

61. Tip #2:
CACHING

62. 1. PAGE CACHING

63. 2. FRAGMENT CACHING

64. 3. VARYING

65. MEMORY
DISK
DATABASE

66. Tip #3:
QUEUEING

67. Tip #4:
SERVING ASSETS

68. 1. NEVER SERVE ASSETS
FROM THE APPLICATION

69. 2. CONFIGURE ETAGS

70. 3. SET AN EXPIRES HEADER

71. Tip #5:
HARDWARE

72. 1. RAM HELPS DBs

73. 2. APP SERVERS ARE EASY

74. 3. DB SERVERS ARE HARD

75. FINAL THOUGHTS

76. FIN

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