Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

50 performance tricks to make your HTML5 apps and sites faster

Download

Right click “Save as…”

Slides (view online)
+ My Schedule- My Schedule

Creating high performance web apps is crucial for every web developer. Learn directly from the Internet Explorer Performance team about what actually drives performance across the web and how you can make your sites faster. This is the same team that brought you GPU accelerated graphics and compiled JavaScript, and they will share their favorite 50 best practices for web developers.

For more information, check out this course on Microsoft Virtual Academy:

Follow the Discussion

  • Great presentation, structured very well.  Even if you know %90 of the tips, it's that %10 that you've never considered that could make the biggest impact in your site performance.  Thanks Jatinder.

  • WdKWdK

    Really nice presentation!

    I didn't new all the tips and I'm definitely going to checkout the Website Performance Tool.

  • This is really grate presentation, but I have one question which i am really interested int and it relates to the placement of the script tah inside HTML document. according to this presentation, one should always put script tags at the end of the HTML document, but I can hardly find webpages which have this practice applied and I can not even imagine including JQuery at the bottom of the page. can anyone explain this in more details and if ti is ok to include JQuery at the bottom of the page?

  • ivnivn

    thnx, nice observation!
    Could anyone explain more precise, why inline styles have negative impact on perfomance? How I can measure it?

  • I found the tips very useful.

    I was however surprised to see the usage of the "all" non-standard property in a snippet (slide 183) in a presentation that teaches best practices -

    var leftSide = document.body.all.lSide.value;

    How does "Standardize file capitalization convention" help performance? Does a consistent file name help in the file getting cached?

    w.r.t "Asynchronously Download Script using the async attribute", is the async property for the script tag available in IE10? W3Schools says the async property is "supported in all major browsers, except Internet Explorer" while the MSDN HTML/XHTML Reference doesn't mention it.

    @ratige check these links on why it is good to place scripts at the bottom

     

  • This might have been my favorite session of the week, well done!

    Of particular strength was the well-researched look at performance, and how different websites "fail" in different ways.

  • njynjy

    @anilrk: read at http://w3fools.com/ .

    just sayin'

  • NickNick

    @ratige the reason you put JS at the bottom is because scripts are blocking i.e. all rendering will stop until your JS is downloaded, parsed and executed. Thus if put them in your <head> then you will have a white screen for longer than if they were at the bottom. Whilst the total time for the entire page to download and execute may not be affected by this change from top to bottom, time to render the will, it will be a lot quicker - which is a boon from a user's perspective as the page feels a lot snappier.

    An extreme case is where a server is hanging trying to serve a JS file. If it's in your head the entire page will be white, waiting on the file. If it's at the bottom, the page will have already rendered and so is unaffected by the server hanging (aside from any missing interactivity)

    @ivn for the same reason as above, style tags are blocking and cause rendering to freeze until CSS is downloaded, parsed and applied. Thus if you pepper your page with inline styles each of them will block rendering and cause the page to feel less snappy.

    It may also cause reflow of content - imagine an inline style near the bottom of the page, which affects something right at the top of the page. The browser would have to redraw the top of the page after this inline CSS is applied. Reflow is expensive and minimising it will boost browser performance.

    Steve Souder's book, "High Performance Web Sites", is an amazing book that goes into a lot of detail on all this stuff

  • Abhishek KumarAbhishekApp​Arch Abhishek Kumar

    Nice Presentation and Very good guide line.

    Thanks

     

  • Jose QuinonesJose Quinones

    Well done and insight about well-known and new perspectives, at least for me, on web performance. Better yet, the technical reasons why we would apply the various techniques in the real-world. Awesome!

  • JavaScript 60% Faster then C++. Impossible?? 

  • Excellent presentation and very detailed guidelines.

  • akademy1akademy1 Saving the world with JavaScript

    Nice talk, and lots of great information. We all appreciate it being cross browser information too!

    Now if we could just have a "quick lookup" too!  Wink

     

  • DanielDaniel

    One question: assume you've got a website written in ASP.NET with multiple pages. There is a master .css file which contains every css declaration common to most pages (perhaps these declarations are spread across more files, but are bundled together dynamically). Then, each page has (possibly) a specific .css file containing the css declarations which it uses but are not being used by other pages.

    Obviously, this architecture means we've got two HTTP requests to fetch the css instead on just one. Has anyone measured where the threshold is, i.e. at what point the size of the css files and the number of css declarations will outweight the cost of the extra request?

    Or am I maybe thinking this incorrectly? Should I maybe use two .css files: Common.css and Uncommon.css, where Common.css is always loaded, but Uncommon.css only when the page in question requires styles defined in it? Any recommendations?

  • RavindraRavindra

    Bhai Jatinder Mann,

    It's awesome presentation for you, Rock India ..!!
    Could u explain me more to tester related to now the points.

  • RavindraRavindra

    It's awesome presentation form you, Rock India ..!!
    Could u explain me more to tester related to now the points.

  • Sandhu KalSandhu Kal

    Well presented - Great

  • That's one of the most useful talks I've ever seen. Well done!

  • Red5Red5 Systems Manager Curmudgen

    5-Star presentation. Well done, and thank you!

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.