Download - How to make your website blazing fast
![Page 1: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/1.jpg)
How to make your
website blazing fast
@joshfraser
![Page 2: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/2.jpg)
Slow websites suck
![Page 3: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/3.jpg)
40% of people will abandon a site that take more than 3 seconds to load
![Page 4: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/4.jpg)
Slow websites lose money
![Page 5: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/5.jpg)
Amazon loses 1% of salesfor every 100ms of latency
![Page 6: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/6.jpg)
Google loses 20% of their traffic for every 500ms of latency
![Page 7: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/7.jpg)
Google penalizes the PageRank of slow websites
![Page 8: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/8.jpg)
80-90% of performance is front-end
![Page 9: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/9.jpg)
Yahoo increased their traffic by 9% with a 400ms speed improvement
![Page 10: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/10.jpg)
Shopzilla reduced their load time from 7 seconds to 2. Traffic increased 25% and revenue
increased 12%
![Page 11: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/11.jpg)
Waterfall view of 500startups.com
![Page 12: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/12.jpg)
Time
![Page 13: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/13.jpg)
17% back-end 83% front-end
![Page 14: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/14.jpg)
DOM ready
Onload
Finished
![Page 15: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/15.jpg)
DNS lookup
Time to 1st Byte
Content download
Initial connection
![Page 16: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/16.jpg)
Recognize this?
![Page 17: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/17.jpg)
3 guidelines
Make things smaller Move them closer Load them smarter
![Page 18: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/18.jpg)
Make things smaller
![Page 19: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/19.jpg)
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
![Page 20: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/20.jpg)
Strip white space and comments
YUICompressor JS min CSS min HTML (watch out for textareas)
![Page 21: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/21.jpg)
Optimize images
Lossless vs. lossy Strip hidden EXIF data Use jpegtran & pngcrush / smush.it Resize for mobile devices WebP for Chrome & Opera
![Page 22: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/22.jpg)
WebP
![Page 23: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/23.jpg)
Move things closer
![Page 24: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/24.jpg)
![Page 25: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/25.jpg)
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
![Page 26: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/26.jpg)
Load things smarter
![Page 27: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/27.jpg)
The fastest request is the
one that never happens
![Page 28: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/28.jpg)
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
![Page 29: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/29.jpg)
Reduce HTTP requests
![Page 30: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/30.jpg)
Setup Downloading
![Page 31: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/31.jpg)
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
![Page 32: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/32.jpg)
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
![Page 33: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/33.jpg)
Avoid web fonts
![Page 34: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/34.jpg)
Avoid web fonts
![Page 35: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/35.jpg)
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
![Page 36: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/36.jpg)
![Page 37: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/37.jpg)
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
![Page 38: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/38.jpg)
Using localStorage on Mobile
![Page 39: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/39.jpg)
Using localStorage on Mobile
2.2x faster
![Page 40: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/40.jpg)
Resources
WebPageTest YSlow and PageSpeed stevesouders.com torbit.com
![Page 41: How to make your website blazing fast](https://reader033.vdocument.in/reader033/viewer/2022061211/54922989b4795969178b539c/html5/thumbnails/41.jpg)
torbit.com
Invite code: 500startups
Coupon: 500fastwebsites
for 50% off for life!