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

Topics 1.CSS performance 2.Optimizing symbol resolution 3.Javascript coding inefficiencies 4.HTTP performance 5.Layout Performance

Topics 1.CSS performance 2.Optimizing symbol resolution 3.Javascript coding inefficiencies 4.HTTP performance 5.Layout Performance

Unused styles increase download size Browser must parse and match all selectors Failures are expensive!

Optimize CSS

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 Better in IE8

table tr td ul li {color: green;} li#pass {color: green;} ul li {color: purple;} ul > li {color: purple;}

Slow – evaluated frequently Not supported in IE8 standards mode! E.g. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Minimize included styles Use less-complicated selectors Don’t use expressions Simplify!

Topics 1.CSS Performance 2.Optimizing Symbol Resolution 3.JavaScript Coding Inefficiencies 4.HTTP Performance 5.Layout Performance

Scope var name Prototype obj.name GlobalGlobal LocalLocal Intermediate…Intermediate… DOMDOM InstanceInstance Prototype…Prototype… CostCost

Trident (MSHTML) JScript Engine DOMDOM

Scope var name Prototype obj.name GlobalGlobal LocalLocal Intermediate…Intermediate… DOMDOM InstanceInstance Prototype…Prototype… CostCost Better in IE8

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.CSS Performance 2.Optimizing Symbol Resolution 3.JavaScript Coding Inefficiencies 4.HTTP Performance 5.Layout Performance

Request from server/cache JavaScript CSS Images HTML In browser Layout Execute script Additional downloads

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: 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: Response HTTP/ OK Content-Length: 3479 Expires: -1 Date: Tue, 24 Apr :30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip HTTP/ OK Content-Length: 3479 Expires: -1 Date: Tue, 24 Apr :30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip Accept-Encoding: gzip, deflate Content-Encoding: gzip

Gzip Compression

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

Test … … width="50" height="40" 50 x 40

Test …

Test …

Test … Item 1 Item 2 …

Test.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: } … Item 1 Item 2 ….a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: }.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: }

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

Request HTTP/ Not Modified Content-Type: image/jpeg Last-Modified: Wed, 22 Feb :15:54 GMT HTTP/ Not Modified Content-Type: image/jpeg Last-Modified: Wed, 22 Feb :15:54 GMT GET /images/banner.jpg HTTP/1.1 Host: If-Modified-Since: Wed, 22 Feb :15:54 GMT GET /images/banner.jpg HTTP/1.1 Host: If-Modified-Since: Wed, 22 Feb :15:54 GMT Response

Request GET /images/banner.jpg HTTP/1.1 HTTP/ OK Content-Type: image/jpeg Expires: Fri, 12 Jun :50:50 GMT HTTP/ OK Content-Type: image/jpeg Expires: Fri, 12 Jun :50:50 GMT GET /images/banner.jpg HTTP/1.1 Host: GET /images/banner.jpg HTTP/1.1 Host: Response RequestResponse No response: Request serviced from cache No response: Request serviced from cache

Test … Better in IE8

Test …

Doloto

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.CSS Performance 2.Optimizing Symbol Resolution 3.JavaScript Coding Inefficiencies 4.HTTP Performance 5.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

Sessions On-Demand & Community Resources for IT Professionals Resources for Developers Microsoft Certification & Training Resources Resources

Complete an evaluation on CommNet and enter to win an Xbox 360 Elite! Required Slide

© 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.