Shropgeek Rebellion: 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

T H E I D E A B U R E A U

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 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 13

Slide 13 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 14

Slide 14 text

Measuring...

Slide 15

Slide 15 text

Your toolbox... Yahoo! YSlow

Slide 16

Slide 16 text

WebPagetest

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Slowy App

Slide 19

Slide 19 text

5 things...

Slide 20

Slide 20 text

1) Reduce requests

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

TCP Segmentation !

Slide 24

Slide 24 text

2) Reduce page weight

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Image optimisation

Slide 30

Slide 30 text

Image optimisation ● Serve appropriate image sizes

Slide 31

Slide 31 text

Image optimisation ● Serve appropriate image sizes ● Compress images

Slide 32

Slide 32 text

Image optimisation ● Serve appropriate image sizes ● Compress images ● Use progressive JPEGs

Slide 33

Slide 33 text

Image optimisation ● Serve appropriate image sizes ● Compress images ● Use progressive JPEGs ● Tools such as CodeKit, ImageOptim

Slide 34

Slide 34 text

Minify assets

Slide 35

Slide 35 text

Minify assets ● Compress CSS + JavaScript

Slide 36

Slide 36 text

Minify assets ● Compress CSS + JavaScript ● Tools such as CodeKit, Mixture

Slide 37

Slide 37 text

GZIP compession

Slide 38

Slide 38 text

GZIP compession ● jQuery from 90kb to 30kb

Slide 39

Slide 39 text

GZIP compession ● jQuery from 90kb to 30kb ● Code in talk notes

Slide 40

Slide 40 text

3) Caching

Slide 41

Slide 41 text

Caching

Slide 42

Slide 42 text

Caching ● Be explicit

Slide 43

Slide 43 text

Caching ● Be explicit ● Allow the browser to keep ﬁles

Slide 44

Slide 44 text

Caching ● Be explicit ● Allow the browser to keep ﬁles ● Use cache busting to renew cached ﬁles

Slide 45

Slide 45 text

Caching ● Be explicit ● Allow the browser to keep ﬁles ● Use cache busting to renew cached ﬁles ● Code in talk notes

Slide 46

Slide 46 text

Cache busting!

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

4) Loading assets

Slide 50

Slide 50 text

Loading assets

Slide 51

Slide 51 text

Loading assets CSS at the top Within the element

Slide 52

Slide 52 text

Loading assets CSS at the top Within the element JavaScript at the bottom Just before closing tag

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

5) Use a CDN

Slide 55

Slide 55 text

maxcdn.com

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

What next?

Slide 58

Slide 58 text

What next? Designer? Perceived performance

Slide 59

Slide 59 text

What next? Designer? Perceived performance Front-end developer? CSS + JavaScript efficiency

Slide 60

Slide 60 text

What next? Designer? Perceived performance Front-end developer? CSS + JavaScript efficiency Back-end developer? Varnish