Faster Front End Performance

Faster Front End Performance Dan Mouyard Matt Farina

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

Front End Performance?

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

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

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

Internet Explorer Users

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

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

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

Why Does It Matter?

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

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

Page Speed

Minify Savings (JSMin)

Logged In

Appearance Editor Yikes!

JSMin YUI Compressor Google Closure Compiler UglifyJS

Waterfall Diagrams

6 Connections Per Domain

IE 6/7 Two Per Domain

Slow High Speed Connections? 48 KiB/s 384 kbps

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

Throttling Proxy Throttling Proxy

Pulling From Cache

Under Slow 3G Speeds

Images

Quantity

Filesize

Graphics Interchange Format GIF

JPEG Joint Photographic Experts Group

PNG Portable Network Graphics

Graphics

Graphics PNG8, GIF

Photographs

Photographs JPEG, PNG

PNG Transparency

PNG Transparency No AlphaImageLoader for IE6!

Image Compression

Image Styles

CSS Sprites

269.6 kb 37 CSS Images

88.7 kb 4 CSS Images

Cache Theme Images .htaccess, web.conﬁg

CSS & JS

page.tpl.php <html> <head>
$styles </head> <body> $scripts $closure </body> </html> Placement in Drupal 6

html.tpl.php <html> <head>
$styles </head> <body> $scripts $page_bottom </body> </html> Placement in Drupal 7

Selector Performance

<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item">
<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> div#nav ul.nav-‐list li a Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav .nav-‐list li a Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav > .nav-‐list > li > a Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav a Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav a Quick! Get that link! * Never use the universal selector!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav .nav-‐link Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav #menu-‐link-‐42 Quick! Get that link!

<a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #menu-‐link-‐42 Quick! Get that link!

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/

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

Faster Front End Performance

Faster Front End Performance

More Decks by Matt Farina

Other Decks in Technology

Featured

Transcript