Web Performance Improvements In One Hour

A presentation at Dev.Ocean #3 in May 2013 in Ascot SL5, UK by Ben Everard

Slide 1

Slide 1

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

Slide 2

Slide 2

Who’s this guy?

Slide 3

Slide 3

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

Slide 4

Slide 4

Why is performance so important?

Slide 5

Slide 5

“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

“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

Measuring

Slide 8

Slide 8

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

Slide 9

Slide 9

Lets. Get. Started.

Slide 10

Slide 10

  1. Reduce requests

Slide 11

Slide 11

Slide 12

Slide 12

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

Slide 13

Slide 13

🔎 TCP Segmentation

Slide 14

Slide 14

  1. Reduce page weight

Slide 15

Slide 15

Mobile Visit Exmoor site http://m.visit-exmoor.co.uk

Slide 16

Slide 16

Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB

Slide 17

Slide 17

Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds…

Slide 18

Slide 18

Mobile Visit Exmoor site http://m.visit-exmoor.co.uk Weighs 2MB At Exmoor speeds… ● 30 seconds before anything is visible

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

75% of page weight in these two images

Slide 22

Slide 22

Image optimisation

Slide 23

Slide 23

Minify assets

Slide 24

Slide 24

GZIP compression

Slide 25

Slide 25

<ifmodule mod_deflate.c> ! AddOutputFilterByType DEFLATE ! ! text/text ! ! text/html ! ! text/plain ! ! text/xml ! ! text/css ! ! application/x-javascript ! ! application/javascript </ifmodule> http://git.io/XTDjng

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

  1. Caching

Slide 29

Slide 29

<IfModule mod_expires.c> ! 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” </IfModule> http://git.io/XTDjng

Slide 30

Slide 30

Cache busting!

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

🔎 filemtime()

Slide 34

Slide 34

  1. Loading assets…

Slide 35

Slide 35

CSS at the top Within the <head> element

Slide 36

Slide 36

JavaScript at the bottom Just before closing </body> tag

Slide 37

Slide 37

🔗 http://davidwalsh.name/html5-async

Slide 38

Slide 38

  1. Use a CDN

Slide 39

Slide 39

maxcdn.com

Slide 40

Slide 40

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

Slide 41

Slide 41

Thank you Ben Everard  🔗 ✉ ilmv beneverard.co.uk hello@beneverard.co.uk