1 / 95

High-Performance Best Practices for Web Sites

High-Performance Best Practices for Web Sites. Jason Weber, Internet Explorer Team, Microsoft. Session Objectives Best Practices to Improve Performance Inside look at browser performance Specific things that you can do today Principles behind the optimizations

marietta
Download Presentation

High-Performance Best Practices for Web Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft

  2. Session Objectives • Best Practices to Improve Performance • Inside look at browser performance • Specific things that you can do today • Principles behind the optimizations • Preview Internet Explorer 9 Performance • Hardware Accelerated HTML5 • GPU Powered Graphics • Compiled JavaScript

  3. I have a lot of content…

  4. Section #1: Best Practices for Improving Performance

  5. Example Scenario – Wall Street Journal Starting with Bing

  6. Example Scenario – Wall Street Journal Blank Background

  7. Example Scenario – Wall Street Journal Initial HTML

  8. Example Scenario – Wall Street Journal Heading Appears

  9. Example Scenario – Wall Street Journal Initial Content

  10. Example Scenario – Wall Street Journal Right Column Lays Out

  11. Example Scenario – Wall Street Journal Media Appears

  12. Example Scenario – Wall Street Journal Customized Content

  13. Example Scenario – Wall Street Journal Advertisements

  14. Example Scenario – Wall Street Journal Interacting with Website

  15. Picking Five Popular News Sites Wall Street Journal Chicago Tribune USA Today New York Times Washington Post CNN News Seattle Times MSN News Financial Times Boston Globe News Site #1 • News Site #2 • News Site #3 • News Site #4 • News Site #5

  16. Five Popular News Sites JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  17. Five Popular News SitesVariation in Total Size JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  18. Five Popular News SitesNumber Elements to Number of CSS Rules JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  19. Five Popular News SitesNumber of Images JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  20. Five Popular News SitesAmount of JavaScript JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  21. Five Popular News SitesAmount of JavaScript JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  22. Which sites loads the fastest? JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  23. Which sites loads the slowest? JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  24. Internet Explorer 8 Subsystem Distribution

  25. Average Distribution Across 5 News Sites

  26. Average Distribution Across Top AJAX Sites

  27. Browser Subsystems • Networking • HTML • CSS • Collections • JavaScript • Marshalling • DOM • Formatting • Block Building • Layout • Rendering

  28. Browser Subsystems • Networking • HTML • CSS • Collections • JavaScript • Marshalling • DOM • Formatting • Block Building • Layout • Rendering

  29. Networking OptimizationsCompress Network Traffic Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible…) Host: www.live.com Response Response • HTTP/1.1 200 OK • Content-Length: 3479 • Expires: -1 • Date: Sun, 14 Mar 2010 21:30:46 GMT • Content-Type: text/html; charset=utf-8 • Pragma: no-cache • Content-Encoding: gzip • Accept-Encoding: gzip, deflate Content-Encoding: gzip

  30. Networking Optimizations Provide Cacheable Content First Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com First Response • HTTP/1.1 200 OK • Content-Type: image/jpeg • Expires: Fri, 19 Mar 2010 00:00:00 GMT Expires: Fri, 19 Mar 2010 00:00:00 GMT Second Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com No Response Required

  31. Networking Optimizations Conditional Requests Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT Response Response • HTTP/1.1 304 Not Modified • Content-Type: image/jpeg • Last-Modified: • Sun, 14 Mar 2010 21:30:46 GMT If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT

  32. Networking Optimizations Minify Your JavaScript Minified JavaScript Original JavaScript function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; vari = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { varimg = 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}')

  33. Networking Optimizations Don’t Scale Images <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <imgsrc=“logo.gif" width="50" height="40" /> … </body> </html> 500 x 400 width="50" height="40"

  34. Networking Optimizations Don’t Scale Images <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 50 x 40 --> <imgsrc=“logo.gif" width="50" height="40" /> … </body> </html> 50 x 40 width="50" height="40"

  35. Networking Optimizations Use Image Sprites <html> <head> <title>Test</title> </head> <body> … <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6 … </body> </html> <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6

  36. Networking Optimizations Use Image Sprites

  37. Networking Optimizations Use Image Sprites <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> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } <div class="a"></div> <div class="b"></div>

  38. Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance

  39. Browser Subsystems • Networking • HTML • CSS • Collections • JavaScript • Marshalling • DOM • Formatting • Block Building • Layout • Rendering

  40. HTML OptimizationsAvoid Inline JavaScript <html> <head> <title>Test</title> <script type="text/javascript">  <!--    function helloWorld() {      alert('Hello World!') ;    }  // --> </script> </head> <body> … </body> </html> <script type="text/javascript">  <!--    function helloWorld() {      alert('Hello World!') ;    }  // --> </script>

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

  42. HTML Parsing OptimizationsLink JavaScript at End of File <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <script src=“myscript.js” … ></script>

  43. 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. Browser Subsystems • Networking • HTML • CSS • Collections • JavaScript • Marshalling • DOM • Formatting • Block Building • Layout • Rendering

  45. CSS Parsing Optimizations Avoid Embedded Styles <html> <head> <title>Test</title> </head> <body> <style> <!-- .green { color:#009900;} .red { color:#660000;} --> </style> … … … </body> </html> • <style> • <!-- • .green { color:#009900;} • .red { color:#660000;} • --> • </style>

  46. CSS Parsing Optimizations Avoid Linking Stylesheets at Bottom of Page <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <link rel="stylesheet" type="text/css" href=“mystyles.css" />

  47. 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" />

  48. CSS Parsing Optimizations Avoid Using @Import for Hierarchical Styles @import url(/stylesheets/one.css); @import url(/stylesheets/two.css); @import url(/stylesheets/one.css); @import url(/stylesheets/two.css); .MyHeading { color: red; font-family: 'New Century Schoolbook', serif; background: white; }

  49. 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. Browser Subsystems • Networking • HTML • CSS • Collections • JavaScript • Marshalling • DOM • Formatting • Block Building • Layout • Rendering

More Related