A Guide to Fast Page Loads
There's a lot of good advice here, but also some misinformation.<p>First of all, a script tag will block DOM construction, but in any sane modern browser will not block loading of subresources like stylesheets, because browsers speculatively parse the HTML and kick off those loads even while they're waiting for the script.  So the advice to put CSS before JS is not necessarily good advice.  In fact, if your script is not async it's actively _bad_ advice because while the CSS load will start even before the JS has loaded, the JS will NOT run until the CSS has loaded.  So if you put your CSS link before your JS link and the JS is not async, the running of the JS will be blocked on the load of the CSS.  If you revers the order, then the JS will run as soon as it's loaded, and the CSS will be loading in parallel with all of that anyway.<p>Second, making your script async will help with some things (like DOMContentLoaded firing earlier and perhaps getting something up in front of the user), but can hurt with other things (time to load event firing and getting the things the user will actually see up), because it can cause the browser to lay out the page once, and then lay it out _again_ when the script runs and messes with the DOM.  So whether it makes sense to make a script async really depends on what the script does.  If it's just loading a bunch of not-really-used library code, that's one thing, but if it modifies the page content that's a very different situation.<p>Third, the last bullet point about using DomContentLoaded instead of $(document).ready() makes no sense, at least for jQuery.  jQuery fires $(document).ready() stuff off the DomContentLoaded event.<p>The key thing for making pages faster from my point of view is somewhat hidden in the article, but it's this:<p>> This isn't even that much JavaScript in web terms - 37kb gzipped.<p>Just send less script.  A lot less.  The less script you're sending, the less likely it is that your script is doing something dumb to make things slow.<p>[Disclaimer: I'm a browser engine developer, not a frontend or full-stack web developer.]