I think we’re all comfortable with the standard technique of loading script tags inside the page’s head tag. It works and it’s easy to do, but is it the best way to load scripts?

Lately, I’ve been reading up on script performance and the new recommendation for loading scripts is much different. There are 3 basic recommendations (with a bonus one if you’re feeling really eager):

  • Do not place script tags in head, place them immediately before the closing body tag.
  • Minify your scripts. There are utilities that do this: stripping out whitespace, shortening variable names and basically shrinking the file as much as possible.
  • Concatenate your scripts. [Note: Concatenate is just a fancy word for joining two things together]. If you are loading more than 1 script on a page, you can get significant performance benefits by concatenating multiple script files into one larger file.
  • BONUS: If you have external script files (off server, like a CDN), or you have polyfills (scripts that only target certain browsers), use a conditional asynchronous script loader like yepnope.js

 

I think most developers could implement the first recommendation with absolutely no added effort. The second and third recommendations aren’t that hard, but it does require running your code through a tool before uploading (there are ways of automating this if you like). The “bonus” recommendation probably only applies if you’re doing some advanced Javascript work, or you have high traffic volumes, but I think it’s worth mentioning for completeness.

Page performance is important not only for search engine ranking, but also for usability, especially with the high rise of mobile browsing. I welcome any feedback on this and I’d love to hear if you plan on implementing this in your work or if you have additional recommendations to share.