How to Use Global Content Blocks for Javascript Embedding

Now that Google has modified the Page Rank Algorithm to include the speed at which a site loads, there is an *additional* financial incentive to optimize websites for speed. (Of course the original incentive to do this was to improve user experience, but Google has now given us a measurable metric for OCD web developers to obsess over.)

Many articles and techniques have been published about this, and I won’t try to re-invent the wheel here. This article concerns how to embed scripts in your HTML page using CMS Made Simple.

The conventional wisdom is that it is best to add javascript calls at the end of your HTML document in order to prevent javascript blocking from delaying the loading of CSS images and other external resources on your page.

The technique I am about to explain will reduce page load time regardless of whether you put your scripts in the HEAD or after the FOOTER. But it is especially useful for scripts that have to go in the HEAD and execute immediately such as modernizr.js, head.js, and web font loading scripts such as fonts.com or Typekit.

How to Embed Javascript with CMS Made Simple

My technique is to embed small essential scripts directly into your HTML code. The way that I accomplish this while keeping my page templates clean of large chunks of minified Javascript, is to create a Global Content Block for each script that I wish to include in the HEAD.

First be sure to un-check the “Use WYSIWYG” option on the Global Content Block. If you forget to do this the WYSIWYG will escape all of your code and it will be displayed on the page instead of executing.

Next, paste the minified or packed script in there (including the SCRIPT tags). Then wrap it in {literal} {/literal} tags to prevent SMARTY from interpreting your script and throwing errors.

Here is a very short example:

{literal}
<script type=”text/javascript”>
alert(‘hello world’);
</script>
{/literal}

Then in the HEAD block I simply call the global content block: {global_content name=’modernizr’}

In CMS Made Simple Global Content Blocks are cached, and they are all pulled up with one database query. So by storing scripts as Global Content Blocks you will not suffer a measurable performance hit in the CMS Made Simple page generation time.

You also will ensure that the script is run as the page loads, without creating a blocking delay.

Minification

If you install CGExtensions Module, it has a built-in Javascript minifier tag. This is very useful for scripts that might still be under development. In your global content block just add {jsmin} at the beginning before the {literal} tag and {/jsmin} at the end, after the {/literal} tag. This will minify the script for you on the fly, and conveniently, it is automatically cached, so it will not affect page generation time except the first time the page is generated.

Example:

{jsmin}
{literal}
<script type=”text/javascript”>
alert(‘hello world’);
</script>
{/literal}
{/jsmin}

Discussion

I find this technique useful for embedding scripts in the HEAD of my pages when I want to minimize page load time or prevent a glaring change in the page when a script runs after the page has already loaded. For example, it is helpful for minimizing FOUT for web fonts, or minimizing the amount of time the font-text is hidden if you are using a web font loader.

Loading Web Fonts

Both Typekit and Fonts.com offer a web font loader script to be placed in the HEAD, via an external SCRIPT link. As the page loads, first the browser must load this external script, then the script fires and loads an external CSS file, which loads the @font-face files. In the meantime the text styled with that web font is hidden by the loader script until the @font-face files have completely loaded.

This chain of three external resource requests can be diminished by one if you embed the actual loader script in the HEAD using my technique. It can be reduced by two if you embed the external @font-face stylesheet as well (which can be done using the same technique), but you will probably have to modify the loader script.

Semantics

I realize that for semantic purists, it is better to keep css, javascript and images as externally loaded resources. However, most of my clients are more interested in improving their search engine results than in semantic purity.

This technique is a reasonable compromise. It allows you to keep your javascript source code in separate templates, which works particularly well with Template Externalizer because you can keep them as separate source code files.

Theoretically you could use this technique for all of the included scripts on a page. With media files such as images, flash or video, large files will load faster if linked externally because web browsers can load 2-6 media files simultaneously.

Since 2010, modern browsers load scripts in parallel even though they run the scripts sequentially.

Several asynchronous script loading techniques have been developed to maximize page loading performance such as: Google Loader, head.js, as well as leaner and simpler techniques.

If you have scripts that are used on every page of your site you will get faster average load time if you load the script externally and configure your server so that browsers will cache the scripts. Embedding the scripts will give a faster load on the landing page, but it will increase the file size of every page on your site.

Scripts that wait for the load or document ready event before firing are probably best loaded asynchronously.

Therefore, I find this Javascript embedding technique is best used for small scripts that need to be loaded in the HEAD and execute immediately or for scripts that are only used on a single page of your site such as the slider on your home page.

Tags: , , , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Ken Griffith

Ken Griffith lives in Nairobi, Kenya and is a web developer for Cottage Networks. He uses CMS Made Simple as his preferred content management system for most web projects.

Leave a Reply

Your email address will not be published. Required fields are marked *


3 × 5 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>