How to make your website blazing fast
Upcoming SlideShare
Loading in...5

How to make your website blazing fast






Total Views
Views on SlideShare
Embed Views



1 Embed 5 5



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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
  • 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
  • Time
  • 17% back-end
    83% front-end
  • Onload
    DOM ready
  • 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 /
    • 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
  • 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
    Invite code: 500startups
    Coupon: 500fastwebsites
    for 50% off for life!
  • @joshfraser