Question

So I’m looking for the absolute, fastest way to perform the following:

1. Load jQuery
2. Load my-library.js
3. Execute some DOM manipulation

I’m finding lots of conflicting and out-dated information but so far I think I should be doing the following:

Prevent render blocking by doing some fancy script load deferring in the head (see Google Analytic’s latest method).

Load jQuery from the Google CDN for increased chance of a cache hit.

Minimize and gzip my-library.js.

Use $(document).ready() to trigger the DOM manipulation.

Ok, go…

Answer 1

I think you have 2 options:
You’ll need and inline loader script.

Then you’ll need to decide whether you want to
1) Combine all your javascript for each page into one file dynamically. The loader script then calls the relevent javascript file for the page being served. The file itself will be built dynamically using something like modconcat or local combo handler

2) Or take a parallel loading option managing dependencies with something like labjs.

Google analytics code and similar can be loaded after the page is loaded. All of this should be just inside the closing body tag, rather than the head as you mentioned.

For the best chance of loading Jquery quickly using a parallel approach, make sure to use a CDN, like the Google CDN for JQuery.