Current time: 12-17-2017, 12:47 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
2012 best practice for inlining JS in Head?
09-29-2012, 10:23 PM (This post was last modified: 09-29-2012 10:26 PM by jesper_mortensen.)
Post: #1
Question 2012 best practice for inlining JS in Head?
As so many others, we are using Modernizr.js on every page. Modernizr.js must run in the HTML Head (it's a JS library for browser feature detection & HTML5 polyfill & async JS loading).

Our build of this library is about 8 kb before HTTP compression, so the actual download time is negligible.

The classic performance advice from a few years back was to never in-line JS, especially not in the head, as it used to block browser downloads. So scripts which absolutely must execute before initial rendering should be loaded last in Head, and loaded via an external file:
Code:
<script src="modernizr.js"></script>

A quick look at Browserscope.org seems to indicate that most modern browsers don't have the blocking issue anymore, as the "|| CSS + Inline Script" case is green for IE9+. In-lining the JS would save an HTTP request, and for us the time saved by eliminating the first HTTP request for the JS file is greater than the additional download time by in-lining on every page load.

What is the feeling in this community, is it anno 2012 best to load small, fast Head javascripts as external files, or in-line with the HTML? Are there edge cases I didn't think of?
Find all posts by this user
Quote this message in a reply
09-30-2012, 01:34 AM
Post: #2
RE: 2012 best practice for inlining JS in Head?
Aaron Peters covered this in his talk at last years Velocity EU - http://www.slideshare.net/startrender/fa...javascript

Seems 2.5KB was the magic number for inlining back then, you might need to research whether it has changed much in the last year.

There are also some other solutions you could look at with inlining and local storage too

Andy

Using WebPageTest - http://usingwpt.com/
Visit this user's website Find all posts by this user
Quote this message in a reply
10-02-2012, 04:33 AM
Post: #3
RE: 2012 best practice for inlining JS in Head?
Good find, thank you! Smile
Find all posts by this user
Quote this message in a reply
11-21-2012, 06:00 PM
Post: #4
RE: 2012 best practice for inlining JS in Head?
I introduce JS in head and my website broken!I dont know why?
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)