4 min read

(Read more interesting articles on Joomla! 1.5 here.)

Introduction

Joomla! is a feature-rich content management system, but there are some things it can’t do out of the box. This is where JavaScript can become useful in improving the experience of your website to its visitors.

Including a JavaScript file in your Joomla! template

One of the most basic aspects of using JavaScript with your Joomla! template is including it within the page. There are two ways to do this—within the <head> element of your template, or within the <body> element of your template (best placed just above the </body> element). We’ll make use of the method that uses the <head> template. (The reasons to do so are covered in another recipe of this article.)

Getting ready

Open your template’s index.php template, located in your template’s subdirectory within your Joomla! installation’s templates directory.

How to do it…

  1. Locate the <head> element of your Joomla! template in the index.php file and insert a <script> element that references the JavaScript file(s) that you wish to use:

    <!-- some HTML omitted for brevity -->

    <script
    type="text/javascript"
    src="<?php echo $this->baseurl ?>/templates/rhuk_
    milkyway/js/javascript-file.js"></script>
    </head>

    Note that the base directory of your Joomla! installation is inserted automatically to help prevent any problems with changing directory paths to the JavaScript file, should you change your website’s location.You will need to change the template’s path if you choose to rename your template.

  2. For valid XHTML, you need to specify the type attribute, as shown:

    <script type="text/javascript"
    src="<?php echo $this->baseurl ?>/templates/rhuk_
    milkyway/js/javascript-file.js">
    </script>

How it works…

When a browser encounters a <script> element in your page, it loads the required behavior included in the JavaScript file, assuming that your browser has it enabled.

See also

  • Including a JavaScript file in your Joomla! template
  • Maximizing backward compatibility with JavaScript
  • Installing Google Analytics
  • Integrating AddThis social bookmarking tool with your Joomla! template

Tips and tricks for minimizing page load time when using JavaScript

While JavaScript can be used to enhance your visitors’ experience of your Joomla! website, it can have a negative impact in terms of both real and envisaged loading times of pages.JavaScript slows down the loading of a page because it’s a single-threaded language. This means that nothing else can occur while JavaScript is being loaded or something in JavaScript is being evaluated. As such, a single, slow-loading JavaScript file can prevent a whole website from loading quickly!

How to do it…

  1. The most obvious thing that you can do to make your Joomla! template load more efficiently is to compress any JavaScript you do use. As such, there are a number of online compression tools that you can use, including the JavaScript Compressor (http://javascriptcompressor.com):

    Using Javascript Effects to enhance your Joomla! website for Visitors

  2. Once you’ve inserted your JavaScript into the Paste your code input area, click on Compress. In this example, we’ve used a function that creates a slideshow with the use of the jQuery library:

    // Requires jQuery to run

    $(document).ready(function() {
    $('#slideshow-wrapper').cycle({
    fx: 'fade',
    speed: 'normal',
    timeout: 0,
    next: '#next',
    prev: '#prev'
    });

    $('#slidie').cycle({
    fx: 'fade'
    });
    });

    Using Javascript Effects to enhance your Joomla! website for Visitors

  3. As you can see, quite a compression is noticeable even with a relatively compact piece of JavaScript, around half the size of the original in terms of memory required to store it (and thus, resources required to load it for a visitor visiting your website).

    $(document).ready(function()
    {$('#slideshow-wrapper').cycle({fx:'fade',speed:'normal',timeout
    :0,next:'#next',prev:'#prev'});$('#slidie').cycle({fx:'fade'})});

Many JavaScript libraries (such as jQuery and MooTools) and features are available in a compressed format already. There is also a Joomla! extension called JCH Optimize that you can use. You can download it from http://extensions.joomla.org/extensions/site-management/site-performance/12088.

How it works…

As you’ve seen, JavaScript is a single-threaded language, so one technique to minimize its impact on your Joomla! website’s loading times for visitors is to make the JavaScript the last possible item in the page to load. Additionally, compressing JavaScript can greatly reduce page-loading times with larger JavaScript files. It’s also worth keeping a backup of the uncompressed JavaScript file, as this makes it easier to change and recompress in the future.

There’s more…

Another way to minimize your Joomla! template’s page load time is to reference JavaScript and other template files from different hostnames. Browsers including Internet Explorer and Firefox have been known to limit the number of simultaneous connections to a hostname, slowing down the loading of the page.

Moving <script>tags to the bottom of the page

The other major factor that can slow down the page load times for visitors to your Joomla! website is the necessity for their browser to have to stop while it deals with any JavaScript included in your page. You can overcome this by reordering the HTML elements in your Joomla! template’s index.php file to move the <script> elements to the bottom of the page where they appear inline.

See also

  • Maximizing backward compatibility with JavaScript
  • Installing Google Analytics

LEAVE A REPLY

Please enter your comment!
Please enter your name here