When serving up dynamic information, you want your pages to load as fast as possible. In ExpressionEngine (EE), not only pages, but also code such as CSS and javascript can be served using templates. But when should you use an EE javascript template? How does the use of a JavaScript template affect page load speed?

The choice whether or not to use javascript templates in EE can potentially have a huge effect on page load time in certain situations.

Javascript in EE Templates

In ExpressionEngine, you have 6 types of templates you can choose from. If you’re using a template to include javascript code in your pages, you’ll want to choose either JavaScript or Static.

If your javascript file is compressed with the whitespace removed (such as the minimized version of jQuery), EE will not process it properly unless you use the Static template type. Otherwise, you can just use the regular JavaScript template type.

Javascript as a Regular JS File

ExpressionEngine also allows you to just upload an external javascript file to the server and link to it just as you would any other file in HTML, PHP or what have you.

The downside is that you have to go outside of EE’s control panel and use FTP to load the file and then use FTP to edit it if need be later on. You won’t be able to make changes from within EE as you would if you were using a template.

Javascript Templates vs Static Files

First off, why would you want to use templates to display javascript in EE?

When putting javascript in a JavaScript template, you can use EE tags to pull in information from elsewhere in EE. This can be pretty handy at times; saving you from retyping extra info, or when information needs to change based on the page the javascript is being loaded. For these situations, using templates are great.

The catch with javascript in templates is that the code isn’t being cached. Each time a new page loads, EE treats the javascript template as a dynamic file and downloads it again; looking for EE tags it needs to process. Your browser doesn’t cache the javascript.

When dealing with larger javascript files—especially javascript frameworks, this can significantly increase your page load times.

Just linking from a page template to a regular old javascript file, on the other hand, means your browser can cache the file and then when a visitor goes to another page, wham-o, it’s already cached.

Speed Impact

I don’t have any benchmark tests for this, but from my personal experience, using javascript templates for serving multiple javascripts and/or large chunks of javascript code in EE can noticeably slow the loading of pages when compared to just linking to regular .js files. If you combine this with the time it takes to process the PHP and EE tags and the other templates for pages and pull in weblogs, this all adds up.

Recap

Using javascript templates in EE makes sense when:

• You need/want to use variables in your javascript
• Dealing with smaller javascript files
• You want to manage/organize/edit your javascript files through EE’s control panel

Serving javascript files as just regular old .js files makes sense when:

• You don’t need EE to parse anything in your javascript code
• You’re using a javascript framework such as Prototype, jQuery or MooTools
• You’re using several small javascript files
• Your pages are loading slower than you’d like

Similar Posts:

• Built-in jQuery Support in ExpressionEngine 2.0
• Learn ExpressionEngine In 2 Days
• Quick and Dirty: Speeding Up Page Load Times
• Quick and Dirty: Optimizing PHP (For Fun and Profit)
• View Processed Javascript in Firefox and Chrome – No Plugins Required