View
836
Download
2
Category
Preview:
DESCRIPTION
Citation preview
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 salesfor 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
DOM ready
Onload
Finished
DNS lookup
Time to 1st Byte
Content download
Initial connection
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!
@joshfraserjosh@torbit.com
Recommended