• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to make your website blazing fast
 

How to make your website blazing fast

on

  • 1,102 views

 

Statistics

Views

Total Views
1,102
Views on SlideShare
1,097
Embed Views
5

Actions

Likes
1
Downloads
16
Comments
0

1 Embed 5

http://www.scoop.it 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to make your website blazing fast How to make your website blazing fast Presentation Transcript

    • How to make your
      website blazing fast
      @joshfraser
    • Slow websites suck
    • 40% of people will abandon a site that take more than 3 seconds to load
    • Slow websites lose money
    • Amazon loses 1% of sales
      for every 100ms of latency
    • Google loses 20% of their traffic for every 500ms of latency
    • Google penalizes the PageRank of slow websites
    • 80-90% of performance is front-end
    • Yahoo increased their traffic by 9% with a 400ms speed improvement
    • Shopzilla reduced their load time from 7 seconds to 2. Traffic increased 25% and revenue increased 12%
    • Waterfall view of 500startups.com
    • Time
    • 17% back-end
      83% front-end
    • Onload
      DOM ready
      Finished
    • Initial connection
      Time to 1st Byte
      Content download
      DNS lookup
    • Recognize this?
    • 3 guidelines
      • Make things smaller
      • Move them closer
      • Load them smarter
    • Make things smaller
    • Gzip
      • Reduces size by ~70%!
      • ~90% of traffic claims support
      • Ignore the Accept-encoding header and use a white-list of supporting browsers instead
      • Gzipped JS in an iframe to test
    • Strip white space and comments
      • YUICompressor
      • JS min
      • CSS min
      • HTML (watch out for textareas)
    • Optimize images
      • Lossless vs. lossy
      • Strip hidden EXIF data
      • Use jpegtran & pngcrush / smush.it
      • Resize for mobile devices
      • WebP for Chrome & Opera
    • WebP
    • Move things closer
    • Use a CDN for your static resources
      • You can’t change the speed of light
      • Popular CDN’s:
      • Akamai
      • Level3
      • Limelight
      • Cloudfront is the most startup friendly
      • Use Google’s CDN to host your JS libraries
      • Likely local browser cache hit
      • Fast & free CDN
      • Lots of popular libraries available
    • Load things smarter
    • The fastest request is the
      one that never happens
    • Add cache-control headers
      • Set your expires headers to never expire / expire in a year
      • Rename files when you change them
      • Add GET variables to your static resources to tell browser to download new version
      Ex: style.css?ts=1311496509
    • Reduce HTTP requests
    • Setup
      Downloading
    • Reduce HTTP requests
      • Combine CSS & JS files
      • Use image sprites
      • Use data URI’s for images
      • Only for small images
      • Not supported in all browsers
      • Keep an eye on 3rd party scripts
    • Help the browser render faster
      • Add width / height attr to IMG tags
      • Put CSS at the top (inside <head>)
      • Allows for progressive rendering
      • Put JS at the bottom (before </body)
      • Script tags block parallel downloads
      • Improves the perceived performance
    • Avoid web fonts
    • Avoid web fonts
    • Other tricks
      • Use multiple domains for parallel downloads
      • Minimize use of iframes & cookies
      • Keep an eye on 3rd party scripts
      • Defer JavaScript
      • Avoid 404’s and redirects
    • Using localStorage on Mobile
      • Used by Google & Facebook
      • Gives you dedicated cache space
      • Get 5MB dedicated space per domain
      • Reduce HTTP requests
      • Include static resources w/ initial HTML
      • Use cookies to track which resources you have in local cache
    • Using localStorage on Mobile
    • Using localStorage on Mobile
      2.2x faster
    • Resources
      • WebPageTest
      • YSlow and PageSpeed
      • stevesouders.com
      • torbit.com
    • torbit.com
      Invite code: 500startups
      Coupon: 500fastwebsites
      for 50% off for life!
    • @joshfraser
      josh@torbit.com