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
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.