• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Keeping it Snappy: Improving Website Performance
 

Keeping it Snappy: Improving Website Performance

on

  • 2,710 views

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

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

Statistics

Views

Total Views
2,710
Views on SlideShare
2,704
Embed Views
6

Actions

Likes
5
Downloads
0
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Keeping it Snappy: Improving Website Performance Keeping it Snappy: Improving Website Performance Presentation Transcript

  • 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