1. BEING A TWEAKER - MODERN WEB
PERFORMANCE TECHNIQUES
Chris Love
Tellago Inc.
http://ProfessionalASPNET.com
http://Twitter.com/ChrisLove

2. Diamond Sponsor
CTREC Hilton
http://www.ctrechilton.com/

3. TELLAGO

4. REFERENCES
Essential Knowledge for
Front-End Engineers
Steve Souders
http://www.stevesouders.com/
http://amzn.to/gwf9pG
http://amzn.to/gudayQ
http://developer.yahoo.com/performa
nce/rules.html

5. SPEED KILLS
 Customers/Users Are Impatient
 Speed SEO Factor
 Amazon: 1 Click Purchase
 Case Study Wal-Mart

6. SPEED KILLS
http://bit.ly/xfvPMC

7. SPEED KILLS
http://bit.ly/xfvPMC

8. SPEED KILLS
 For every 1 second of improvement they
experienced up to a 2% increase in
conversions
 For every 100 ms of improvement, they grew
incremental revenue by up to 1%
 SEO benefits for entry pages and reduce
bounces

9. TOOLS
 IE – F12
 Networking
 Profiling
 FireFox
 FireBug – Yslow Plugin
 WebKit
 Developer Tools Ctrl + Shift + I

10. MAKE FEWER REQUESTS
• Each Request Adds More Overhead
• Avoid Slicing Images that are not Reused
• Image Maps
• CSS Sprites
• Inline Images
• Combine Scripts and CSS

11. BUNDLING & MINIFICATION
 Reduces Requests
 Reduces Size
 JSMin http://bit.ly/tzBeo
 YUI Compressor http://yhoo.it/AWec
 Google Closure Compiler http://bit.ly/aNwjz
 AJAXMin http://bit.ly/cCCKEI
 Cassette http://bit.ly/zsGm8X

12. BUNDLING & MINIFICATION
 ASP.NET 4.0 Includes New Tool
 Gu’s Blog Post http://bit.ly/su4zHd
 JS & CSS
 Granular Control
 Custom Rules
 Demo http://bit.ly/q5sFNK

13. COMPRESS
• Reduces Content being sent over the wire
• Gzip, Deflate
• Increases Processer Demand on both ends
• IIS 6 and IIS 7
• http://technet2.microsoft.com/windowsserver2008/en/library/
60f3fa55-f005-496e-9d2f-cc4fc2732fce1033.mspx?mfr=true
• Blowry
• Various ISAPI Filters

14. IMAGE SPRITES
 Add Multiple Images
together
 Great for Icons
 Use CSS positioning to set
background-image

15. IMAGE SPRITES
div {
background:url(icon-sprites.png);
margin:3px;
}
.sprite1
{
width:24px;
height:26px;
background-position: 0px 0px;
}

16. DATA URIS
 Base64 Encode Data
 Eliminates Requests
 Do Not Use for LARGE Images
<img src="data:image/png;base64, {mystery
meat} " alt="Texas Rangers">

17. SINGLE PAGE APPS
 Can Reduce Requests
 Snappy Page & Content Transitions
 Be Cautious of Browser Memory Pressures

18. DEFERRED CONTENT
 Load Content in the background
 Predictive Loading
 Use the IMG load event to load next image

19. USE CDN
 Common Scripts & Resources
 Reduces Requests (sort of)
 Typically Not Compressed (but that’s OK)

20. USE CDN
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.
min.js"></script>
<script> window.jQuery || document.write("<script
src='@Url.Content("~/js/libs/jquery-
1.7.1.min.js")'>x3C/script>")</script>
<script
src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/
jquery.tmpl.min.js"></script>
<script>window.jQuery.fn.tmpl ||
document.write("<script
src='@Url.Content("~/js/libs/jquery.tmpl.min.js")'>x3C/s
cript>")</script>

21. STYLES @ TOP
 Browser needs Styles to Render
Markup
 Avoid Inline Styles

22. SCRIPTS @ BOTTOM
 SCRIPT tag is a blocking Tag
 Scripts Must Be Evaluated before proceding
 Allows markup to be rendered 1st (perceived
perf)
 Exception - modernizr

23. STORAGE
 LocalStorage
 IndexDB
 WebSQL (deprecated)
 IndexDB & WebSQL have better perf and
reliability

24. JQUERY PERFORMANCE
 Always Use Latest Version
 Use CDNs (Google, Microsoft)

25. USE FOR NOT $.EACH
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
array[i] = i;
}
console.timeEnd('native');
console.time('jquery');
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd('jquery');

26. USE FOR NOT $.EACH

27. USE IDS NOT CLASSES
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');

28. USE IDS NOT CLASSES

29. GIVE SELECTORS CONTEXT
$(“.class”).takeAction({x:y});
Vs
$(“.class”, “#container”).takeAction({x:y});

30. CACHE & CHAIN
$(“.class”).takeAction1({x:y});
$(“.class”).takeAction2({x:y});
$(“.class”).takeAction2({x:y});
Vs
$(“.class”).takeAction1({x:y}) .takeAction2({x:y})
.takeAction3({x:y});

31. CACHE & CHAIN
for (var i=0; i<1000; i++) {
$('#list').append (i);
}
// much better this way
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}

32. AVOID DOM MANIPULATION
var list = '';
for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
('#list').html (list);

33. JOIN NOT CONCAT
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));

34. RETURN FALSE
$('#item').click (function () {
// stuff here
return false;
});