Giorgio Sardo Technical Evangelist, Microsoft Corp blogs.msdn.com/Giorgio Session Code: WIA 403 Objectives and Takeaways Session objective(s) How to make your site faster today Principles to remember.

Transcript Giorgio Sardo Technical Evangelist, Microsoft Corp blogs.msdn.com/Giorgio Session Code: WIA 403 Objectives and Takeaways Session objective(s) How to make your site faster today Principles to remember.

Giorgio Sardo
Technical Evangelist, Microsoft Corp
blogs.msdn.com/Giorgio
Session Code: WIA 403
Objectives and Takeaways
Session objective(s)
How to make your site faster today
Principles to remember when building sites
Key takeaways
Suggestions help in ALL browsers
No magic solutions
Consider maintainability
Webpage Performance
Jscript Other
CSS Formatting
DOM
Layout
Marshalling
HTML
Parsing
Rendering
Webpage Performance
Layout,
Rendering,
Formatting, …
33%
67%
JScript & DOM
Topics
1.
2.
3.
4.
5.
CSS performance
Optimizing symbol resolution
Javascript coding inefficiencies
HTTP performance
Layout Performance
Topics
1.
2.
3.
4.
5.
CSS performance
Optimizing symbol resolution
Javascript coding inefficiencies
HTTP performance
Layout Performance
CSS Performance
Unused styles increase download size
Browser must parse and match all selectors
Failures are expensive!
Optimize CSS
CSS Performance
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
Do not mix RTL and LTR styles
Minimizing included styles makes this easier
table tr td ul li {color: green;}
li#pass {color: green;}
ul li {color: purple;}
ul > li {color: purple;}
CSS Performance
Slow – evaluated frequently
Not supported in IE8 standards mode!
E.g.
background-color: expression( (new
Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
CSS Performance
Minimize included styles
Use less-complicated selectors
Don’t use expressions
Simplify!
Topics
1.
2.
3.
4.
5.
CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
Layout Performance
Optimizing Symbol Resolution
Scope
Prototype
var name
obj.name
Global
DOM
Intermediate
…
Prototype
…
Local
Cost
Instance
JavaScript Coding Inefficiencies
Trident (MSHTML)
DOM
JScript Engine
JavaScript Coding Inefficiencies
Scope
Prototype
var name
obj.name
Global
DOM
Intermediate
…
Prototype
…
Local
Cost
Instance
JavaScript Coding Inefficiencies
Use the native JSON object
Turn large switch statements into lookups
Avoid property access methods
Minimize DOM interaction
Use querySelectorAll for groups
Optimize only when needed
Consider maintainability
Topics
1.
2.
3.
4.
5.
CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
Layout Performance
HTTP Performance
Request from server/cache
JavaScript
CSS
Images
HTML
In browser
Layout
Execute script
Additional downloads
HTTP Performance
Request
GET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0)
Host: www.live.com
Response
HTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Tue, 24 Apr 2007 21:30:46 GMT
Content-Type: text/html; charset=utf-8
Pragma: no-cache
Content-Encoding: gzip
gzip
Gzip Compression
<html>
<head>
<title>Test</title>
</head>
<body>
…

<img src="icon.gif" width="50" height="40" />
…
</body>
</html>
<html>
<head>
<title>Test</title>
</head>
<body>
…

<img src="icon2.gif" width="50" height="40" />
…
</body>
</html>
<html>
<head>
<title>Test</title>
<script
… ></script>
<script src=“1.js”
src= type="text/javascript"></script>
<script src=“2.js” … ></script>
<link href=“1.css” … ></link>
<link href=“2.css” … ></link>
</head>
<body>
…
</body>
</html>
<html>
<head>
<title>Test</title>
<script
… ></script>
<script src=“1+2.js”
type="text/javascript"></script>
<link href=“1+2.css” … ></link>
</head>
<body>
…
</body>
</html>
<html>
<head>
<title>Test</title>
</head>
<body>
…
<img src="a.gif" />
<img src="b.gif" />
…
</body>
</html>
Item 1
Item 2
<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
.b {
{ background-position:
background-position: 0
0 -10
-10 }
}
</style>
</head>
<body>
…
<div
<div class="a"></div>
class="a"></div> Item 1
<div class="b"></div>
class="b"></div> Item 2
<div
…
</body>
HTTP Performance
Conditional HTTP requests
Plain HTTP request
Pragma: no-cache
Time conditional
If-modified-since: date,time
Provide cacheable content
Time conditional
Expires: date,time
Max-age: #seconds
HTTP Performance
Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Wed, 22 Feb 2006 04:15:54 GMT
Response
HTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Wed, 22 Feb 2006 04:15:54 GMT
HTTP Performance
Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
Request
Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 12 Jun 2009 02:50:50 GMT
Response
GET /images/banner.jpg HTTP/1.1
No response:
Request serviced from
cache
<html>
<head>
<title>Test</title>
<script
… ></script>
<script src=“1+2.js”
type="text/javascript"></script>
</head>
<body>
…
</body>
</html>
<html>
<head>
<title>Test</title>
</head>
<body>
…
<script src=“1+2.js” … ></script>
</body>
</html>
Doloto
HTTP Performance
Reduce the number of requests
Combine external scripts, styles, and images
Use caching
Reduce the size of requests
Use HTTP compression
Use conditional requests
Avoid blocking factors
Put script at end of HTML
Topics
1.
2.
3.
4.
5.
CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
Layout Performance
Layout Performance
Poor user experience as content moves
Browser performs unnecessary work
Minimize Page Re-layouts
Layout Performance
Make it work on any browser 
Expression Super Preview
Summary
Identify the performance bottleneck
Network  Fiddler
JavaScript  IE8 JS Profiler and Doloto
DOM  IE8 Dev Tools
CSS  CSS Crunch
Cache  IIS
Layout  Expression SuperPreview
Resources
www.microsoft.com/teched
www.microsoft.com/learning
Sessions On-Demand & Community
Microsoft Certification & Training Resources
http://microsoft.com/technet
http://microsoft.com/msdn
Resources for IT Professionals
Resources for Developers
Resources
http://blogs.msdn.com/Giorgio
Complete an evaluation
on CommNet and enter to
win an Xbox 360 Elite!
© 2009 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.

Giorgio Sardo Technical Evangelist, Microsoft Corp blogs.msdn.com/Giorgio Session Code: WIA 403 Objectives and Takeaways Session objective(s) How to make your site faster today Principles to remember.

Transcript Giorgio Sardo Technical Evangelist, Microsoft Corp blogs.msdn.com/Giorgio Session Code: WIA 403 Objectives and Takeaways Session objective(s) How to make your site faster today Principles to remember.

Directory