Including jQuery

No ramblings today, just a quick snippet on the (subjective) best way to include jQuery on your page. So what is it? Well, you should serve your jQuery:

  • Minified
  • At the end of your page (but of course before your other scripts that depend on it)
  • From Google's CDN (offload some work and take advantage of the fact that many browsers should have it cached)
  • With a fallback to your local jQuery copy
  • Using the latest version of jQuery (1.7.2 at the time of this writing)

If you've ever used HTML5 Boilerplate before, this is pretty much exactly how they do it, and it's great. Here's the code:

<!DOCTYPE html>
<html>
<head></head>
<body>
	<!-- Your web page -->

	<!-- Grab jQuery from Google's CDN.. -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

	<!-- ..or from your filesystem if that failed. -->
	<script>window.jQuery || document.write('<script src="PATH_TO_YOUR_MINIFIED_JQUERY"><\/script>')</script>

	<!-- Your other scripts that need jQuery -->
</body>
</html>

That's it! Anyway, HTML5 Boilerplate does a few other neat things, so I recommend reading through the code and the sources they reference and incorporating the tidbits you like into your own practice.