faster front end performance
DESCRIPTION
Faster front end performance for Drupal sites from DrupalCon Chicago.TRANSCRIPT
![Page 1: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/1.jpg)
Faster Front End PerformanceDan MouyardMatt Farina
![Page 2: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/2.jpg)
VarnishWeb HeadsClusterWeb Heads
MySQL SlaveCDNOpcode CacheMemcache
![Page 3: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/3.jpg)
![Page 4: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/4.jpg)
Front End Performance?
![Page 5: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/5.jpg)
![Page 6: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/6.jpg)
Dan MouyardTerpSys
Accessibility & Performance Focused Themer
3 Years With Drupal
World Champion Old-Time Piano Player
(dcmouyard)
![Page 7: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/7.jpg)
Matt FarinaPalantir.net
Co-Author of Drupal 7 Module Development
Core Contributor
Over 5.5 Years With Drupal
(mfer)
![Page 8: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/8.jpg)
Who sees slow sites?
http://www.flickr.com/photos/valeriebb/3006348550/
![Page 9: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/9.jpg)
Internet Explorer Users
![Page 10: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/10.jpg)
44%
56%
Other Browsers Internet Explorer
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
![Page 11: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/11.jpg)
http://www.flickr.com/photos/tagzania/3117584313/
Mobile Users
![Page 12: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/12.jpg)
http://www.flickr.com/photos/csessums/4460821479/
Slow Connection Speeds
![Page 13: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/13.jpg)
Why Does It Matter?
![Page 14: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/vectorportal/4929890104/
Satisfied Users
![Page 15: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/15.jpg)
SEO
![Page 16: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/16.jpg)
Toolbox
http://www.flickr.com/photos/dipster1/1403240351/
![Page 17: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/17.jpg)
YSlow
![Page 18: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/18.jpg)
Page Speed
![Page 19: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/19.jpg)
Minify Savings (JSMin)
![Page 20: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/20.jpg)
Logged In
![Page 21: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/21.jpg)
Appearance Editor Yikes!
![Page 22: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/22.jpg)
JSMin
YUI Compressor
Google Closure Compiler
UglifyJS
![Page 23: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/23.jpg)
Waterfall Diagrams
![Page 24: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/24.jpg)
![Page 25: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/25.jpg)
![Page 26: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/26.jpg)
6 Connections Per Domain
![Page 27: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/27.jpg)
IE 6/7 Two Per Domain
![Page 28: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/28.jpg)
Slow High Speed Connections?
48 KiB/s384 kbps
![Page 29: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/29.jpg)
Real World Numbers
49 - 514 KiB/s392 - 4112 kbps
![Page 30: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/30.jpg)
Throttling Proxy Throttling Proxy
![Page 31: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/31.jpg)
![Page 32: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/32.jpg)
Pulling From Cache
![Page 33: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/33.jpg)
Under Slow 3G Speeds
![Page 34: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/34.jpg)
Images
![Page 35: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/35.jpg)
Quantity
![Page 36: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/36.jpg)
Filesize
![Page 37: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/37.jpg)
Graphics Interchange Format
GIF
![Page 38: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/38.jpg)
JPEG
Joint Photographic Experts Group
![Page 39: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/39.jpg)
PNG
Portable Network Graphics
![Page 40: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/40.jpg)
Graphics
![Page 41: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/41.jpg)
Graphics
PNG8, GIF
![Page 42: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/42.jpg)
Photographs
![Page 43: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/43.jpg)
Photographs
JPEG, PNG
![Page 44: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/44.jpg)
![Page 45: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/45.jpg)
![Page 46: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/46.jpg)
PNG Transparency
![Page 47: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/47.jpg)
PNG Transparency
No AlphaImageLoader for IE6!
![Page 48: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/48.jpg)
Image Compression
![Page 49: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/49.jpg)
![Page 50: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/50.jpg)
Image Styles
![Page 51: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/51.jpg)
CSS Sprites
![Page 52: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/52.jpg)
CSS Sprites
![Page 53: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/53.jpg)
CSS Sprites
![Page 54: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/54.jpg)
![Page 55: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/55.jpg)
![Page 56: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/56.jpg)
![Page 57: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/57.jpg)
269.6 kb
37 CSS Images
![Page 58: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/58.jpg)
88.7 kb
4 CSS Images
![Page 59: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/59.jpg)
Cache Theme Images
.htaccess, web.config
![Page 60: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/60.jpg)
CSS & JS
![Page 61: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/61.jpg)
page.tpl.php <html> <head> $styles </head> <body> $scripts $closure </body> </html>
Placement in Drupal 6
![Page 62: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/62.jpg)
html.tpl.php <html> <head> $styles </head> <body> $scripts $page_bottom </body> </html>
Placement in Drupal 7
![Page 63: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/63.jpg)
Selector Performance
![Page 64: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/64.jpg)
<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!
![Page 65: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/65.jpg)
<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!
![Page 66: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/66.jpg)
<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!
![Page 67: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/67.jpg)
<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!
![Page 68: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/68.jpg)
<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!
![Page 69: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/69.jpg)
<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!
![Page 70: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/70.jpg)
<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!
![Page 71: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/71.jpg)
<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!
![Page 72: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/72.jpg)
<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!
![Page 73: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/73.jpg)
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/
![Page 74: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/74.jpg)
Q&A
![Page 75: Faster front end performance](https://reader034.vdocument.in/reader034/viewer/2022051515/5583e7f9d8b42a423f8b5288/html5/thumbnails/75.jpg)
What did you think?
Locate this session on the DCC website:http://chicago2011.drupal.org/sessions
Click the “Take the Survey” link.
Thanks!