Being a tweaker modern web performance techniques

BEING A TWEAKER - MODERN WEB PERFORMANCE TECHNIQUES

Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove

Diamond SponsorCTREC Hilton

http://www.ctrechilton.com/

TELLAGO

REFERENCESEssential Knowledge for Front-End Engineers

Steve Soudershttp://www.stevesouders.com/

http://amzn.to/gwf9pGhttp://amzn.to/gudayQ

http://developer.yahoo.com/performance/rules.html

SPEED KILLS Customers/Users Are Impatient Speed SEO Factor Amazon: 1 Click Purchase

Case Study Wal-Mart

SPEED KILLS

http://bit.ly/xfvPMC

SPEED KILLS

http://bit.ly/xfvPMC

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

TOOLS IE – F12

Networking Profiling

FireFox FireBug – Yslow Plugin

WebKit Developer Tools Ctrl + Shift + I

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

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

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

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/l

ibrary/60f3fa55-f005-496e-9d2f-cc4fc2732fce1033.mspx?mfr=true

• Blowry• Various ISAPI Filters

IMAGE SPRITES Add Multiple Images

together Great for Icons Use CSS positioning to

set background-image

IMAGE SPRITES div {

background:url(icon-sprites.png);margin:3px;

} .sprite1 {

width:24px;height:26px;background-position: 0px 0px;

}

DATA URIS Base64 Encode Data Eliminates Requests Do Not Use for LARGE Images

<img src="data:image/png;base64, {mystery meat} " alt="Texas Rangers">

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

Pressures

DEFERRED CONTENT Load Content in the background Predictive Loading Use the IMG load event to load next

image

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

OK)

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/script>")</script>

STYLES @ TOP Browser needs Styles to Render

Markup Avoid Inline Styles

SCRIPTS @ BOTTOM SCRIPT tag is a blocking Tag Scripts Must Be Evaluated before

proceding Allows markup to be rendered 1st

(perceived perf) Exception - modernizr

STORAGE LocalStorage IndexDB WebSQL (deprecated)

IndexDB & WebSQL have better perf and reliability

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

USE FOR NOT $.EACHvar 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');

USE FOR NOT $.EACH

USE IDS NOT CLASSESconsole.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');

USE IDS NOT CLASSES

GIVE SELECTORS CONTEXT

$(“.class”).takeAction({x:y});

Vs

$(“.class”, “#container”).takeAction({x:y});

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

CACHE & CHAINfor (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); }

AVOID DOM MANIPULATION

var list = ''; for (var i=0; i<1000; i++) {

list += '<li>'+i+'</li>'; } ('#list').html (list);

JOIN NOT CONCATvar array = []; for (var i=0; i<=10000; i++) {

array[i] = '<li>'+i+'</li>'; } $('#list').html (array.join (''));

RETURN FALSE$('#item').click (function () { // stuff here

return false; });