50 performance tricks to make your HTML5 apps and sites faster

Play 50 performance tricks to make your HTML5 apps and sites faster

The Discussion

  • User profile image

    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.

  • User profile image

    Really nice presentation!

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

  • User profile image

    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?

  • User profile image

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

  • User profile image

    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


  • User profile image

    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.

  • User profile image

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

    just sayin'

  • User profile image

    @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

  • User profile image

    Nice Presentation and Very good guide line.



  • User profile image
    Jose 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!

  • User profile image

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

  • User profile image

    Excellent presentation and very detailed guidelines.

  • User profile image

    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


  • User profile image

    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?

  • User profile image

    Bhai Jatinder Mann,

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

  • User profile image

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

  • User profile image
    Sandhu Kal

    Well presented - Great

  • User profile image

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

  • User profile image

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

Add Your 2 Cents