(Read more interesting articles on Joomla! 1.5 here.)
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.
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.)
Open your template’s index.php template, located in your template’s subdirectory within your Joomla! installation’s templates directory.
<!-- 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.
<script type="text/javascript"
src="<?php echo $this->baseurl ?>/templates/rhuk_
milkyway/js/javascript-file.js">
</script>
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.
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!
// Requires jQuery to run
$(document).ready(function() {
$('#slideshow-wrapper').cycle({
fx: 'fade',
speed: 'normal',
timeout: 0,
next: '#next',
prev: '#prev'
});
$('#slidie').cycle({
fx: 'fade'
});
});
$(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.
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.
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.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…