Keeping it Snappy: Improving Website Performance

2,130 views

Published on

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

Published in: Technology, Business

Keeping it Snappy: Improving Website Performance

  1. 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. 2. THE INTRO
  3. 3. M. JACKSON WILKINSON Jackson of all Web Trades, Master of One
  4. 4. PERFORMANCE
  5. 5. http://www.flickr.com/photos/jurvetson/
  6. 6. PERFORMANCE: MAKING THE CODEZ BETTER?!
  7. 7. PERFORMANCE: USER EXPERIENCE
  8. 8. BUT
  9. 9. Irate Your Users’ Frustration w/ Performance Lenient Pleasure to Use PayPal Your Users’ Frustration w/ Your Site
  10. 10. Irate Your Users’ Frustration w/ Performance Lenient One-Time Visit Daily Tool Your Users’ Frequency of Use of Your Site
  11. 11. Ye, the... DESIGNERS
  12. 12. Irate Your Users’ Frustration w/ Performance Lenient Pleasure to Use PayPal Your Users’ Frustration w/ Your Site
  13. 13. Irate Your Users’ Frustration w/ Performance Lenient Pleasure to Use PayPal Your Users’ Frustration w/ Your Site
  14. 14. 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/
  15. 15. 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/
  16. 16. Tip #1: SCENT
  17. 17. http://www.flickr.com/photos/julieanna/
  18. 18. CONFIDENCE SCENT
  19. 19. Tip #2: FEEDBACK
  20. 20. Submit
  21. 21. Submit
  22. 22. Tip #3: SCANNABILITY
  23. 23. Tip #3: SCANNABILITY (not a Real Word)
  24. 24. HIERARCHY
  25. 25. Tip #4: MENTAL MODELS are your friend.
  26. 26. Telephone: PICK UP PHONE DIAL WAIT (RINGING) PERSON ANSWERS SPEAK
  27. 27. Telephone: Skype: PICK UP PHONE RUN PROGRAM DIAL CLICK NAME WAIT (RINGING) WAIT (RINGING) PERSON ANSWERS PERSON ANSWERS SPEAK SPEAK
  28. 28. 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
  29. 29. Ye, the... FRONT-END DEVELOPERS
  30. 30. Tip #1: WATCH THE JS!
  31. 31. 1. KEEP SCRIPTS EXTERNAL
  32. 32. 2. SCRIPTS AT THE BOTTOM
  33. 33. 3. FRAMEWORKS
  34. 34. 4. REFACTOR
  35. 35. Tip #2: HTTP REQUESTS
  36. 36. 1. DON’T USE @import <style type=”text/css”> @import url('/css/a.css'); </style>
  37. 37. 1. DON’T USE @import <link rel=‘stylesheet’ href=‘css/a.css’>
  38. 38. 2. FEWER STYLESHEETS @import url('/css/typography.css'); @import url('/css/layout.css'); @import url('/css/color.css');
  39. 39. 3. IMAGE SPRITES
  40. 40. 4. FLUSH THE BUFFER <?php flush(); ?>
  41. 41. Tip #3: ASSET AWARE
  42. 42. 1. GZIP COMPONENTS
  43. 43. 2. OPTIMIZE IMAGES
  44. 44. 2. OPTIMIZE IMAGES GIF > PNG SOME JPEG > PNG PNGCRUSH
  45. 45. 3. MINIFY JAVASCRIPT
  46. 46. 4. MULTIPLE ASSET HOSTS
  47. 47. Tip #4: PREFETCH
  48. 48. Ye, the... BACK-END ENGINEERS
  49. 49. Tip #1: AB
  50. 50. 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
  51. 51. 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
  52. 52. Tip #2: CACHING
  53. 53. 1. PAGE CACHING
  54. 54. 2. FRAGMENT CACHING
  55. 55. 3. VARYING
  56. 56. MEMORY DISK DATABASE
  57. 57. Tip #3: QUEUEING
  58. 58. Tip #4: SERVING ASSETS
  59. 59. 1. NEVER SERVE ASSETS FROM THE APPLICATION
  60. 60. 2. CONFIGURE ETAGS
  61. 61. 3. SET AN EXPIRES HEADER
  62. 62. Tip #5: HARDWARE
  63. 63. 1. RAM HELPS DBs
  64. 64. 2. APP SERVERS ARE EASY
  65. 65. 3. DB SERVERS ARE HARD
  66. 66. FINAL THOUGHTS
  67. 67. FIN
  68. 68. Get in Touch! speakerrate.com/whafro jackson@jounce.net @whafro

×