Dev.Ocean #3: Web Performance Improvements In One Hour

Slide 1

Slide 1 text

Ben Everard Web performance improvements you can make in one hour §

Slide 2

Slide 2 text

J’adore le web

Slide 3

Slide 3 text

Pre-talk shout-outs... Andy Davies http://andydavies.me Steve Souders http://www.stevesouders.com/

Slide 4

Slide 4 text

Why is performance so important?

Slide 5

Slide 5 text

“If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost $2.5 million in lost sales every year.” http://blog.kissmetrics.com/loading-time/?wide=1

Slide 6

Slide 6 text

“Amazon found that it increased revenue by 1% for every 100 milliseconds of improvement” http://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt

Slide 7

Slide 7 text

A real example...

Slide 8

Slide 8 text

Mobile Visit Exmoor site http://m.visit-exmoor.co.uk At Exmoor speeds... Weighs 2MB ● Destroyed my phone battery ● Entire site loaded in 7.2 minutes ● 30 seconds before anything is visible

Slide 9

Slide 9 text

Measuring...

Slide 10

Slide 10 text

Your toolbox... Google Page Speed Yahoo! YSlow Others... Chrome Dev Tools Firebug WebPagetest Slowy App et al...

Slide 11

Slide 11 text

Lets get started...

Slide 12

Slide 12 text

1) Reduce requests

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

Slide 15

Slide 15 text

TCP Segmentation

Slide 16

Slide 16 text

2) Reduce page weight

Slide 17

Slide 17 text

75% of page weight in these two images Mobile Visit Exmoor site http://m.visit-exmoor.co.uk

Slide 18

Slide 18 text

Image optimisation

Slide 19

Slide 19 text

Minify assets

Slide 20

Slide 20 text

GZIP compression

Slide 21

Slide 21 text

! AddOutputFilterByType DEFLATE ! ! text/text ! ! text/html ! ! text/plain ! ! text/xml ! ! text/css ! ! application/x-javascript ! ! application/javascript http://git.io/XTDjng

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

3) Caching

Slide 24

Slide 24 text

! ExpiresActive On ! ExpiresByType text/css "access plus 1 year" ! ExpiresByType application/javascript "access plus 1 year" ! ExpiresByType text/javascript "access plus 1 year" ! ExpiresByType text/html "access plus 1 hour" ! ExpiresByType text/richtext "access plus 1 hour" ! ExpiresByType text/plain "access plus 1 hour" ! ExpiresByType text/xml "access plus 1 hour" ! ExpiresByType image/gif "access plus 1 year" ! ExpiresByType image/jpeg "access plus 1 year" ! ExpiresByType image/png "access plus 1 year" ! ExpiresByType image/x-icon "access plus 1 year" http://git.io/XTDjng

Slide 25

Slide 25 text

Cache busting!

Slide 26

Slide 26 text

http://domain.com/screen.css?v=2

Slide 27

Slide 27 text

4) Loading assets

Slide 28

Slide 28 text

CSS at the top Within the element

Slide 29

Slide 29 text

JavaScript at the bottom Just before closing tag

Slide 30

Slide 30 text

http://davidwalsh.name/html5-async

Slide 31

Slide 31 text

5) Use a CDN

Slide 32

Slide 32 text

maxcdn.com

Slide 33

Slide 33 text

1) Reduce requests 2) Reduce page weight 3) Be explicit with caching 4) Loading assets 5) Use a CDN What have we learnt?

Slide 34

Slide 34 text

1) Find and ﬁx issues on your own site 2) Tell your friends 3) Drink beer What next?