how to make your website blazing fast

42
How to make your website blazing fast @joshfraser

Upload: josh-fraser

Post on 15-Dec-2014

836 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: How to make your website blazing fast

How to make your

website blazing fast

@joshfraser

Page 2: How to make your website blazing fast

Slow websites suck

Page 3: How to make your website blazing fast

40% of people will abandon a site that take more than 3 seconds to load

Page 4: How to make your website blazing fast

Slow websites lose money

Page 5: How to make your website blazing fast

Amazon loses 1% of salesfor every 100ms of latency

Page 6: How to make your website blazing fast

Google loses 20% of their traffic for every 500ms of latency

Page 7: How to make your website blazing fast

Google penalizes the PageRank of slow websites

Page 8: How to make your website blazing fast

80-90% of performance is front-end

Page 9: How to make your website blazing fast

Yahoo increased their traffic by 9% with a 400ms speed improvement

Page 10: How to make your website blazing fast

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

Waterfall view of 500startups.com

Page 12: How to make your website blazing fast

Time

Page 13: How to make your website blazing fast

17% back-end 83% front-end

Page 14: How to make your website blazing fast

DOM ready

Onload

Finished

Page 15: How to make your website blazing fast

DNS lookup

Time to 1st Byte

Content download

Initial connection

Page 16: How to make your website blazing fast

Recognize this?

Page 17: How to make your website blazing fast

3 guidelines

Make things smaller Move them closer Load them smarter

Page 18: How to make your website blazing fast

Make things smaller

Page 19: How to make your website blazing fast

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

Strip white space and comments

YUICompressor JS min CSS min HTML (watch out for textareas)

Page 21: How to make your website blazing fast

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

WebP

Page 23: How to make your website blazing fast

Move things closer

Page 24: How to make your website blazing fast
Page 25: How to make your website blazing fast

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

Load things smarter

Page 27: How to make your website blazing fast

The fastest request is the

one that never happens

Page 28: How to make your website blazing fast

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

Reduce HTTP requests

Page 30: How to make your website blazing fast

Setup Downloading

Page 31: How to make your website blazing fast

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

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

Avoid web fonts

Page 34: How to make your website blazing fast

Avoid web fonts

Page 35: How to make your website blazing fast

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
Page 37: How to make your website blazing fast

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

Using localStorage on Mobile

Page 39: How to make your website blazing fast

Using localStorage on Mobile

2.2x faster

Page 40: How to make your website blazing fast

Resources

WebPageTest YSlow and PageSpeed stevesouders.com torbit.com

Page 41: How to make your website blazing fast

torbit.com

Invite code: 500startups

Coupon: 500fastwebsites

for 50% off for life!