High-Performance Best Practices for Web Sites

High-Performance Best Practices for Web SitesJason Weber, Internet Explorer Team, Microsoft

Session Objectives

1) Best Practices to Improve Performance• Inside look at browser performance• Specific things that you can do today• Principles behind the optimizations

2) Preview Internet Explorer 9 Performance• Hardware Accelerated HTML5• GPU Powered Graphics• Compiled JavaScript

I have a lot of content…

Section #1: Best Practices for Improving Performance

Example Scenario – Wall Street Journal

Starting with Bing


Blank Background


Initial HTML


Heading Appears


Initial Content


Right Column Lays Out


Media Appears


Customized Content


Advertisements


Interacting with Website

15

Picking Five Popular News Sites

Wall Street JournalChicago TribuneUSA TodayNew York TimesWashington PostCNN NewsSeattle TimesMSN NewsFinancial TimesBoston Globe

News Site #1News Site #2News Site #3News Site #4News Site #5

16

Five Popular News Sites

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722

JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI

17

Five Popular News SitesVariation in Total Size

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


18

Five Popular News SitesNumber Elements to Number of CSS Rules

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


19

Five Popular News SitesNumber of Images

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


20

Five Popular News SitesAmount of JavaScript

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


21

Five Popular News SitesAmount of JavaScript

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


22

Which sites loads the fastest?

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


23

Which sites loads the slowest?

TotalSize

NumberElement

sCSS

RulesImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


24

Internet Explorer 8 Subsystem Distribution

News Site #1

News Site #2

News Site #3

News Site #4

News Site #5

0

500,000

1,000,000

1,500,000

2,000,000

2,500,000

3,000,000

3,500,000

4,000,000

HTML parsing CSS parser Collections JavaScript Marshalling Native OMFormatting BlockBuild Layout Rendering

Mill

isec

onds

25

Average Distribution Across 5 News Sites

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

26

Average Distribution Across Top AJAX Sites

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

27

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

28

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

Networking OptimizationsCompress Network Traffic

RequestGET / HTTP/1.1Accept: */*Accept-Language: en-usUA-CPU: x86Accept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible…)Host: www.live.com

Response

ResponseHTTP/1.1 200 OKContent-Length: 3479Expires: -1Date: Sun, 14 Mar 2010 21:30:46 GMTContent-Type: text/html; charset=utf-8Pragma: no-cacheContent-Encoding: gzip

Accept-Encoding: gzip, deflate

Content-Encoding: gzip

Networking Optimizations Provide Cacheable Content

First RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com

First ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 19 Mar 2010 00:00:00 GMTExpires: Fri, 19 Mar 2010 00:00:00 GMT

Second RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com

No Response Required

Networking Optimizations Conditional Requests

RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:

Sun, 14 Mar 2010 21:30:46 GMT

Response

ResponseHTTP/1.1 304 Not ModifiedContent-Type: image/jpegLast-Modified:

Sun, 14 Mar 2010 21:30:46 GMTIf-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT

Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT

Networking Optimizations Minify Your JavaScript

function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { var img = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; }

e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('y v(){a=[];b.e=\'\';9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(\'0\');0.o("n","p");0.q.s=\'r\';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')

Original JavaScript Minified JavaScript

Networking Optimizations Don’t Scale Images

<html><head>

<title>Test</title></head><body>

…<img src=“logo.gif" width="50" height="40" />…

</body></html>

width="50" height="40"500 x 400

Networking Optimizations Don’t Scale Images

<html><head>


…<img src=“logo.gif" width="50" height="40" />…

</body></html>

width="50" height="40"

50 x 40

Networking Optimizations Use Image Sprites

<html><head>


…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…

</body></html>

<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6



<head><title>Test</title><style type="text/css">

.a, .b { width: 10; height: 10 }

.a, .b { background-image: "abc.gif" }

.a { background-position: 0 0 }

.b { background-position: 0 -10 }</style>

</head><body>

…<div class="a"></div> Item 1<div class="b"></div> Item 2…

</body>

<div class="a"></div><div class="b"></div>

.a, .b { width: 10; height: 10 }

.a, .b { background-image: "abc.gif" }

.a { background-position: 0 0 }

.b { background-position: 0 -10 }

Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance

39

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

HTML OptimizationsAvoid Inline JavaScript

<html><head>

<title>Test</title><script type="text/javascript"> 

</script></head><body>

…</body>

</html>

<script type="text/javascript"> </script>

HTML Parsing OptimizationsAvoid Linking JavaScript in Head

<html><head>

<title>Test</title><script src=“myscript.js” … ></script>

</head><body>

…</body>

</html>

<script src=“myscript.js” … ></script>

<html><head>


………

</body></html>

<script src=“myscript.js” … ></script>

HTML Parsing OptimizationsLink JavaScript at End of File

HTML Parsing OptimizationsBut if you must, use the defer tag.

<html><head>

<title>Test</title><script src=“myscript.js” … ></script>

</head><body>

…</body>

</html>

defer="defer">

44

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

CSS Parsing Optimizations Avoid Embedded Styles

<html><head>


<style> </style>

… … …

</body></html>

<style> </style>

CSS Parsing Optimizations Avoid Linking Stylesheets at Bottom of Page

<html><head>


……

…</body>

</html>

<link rel="stylesheet" type="text/css" href=“mystyles.css" />

CSS Parsing Optimizations Link Stylesheets at Top of Page

<html><head>

<title>Test</title>

</head><body>

………

</body></html>

<link rel="stylesheet" type="text/css"href="class.css" />

CSS Parsing Optimizations Avoid Using @Import for Hierarchical Styles

@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);

.MyHeading{

color: red; font-family: 'New Century Schoolbook', serif;background: white;

}

@import url(/stylesheets/one.css); @import url(/stylesheets/two.css);

CSS Parsing Optimizations Use Multiple Stylesheets for Hierarchical Styles

<html><head>

<title>Test</title>

</head><body>

………

</body></html>

<link rel="stylesheet" type="text/css" href=“one.css" /><link rel="stylesheet" type="text/css" href=“two.css" /><link rel="stylesheet" type="text/css" href=“three.css" />

50

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

51

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

JavaScript OptimizationsMinimize Symbol Resolution

Global

Local

Intermediate

Scopes

DOM

Instance

PrototypeChainCost

var foo obj.foo

JavaScript Optimizations Minimize Symbol Resolution

function WorkOnLocalVariable(){

localVariable = 5;return ( localVariable + 1 );

}

localVariablelocalVariable

JavaScript Optimizations Minimize Symbol Resolution

function WorkOnLocalVariable2(){

var localVariable = 5;return ( localVariable + 1 );

}

var localVariablelocalVariabl

e

JavaScript Optimizations Minimize Symbol Resolution: Functions

function IterateWorkOverCollection(){

var length = myCollection.length;

for(var i = 0; i < length; i++){

Work(myCollection[i]);}

}

Work

JavaScript Optimizations Minimize Symbol Resolution: Functions

function IterateWorkOverCollection2(){

var funcWork = Work;var length = myCollection.length;


funcWork(myCollection[i]);}

}

var funcWork = Work;

funcWork

JavaScript Optimizations Use Native JSON Methods

var jsObjStringParsed = JSON.parse(jsObjString);

var jsObjStringBack = JSON.stringify(jsObjStringParsed);

JSON.parse

JSON.stringify

<html><head>


………<script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script><script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>

</body></html>

JavaScript OptimizationsRemove Duplicate Script Files

<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>

<html><head>


……<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>

JavaScript OptimizationsRemove Duplicate Script Files

<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>

60

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

Trident (MSHTML)

JScript Engine

Marshalling OptimizationsMinimize DOM Interaction

DOM

Marshalling OptimizationsMinimize DOM Interaction

function CalculateSum(){

// Retrieve Valuesvar lSide = document.body.all.lSide.value;

var rSide = document.body.all.rSide.value;

// Generate Resultdocument.body.all.result.value = lSide + rSide;

}

document.body.alldocument.body.all

document.body.all 9 DOM Lookups

Optimizing Symbol ResolutionMinimize DOM Interaction

function CalculateSum2(){

// Cache Element Collectionvar elms = document.body.all;

// Retrieve Valuesvar lSide = elms.lSide.value;var rSide = elms.rSide.value;

// Generate Resultelms.result.value = lSide + rSide;

}

var elms = document.body.all;

elmselms

elms

3 DOM Lookups

64

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

DOM Optimizations Built In Methods Always More Efficient

function LoopChildren(elm) {

var nodes = elm.childNodes;var length = nodes.length;


var node = nodes[i];…

} }

nodes[i];

JavaScript Coding Inefficiencies Built In Methods Always More Efficient

function LoopChildren2(elm) {

var node = elm.firstChild;

while(node != null){

…node = node.nextSibling;

}}

node.nextSibling;

JavaScript Coding InefficienciesUse Selector API for Efficent Access of Collections

function doValidation2(){

// Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll(".required"); // Set the flag to false by default var missingRequiredField = false;

// Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) {

if (reqs[i].value == "")missingRequiredField = true;

} }

document.querySelectorAll

68

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

Formatting OptimizationsOnly Send Required Styles

/* These styles are for the home page. */.Homepage{

color: red; background: white;

} …

/* These styles are for the content page. */.Contentpage{

color: red; background: white;

}

/* These styles are for the home page. */

/* These styles are for the content page. */

CSS PerformanceSimplify selectors

• Complex element selectors are slow• When possible• Use class – or ID-based selectors• Make element selectors as simple as possible• Use child instead of descendent selectors

CSS PerformanceSimplify Selector Patterns: Avoid Descendent Selectors

table tr td ul li {color: green;}

li#myID {color: green;}

ul li {color: purple;}

ul > li {color: purple;}

Use Class or ID Selectors

Use Child Selectors

72

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Browser Subsystems

Layout OptimizationsBatch Visual Changes

function BuildUI(){

var elm = document.getElementById('ui');

// Clear existing contentselm.innerHTML = '';

// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();

}

+=+=+=

=7

innerHTMLReferences

3 Visual Changes

Layout Optimizations Batch Visual Changes

function BuildUI2(){

var elm = document.getElementById('ui');

// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();

// Replace existing contents with UIelm.innerHTML = contents;

}=

1 innerHTMLReference

1 VisualUpdate

75

20 Best Practices to Improve Performance

1) Compress File Downloads2) User Conditional Requests3) Provide Cacheable Content4) Minify Your JavaScript5) Don’t Scale Images6) Use Image Sprites7) Link JavaScript at Bottom8) Add defer tag to JavaScript9) Link Stylesheets at Top10)Avoid Using @import

11)Minimize Walking Lookup Chain

12)Cache Function Pointers13)Use Native JSON Object14)Remove Duplicate Script15)Minimize DOM Interactions16)Use Efficient DOM Methods17)Use querySelectorAll for

Groups18)Only Send Required Styles19)Simplify Selectors20)Minimize Page Layouts

76

Internet Explorer 8 Subsystem Distribution

News Site #1

News Site #2

News Site #3

News Site #4

News Site #5

0

500,000

1,000,000

1,500,000

2,000,000

2,500,000

3,000,000

3,500,000

4,000,000

HTML parsing CSS parser Collections JavaScript Marshalling Native OMFormatting BlockBuild Layout Rendering

Mill

isec

onds

Section #2: Preview of Internet Explorer 9 Performance

78

Net

wor

kin

g

HTM

L

CSS

Colle

ctio

ns

Java

Scri

pt

Mar

shal

ling DO

M

Form

atti

ng

Bloc

k Bu

ildin

g

Layo

ut

Rend

erin

g

Hardware Accelerated HTML5

Compiled JavaScript

GPU PoweredHTML5 Graphics

Demo Flying Logos

GPU Powered HTML5

81

The Gamers GPU

82

Everyone Has a GPU

83

Windows Experience Index Results - GPU

1 2 3 4 5 6 7 8Windows Experience Index

Graphics Scores of Vista and Win7 Users

4% 15% 32% 27% 12% 10%

84

GPU Processing Performance

Multi-Core CPU GPU

Compiled JavaScript

Interpreters, Compilers, Intermediary Languages, Machine Code, Stack Alignment, JIT, Type System, Registers, Memory Management, Assembly, Bytecode, Tracing, Syntax Trees, Dynamic Languages, Flow Analysis, Static Languages, Regular Expressions, Inlining, oh my…

87

Foreground

New JavaScript Engine Interpreter(Chakra)

Source Code Parser AST InterpreterByteCode

88

Multi-Core Processing

Multi-Core CPU

89

Internet Explorer 8 Processor Distribution

Foreground

Background

90

Windows Experience Index Results

Month CPU Count2/1/2010 2.3Windows Experience Index

Number of CPU Cores for Vista and Win7 Users

91

Foreground

New JavaScript Engine Background Compiler(Chakra)

Source Code Parser AST InterpreterByteCode

Background Native Code

Background Compiler

92

Internet Explorer 9 Background Compilation

Foreground

Background

93

Putting It All Together• GPU Powered Graphics• Compiled JavaScript Applications

94

Flying Images – One Animation

IE8

IE9

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Documents

High-Performance Best Practices for Web Sites