Share via

BUILD 2012: 50 Performance Tricks to make your HTML5 Applications and Sites faster

  • Article

Creating high performance Web applications is crucial for every Web developer, be it a Web site that runs on a standards based Web browser or a Windows Store App. Microsoft recently hosted the BUILD 2012 conference at the Microsoft campus in Redmond, WA. At this conference, I had the opportunity to share the Internet Explorer team’s favorite 50 performance tips to make HTML5 apps and sites faster. If you weren’t able to attend the conference, I recommend you check out the video.

These performance tips and tricks apply equally to Web sites that run on standards based Web browsers, and Windows Store Apps, which are also just the Web. There are six principals detailed in the talk that will help you improve the performance of your apps and sites today:

  • Quickly respond to network requests
  • Minimize bytes downloaded
  • Efficiently structure markup
  • Optimize media usage
  • Write fast JavaScript
  • Know what your application is doing

I hope you enjoy the talk.

— Jatinder Mann, Internet Explorer, Program Manager

Comments

  • Anonymous
    November 20, 2012
    Wish they could figure out how to embed a video on their site. The right hand side of the video is covered by the sidebar. Including the button to go full screen.

  • Anonymous
    November 20, 2012
    @Joe Thanks for letting us know. This has been corrected.

  • Anonymous
    November 20, 2012
    @ieblog, lets try running this simple animation code in console of FF16 and then IE10: (function LayerMovement() {    var layer1 = document.createElement('div');    var startTime = new Date() ;    for( var i = 0; i <= 1000000; i++ ) { // one-million iterations        layer1.style.x = i + 'px';        layer1.style.y = i + 'px';    }    var endTime = new Date();    console.info((endTime - startTime) + " milli-seconds"); })(); Results (on same machine): Firefox: 496 milli-seconds IE10: 962 milli-seconds Can you make it faster than FF :-)

  • Anonymous
    November 20, 2012
    @Joe B., You win the award for the stupidest benchmark test since the advent of the web browser.  I hope Microsoft NEVER even considers optimizing their browser for that kind of completely irrelevant nonsense.  If you routinely move divs a million times offscreen, then by all means continue using Firefox, which you say can do it a half-second quicker. BTW, "millisecond" does not contain a hyphen.

  • Anonymous
    November 20, 2012
    Too bad Channel9 is still using Silverlight player as opposed to HTML5, which effects the performance as mentioned in the video. Thanks for these GREAT tips IE team.

  • Anonymous
    November 20, 2012
    Excellent set of performance tips well explained. Thanks for this Jatinder.

  • Anonymous
    November 20, 2012
    Go to their website and click the Format button.

  • Anonymous
    November 20, 2012
    Please add controls to the HTML5 video. (grumble ...silverlight... grumble)

  • Anonymous
    November 20, 2012
    The comment has been removed

  • Anonymous
    November 20, 2012
    How good is HTML5 WebGL performance on IE10?

  • Anonymous
    November 21, 2012
    gracias por ello.

  • Anonymous
    November 21, 2012
    ...... "Please add controls to the HTML5 video. (grumble ...silverlight... grumble) " They do it, when HTML5 can do real Fullscreen :)

  • Anonymous
    November 21, 2012
    Does someone has a resumé of all 50 tips? Don't have the time to watch an hour video.

  • Anonymous
    November 21, 2012
    WebGL is an independent standard which has NOTHING to do with HTML5.

  • Anonymous
    November 21, 2012
    Welcome to Channel9 by Microsoft. You can go to the video page (mentioned in the blog post just before the video): channel9.msdn.com/.../3-132 And click on "Slides" under the video, to download power-point presentation (or click View Online if you don't have PowerPoint installed).

  • Anonymous
    November 21, 2012
    Actually you can go full-screen using HTML5 video control. Open the video page channel9.msdn.com/.../3-132 Click Format and select HTML5. Play the video and click full screen icon.

  • Anonymous
    November 21, 2012
    The comment has been removed

  • Anonymous
    November 21, 2012
    I look forward to your implementation on Open Source

  • Anonymous
    November 21, 2012
    Can you give me one example where F12 Dev tool doesn't draw a correct DOM?

  • Anonymous
    November 21, 2012
    @Joe B. Interestingly, my results are completely different to yours (I have made a jsfiddle with your function and an additional corrected function that actually changes .top and .left as I assume you meant: http://jsfiddle.net/xUtcZ/1/). IE10: Test 1: 597ms Test 2: 2430ms FF17: Test 1: 1025ms Test 2: 4403ms

  • Anonymous
    November 22, 2012
    The comment has been removed

  • Anonymous
    November 22, 2012
    In an ideal world: "MSDN blog, is not the place to submit the issues you are facing with F12 developer tools. Please submit feedback on connect using submit feedback button, so we can follow your request there." You got me all wrong, I am not a FanTroll. I personally feel like IE team doesn't have any permanent member because its a free product & they treat it like one; don't wana spend their "resources" on a free product. So when they are required to release a newer version of IE, real engineers from other teams (Visual Studio, Windows, SQL Server, SharePoint) group together, do the standards updates, fix some regression issues, play little with UI elements, handover the customer care to a cheap call-center in india (where they got wobbling heads, farting spices, copy pasting text from a word file and closing bug repos regardless to its severity) and finally they get back to their original teams. I am well-aware of the situation on Connect. Out of 100 submitted bug reports or suggestions, hardly two will get real attention. But these are the odds everyone is playing with over there. People like us care more about ecosystem than Microsoft and its cheap strategies.

  • John

  • Anonymous
    November 23, 2012
    The comment has been removed

  • Anonymous
    November 23, 2012
    IE10 preview recommends some websites that I never use when typing in an internet adress (url). How to get rid of that?

  • Anonymous
    November 23, 2012
    @Steve, @John.. "Sad but true." its very true. I reported similar shortcomings to Microsoft Connect last year connect.microsoft.com/.../extensibility-in-f12-developer-tools. On 23rd March, 2011 IE team replied that they will take it into consideration in their on going efforts and closed it By Design. But in terms of adaptability, its hard to use F12 developer tools compared to Firebug. I believe its a matter of 20 days (~2 sprints) to implement the easy-to-update DOM and CSS for a software developer employed at Microsoft to refine F12 tools. IE10 was a good opportunity when Microsoft's CEO himself inviting developers world-wide to join the ecosystem, but they didn't care (perhaps some marketing guy at Microsoft thinks its not worth it). F12 dev tools have some outstanding features which I do admire. Like change-user agent string, clear cache for the current domain, layout view, built-in color-picker, ruler etc. But for developers and designers, enhanced fast manipulation of live DOM and CSS, enhanced Console and enhanced Network monitor are the most wanted features. But F12 tools' console lacks auto-suggestions unlike firebug (perhaps a baby-instance of visual studio's intellisense would have done the trick) and now that firebug provides preview of HTML in Network, F12's Network is just fine (one step behind). I appeal to the F12 dev tools team at Microsoft to open the channel on uservoice.com and implement features as per our feedback just for few months, there is no reason that F12 wouldn't be the best tool out there (which will make Internet Explorer as a "complete solution" for client side web development). If you are reading it please feel our pain !!

  • Anonymous
    November 23, 2012
    >easy-to-update DOM and CSS >reverse the sort order in css side panel These are the things that makes F12 dev tools worse than Firebug. Because of these, I still have to use firefox :/

  • Anonymous
    November 23, 2012
    @Riasat, Try checking out the "Trace Styles" in F12 dev tools, which filters the actual styles applied on current element for you.

  • Anonymous
    November 23, 2012
    I'm so glad someone finally released the anger over the IE dev tools.  I've hated them since day 1 but didn't have the time/passion to rant about them to Microsoft vs developers I interact with. Kudos for getting this out in the open.  Hopefully Microsoft is listening and going to tell us that they are actually going to fix these tools to be usable!

  • Anonymous
    November 24, 2012
    Looking at the two pictures you've published, I notice that Firebug obviously does not show the entire stuff. EPIC FAIL!

  • Anonymous
    November 24, 2012
    Too bad your beloved Firebug can't inspect SVG doc elements & yes F12 can. EPIC FAIL!

  • Anonymous
    November 24, 2012
    Oh great the MS trolls are back this time trying to defend the craptactular IE dev tools. Text - Empty Text Node The #1 technology of the web is HTML and IE plainly fails to even render it correctly in their DOM tools. IE is the Epic Fail!... Not the other browsers/dev tools that handle it correctly... And always have. Text - Empty Text Node I think the best way to resolve this and get IE's tools fixed is to sign off every post with the empty string as our signature... Or randomly though our comments. Text - Empty Text Node Darryl Text - Empty Text Node

  • Anonymous
    November 24, 2012
    @Mitchel I know but it doesn't really help when you are designing cascading styles. Disable the applied style shown in trace style and some other style will be applied on the element. How do you find the new one? Have to scroll thru the long list.

  • Anonymous
    November 25, 2012
    The comment has been removed

  • Anonymous
    November 26, 2012
    From now on, please release an operating system and a browser in a cycle of five years. After it is serious from the next to the next!

  • Anonymous
    November 27, 2012
    So... When will the final version of IE10 be released?

  • Anonymous
    November 27, 2012
    If it is going to display or it does not carry out specific operation at some sites, a browser will not react. There is also an OK site in Chrome or Firefox. I want you to correct, talking with the administrator of each site even for the formal version.

  • Anonymous
    January 09, 2013
    Hello, If this is a post about html5 sites and apps, why are you using a silverlight player? Have you heard about html5 player? Thanks!