Slide 1
Slide 1 text
Ben Everard
Web performance improvements
you can make in one hour
§
Slide 2
Slide 2 text
Who’s this guy?
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
Measuring
Slide 8
Slide 8 text
Your toolbox...
Google Page Speed
Yahoo! YSlow
Others...
Chrome Dev Tools
Firebug
WebPagetest
Slowy App
et al...
Slide 9
Slide 9 text
Lets. Get. Started.
Slide 10
Slide 10 text
1) Reduce requests
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html
Slide 13
Slide 13 text
TCP Segmentation
Slide 14
Slide 14 text
2) Reduce page weight
Slide 15
Slide 15 text
Mobile Visit Exmoor site
http://m.visit-exmoor.co.uk
Slide 16
Slide 16 text
Mobile Visit Exmoor site
http://m.visit-exmoor.co.uk
Weighs 2MB
Slide 17
Slide 17 text
Mobile Visit Exmoor site
http://m.visit-exmoor.co.uk
At Exmoor speeds...
Weighs 2MB
Slide 18
Slide 18 text
Mobile Visit Exmoor site
http://m.visit-exmoor.co.uk
At Exmoor speeds...
Weighs 2MB
● 30 seconds before anything is visible
Slide 19
Slide 19 text
Mobile Visit Exmoor site
http://m.visit-exmoor.co.uk
At Exmoor speeds...
Weighs 2MB
● Entire site loaded in 7.2 minutes
● 30 seconds before anything is visible
Slide 20
Slide 20 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 21
Slide 21 text
75% of page weight
in these two images
Slide 22
Slide 22 text
Image optimisation
Slide 23
Slide 23 text
Minify assets
Slide 24
Slide 24 text
GZIP compression
Slide 25
Slide 25 text
! AddOutputFilterByType DEFLATE
! ! text/text
! ! text/html
! ! text/plain
! ! text/xml
! ! text/css
! ! application/x-javascript
! ! application/javascript
http://git.io/XTDjng
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
3) Caching
Slide 29
Slide 29 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 30
Slide 30 text
Cache busting!
Slide 31
Slide 31 text
http://domain.com/screen.css?v=2
Slide 32
Slide 32 text
http://domain.com/screen.css?v=2
Slide 33
Slide 33 text
filemtime()
Slide 34
Slide 34 text
4) Loading assets...
Slide 35
Slide 35 text
CSS at the top
Within the element
Slide 36
Slide 36 text
JavaScript at the bottom
Just before closing tag
Slide 37
Slide 37 text
http://davidwalsh.name/html5-async
Slide 38
Slide 38 text
5) Use a CDN
Slide 39
Slide 39 text
maxcdn.com
Slide 40
Slide 40 text
1) Reduce requests
2) Reduce page weight
3) Be explicit with caching
4) Loading assets
5) Use a CDN
What have we learnt?