JavaScript Inline or Cached Page Speed Question

page speed, javascript, inline, cached

[webstuck]

I ran one of my pages through Google's Page Speed service and it recommended that I inline a couple of JavaScript scripts that I use on every page. I have always thought it was best to load them as an external file so that they could be cached and not need to be reloaded for every subsequent page visit. Should I leave them as cached or should I inline them within my web page?

Thanks!
Ben

[DrDoc]

That's an excellent question!

Here are the factors to consider:

Script function

File size

Frequency of use

Number of unique visitors

Visitor pattern (length of stay, page views, future return visits)

You must consider all those factors when making a decision like this.

Script Function
Is this a script that does something immediately, as soon as the visitor loads the page? Or is it a utility script with functions that are called later?

File Size
Is the combined file size only a few bytes, or is it several kilobytes? Due to the way network packet sizes work, the browser may act as if loading a file several times larger than the actual file size.

Frequency of Use
On how many pages is the script used? All? Most? Some?

Number of Unique Visitors
Do you have a lot of first-time visitors? Again, this comes back to the file size. Would they be better served with a fast-loading inline script than waiting for a second HTTP request to fetch the script file?

Visitor Pattern
These last two are really two main factors. In order to benefit from caching, they must visit enough pages to take advantage of the cached script. See the note above regarding file size ... If the effort of downloading an external script is not less than the effort required by the browser to load a few extra bytes embedded within each page, then you have not gained anything by employing caching.

[Fotiman]

One more thing to consider is Maintainability. I find it's much easier to maintain if the JavaScript is not mixed with the content/markup. Unobtrusive JavaScript.

[DrDoc]

Yes, thank you for bringing that up. Inline JS in static pages is a nightmare. Inline JS in a template is different.