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
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
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
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)
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
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');
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');