2. Giorgio Sardo Technical Evangelist, Microsoft Corp blogs.msdn.com/Giorgio Session Code: WIA 403

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

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

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

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

9. Optimize CSS

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

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

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

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

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

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

16. Trident (MSHTML) JScript Engine DOMDOM

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

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

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

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

21. 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 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 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 Accept-Encoding: gzip, deflate Content-Encoding: gzip

22. Gzip Compression

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

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

25. Test …

26. Test …

27. Test … Item 1 Item 2 …

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

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

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

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

32. Test … Better in IE8

33. Test …

34. Doloto

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

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

37. Poor user experience as content moves Browser performs unnecessary work

38. Minimize Page Re-layouts

39. Layout Performance Make it work on any browser

40. Expression Super Preview

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

43. www.microsoft.com/teched Sessions On-Demand & Community http://microsoft.com/technet Resources for IT Professionals http://microsoft.com/msdn Resources for Developers www.microsoft.com/learning Microsoft Certification & Training Resources Resources

44. http://blogs.msdn.com/Giorgio

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

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