Faster Front End Performance

Slide 1

Slide 1 text

Faster Front End Performance Dan Mouyard Matt Farina

Slide 2

Slide 2 text

Varnish Web Heads Cluster Web Heads MySQL Slave CDN Opcode Cache Memcache

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Front End Performance?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Dan Mouyard TerpSys Accessibility & Performance Focused Themer 3 Years With Drupal World Champion Old-Time Piano Player (dcmouyard)

Slide 7

Slide 7 text

Matt Farina Palantir.net Co-Author of Drupal 7 Module Development Core Contributor Over 5.5 Years With Drupal (mfer)

Slide 8

Slide 8 text

Who sees slow sites? http://www.ﬂickr.com/photos/valeriebb/3006348550/

Slide 9

Slide 9 text

Internet Explorer Users

Slide 10

Slide 10 text

44% 56% Other Browsers Internet Explorer http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

Slide 11

Slide 11 text

http://www.ﬂickr.com/photos/tagzania/3117584313/ Mobile Users

Slide 12

Slide 12 text

http://www.ﬂickr.com/photos/csessums/4460821479/ Slow Connection Speeds

Slide 13

Slide 13 text

Why Does It Matter?

Slide 14

Slide 14 text

http://www.ﬂickr.com/photos/vectorportal/4929890104/ Satisﬁed Users

Slide 15

Slide 15 text

SEO

Slide 16

Slide 16 text

Toolbox http://www.ﬂickr.com/photos/dipster1/1403240351/

Slide 17

Slide 17 text

YSlow

Slide 18

Slide 18 text

Page Speed

Slide 19

Slide 19 text

Minify Savings (JSMin)

Slide 20

Slide 20 text

Logged In

Slide 21

Slide 21 text

Appearance Editor Yikes!

Slide 22

Slide 22 text

JSMin YUI Compressor Google Closure Compiler UglifyJS

Slide 23

Slide 23 text

Waterfall Diagrams

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

6 Connections Per Domain

Slide 27

Slide 27 text

IE 6/7 Two Per Domain

Slide 28

Slide 28 text

Slow High Speed Connections? 48 KiB/s 384 kbps

Slide 29

Slide 29 text

Real World Numbers 49 - 514 KiB/s 392 - 4112 kbps

Slide 30

Slide 30 text

Throttling Proxy Throttling Proxy

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Pulling From Cache

Slide 33

Slide 33 text

Under Slow 3G Speeds

Slide 34

Slide 34 text

Images

Slide 35

Slide 35 text

Quantity

Slide 36

Slide 36 text

Filesize

Slide 37

Slide 37 text

Graphics Interchange Format GIF

Slide 38

Slide 38 text

JPEG Joint Photographic Experts Group

Slide 39

Slide 39 text

PNG Portable Network Graphics

Slide 40

Slide 40 text

Graphics

Slide 41

Slide 41 text

Graphics PNG8, GIF

Slide 42

Slide 42 text

Photographs

Slide 43

Slide 43 text

Photographs JPEG, PNG

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

PNG Transparency

Slide 47

Slide 47 text

PNG Transparency No AlphaImageLoader for IE6!

Slide 48

Slide 48 text

Image Compression

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Image Styles

Slide 51

Slide 51 text

CSS Sprites

Slide 52

Slide 52 text

CSS Sprites

Slide 53

Slide 53 text

CSS Sprites

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

269.6 kb 37 CSS Images

Slide 58

Slide 58 text

88.7 kb 4 CSS Images

Slide 59

Slide 59 text

Cache Theme Images .htaccess, web.conﬁg

Slide 60

Slide 60 text

CSS & JS

Slide 61

Slide 61 text

page.tpl.php $styles $scripts $closure Placement in Drupal 6

Slide 62

Slide 62 text

html.tpl.php $styles $scripts $page_bottom Placement in Drupal 7

Slide 63

Slide 63 text

Selector Performance

Slide 64

Slide 64 text

Quick! Get that link!

Slide 65

Slide 65 text

div#nav ul.nav-‐list li a Quick! Get that link!

Slide 66

Slide 66 text

#nav .nav-‐list li a Quick! Get that link!

Slide 67

Slide 67 text

#nav > .nav-‐list > li > a Quick! Get that link!

Slide 68

Slide 68 text

#nav a Quick! Get that link!

Slide 69

Slide 69 text

#nav a Quick! Get that link! * Never use the universal selector!

Slide 70

Slide 70 text

#nav .nav-‐link Quick! Get that link!

Slide 71

Slide 71 text

#nav #menu-‐link-‐42 Quick! Get that link!

Slide 72

Slide 72 text

#menu-‐link-‐42 Quick! Get that link!

Slide 73

Slide 73 text

People view web pages in browsers html, images, css, js server side performance != seen performance for users Resources • Even Faster Websites by Steve Souders • Steve Souders blog - http://stevesouders.com/ • Web Performance Best Practices - http:// code.google.com/speed/page-speed/docs/ rules_intro.html • YDN Performance - http://developer.yahoo.com/ performance/

Slide 74

Slide 74 text

Q&A

Slide 75

Slide 75 text

What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!