faster front end performance
DESCRIPTION
Faster front end performance for Drupal sites from DrupalCon Chicago.TRANSCRIPT
Faster Front End PerformanceDan MouyardMatt Farina
VarnishWeb HeadsClusterWeb Heads
MySQL SlaveCDNOpcode CacheMemcache
Front End Performance?
Dan MouyardTerpSys
Accessibility & Performance Focused Themer
3 Years With Drupal
World Champion Old-Time Piano Player
(dcmouyard)
Matt FarinaPalantir.net
Co-Author of Drupal 7 Module Development
Core Contributor
Over 5.5 Years With Drupal
(mfer)
Who sees slow sites?
http://www.flickr.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.flickr.com/photos/tagzania/3117584313/
Mobile Users
http://www.flickr.com/photos/csessums/4460821479/
Slow Connection Speeds
Why Does It Matter?
http://www.flickr.com/photos/vectorportal/4929890104/
Satisfied Users
SEO
Toolbox
http://www.flickr.com/photos/dipster1/1403240351/
YSlow
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/s384 kbps
Real World Numbers
49 - 514 KiB/s392 - 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
CSS Sprites
CSS Sprites
269.6 kb
37 CSS Images
88.7 kb
4 CSS Images
Cache Theme Images
.htaccess, web.config
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!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
div#nav ul.nav-‐list li a
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav .nav-‐list li a
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav > .nav-‐list > li > a
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav a
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav a
Quick! Get that link!
* Never use the universal selector!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav .nav-‐link
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#nav #menu-‐link-‐42
Quick! Get that link!
<div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul></div>
#menu-‐link-‐42
Quick! Get that link!
People view web pages in browsershtml, images, css, jsserver 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/
Q&A
What did you think?
Locate this session on the DCC website:http://chicago2011.drupal.org/sessions
Click the “Take the Survey” link.
Thanks!