Developers can keep their well structured, commented and easy to read files aside and give compressed files to be served to the end users which are optimized for a speedy download. And even more, they will be able to send a single, combined JavaScript/CSS file to render the page instead of sending a number of separate files. Developers will be able to reduce the page download time and save their valuable bandwidth. This will benefit users with faster page loads and webmasters with reduced bandwidth usage.

Kavith Thiranga Lokuewage – Personal Story

I am from Sri Lanka, a small and beautiful country in the Indian Ocean. My home town is Horana (+5:30 UMT), a bit rural town and a two hour drive from the capital, Colombo. See Horana in Google maps - http://g.co/maps/ug6hr.

I am a student of APIIT Sri Lanka affiliated with StaffordShire UK. I am doing my studies under BSc (Hons) Computing Specialized in Software Engineering program offered in my institute and I am currently in the first semester of level 2.

Actually I had a big enthusiasm over web developing since I was having my secondary education. That influenced me with developing some small websites for a few non-profit organizations I am working with. That’s the start of my web developing career. At first, it was only about some static stuff like about us, contact us and some picture galleries, etc. Getting to know with PHP, I found that web is a thing which has a lot more than some static html pages. I managed to add a lot of powerful dynamic stuff to my web pages with the power of PHP.

About four years before, I read a blog post with the topic “Joomla - Web Content Management System”. I was amazed when I read it. For an example, I knew the difficulty of implementing a User management system for a web site, on my own. Well, that‘s only about the users. What about the article management, banner management? And Oh my god look at the extension directory. Is this really possible? Those are the questions which came in to my mind when I read the post. I didn’t have a good programming skill with PHP, so this was like a galaxy for me.

I started learning about Joomla. I found the book, Joomla for Dummies, which made a huge impact in my knowledge about Joomla. Since then, I started using Joomla for my web sites and of course, it made my life in web developing easy and fantastic. I updated most of my previous sites with Joomla and I would love to say about the feedback I got for my sites based on Joomla. So, I always had the motivation to learn more and more.

A few months before, I faced a situation where I needed to develop a custom extension, a small one, for the web site I developed for the students of my institute using Joomla. That’s my start of extension development. The book, “Mastering Joomla Framework and Extension Development”, helped me in doing it. And thanks to GSOC, now I have the book “Joomla Programming” by Mark and Louis. I am extending my knowledge about Joomla with the help of Joomla Community.

Today, many of web applications have a large amount of JavaScript and CSS files. For the reason of increased number of web applications and their rich content interactions, developers expect their applications to increasingly make use of CSS and JavaScript. Because these files determine how the page will be displayed on client browser, rendering the page in the browser is delayed until the CSS and JavaScript files are completely downloaded. So it will take more time to render a web page, as the number of JavaScript and CSS files increases.

Why does it take that much time?

Server generates a page in milliseconds. So that shouldn’t be the problem. Problem seems to be a combination of two things. Firstly, the JavaScript and CSS files with lots of comment blocks, unnecessary spaces, new lines and longer variable names, which are meant for the developers but not for the end users, will increase the file size and hence the download time will be increased. Secondly, the large number of separate JavaScript/CSS files for a page, which cause one extra round trip per file to the server and back, will increase the number of server requests. So as the number of server requests increases, the page’s load time will be increased. To develop web applications which are nice and snappy to use, developers need to optimize the size and the amount of JavaScript/CSS files and make sure end users are having the optimum experience.

The goal of this project is to come up with a library for Joomla Platform which will facilitate compressing and combining of JavaScript and CSS files before they are sent to the client browsers. So developers can keep their well structured, commented and easy to read files aside and give compressed files to be served to the end users which are optimized for a speedy download. And even more they will be able to send a single combined JavaScript/CSS file to render the page instead of sending a number of separate files. So developers will be able to reduce the page download time as well as to save their valuable bandwidth. This will benefit users with faster page loads and webmasters with reduced bandwidth usage.

The scope of the project is to implement a library for Joomla platform with following functionality. It will contain classes to compress JavaScript/CSS files using an algorithm, which will compress the contents of files with securing the output of the code and also classes which will do combining several JavaScript/ CSS files to a single compressed file thus reducing the bandwidth usage of web application. Each class will provide several functions to achieve above mentioned goals.

Compressing JavaScript files

As a summary, we can compress a JavaScript by removing all comments, unnecessary white-space and shortening all local variable names to a single character. We can achieve this using several steps.

1. Backup Strings – Remove all strings from the JavaScript and store to reinsert later.
2. Remove Comments – Remove all comment blocks from the script.
3. Rename local variables – Replace all local variable names with a single character.
4. Preserve Keywords – Before removing whitespaces, backup Keywords in script that requires whitespaces and replace them with identifiers. (Eg: var, return, function… need to be followed by a space)
5. Remove unnecessary white space – Remove unnecessary spaces including tabs and new lines.
6. Restore keywords – Replace which were backed up in 4th step, with identifiers.
7. Restore Strings – Restore all strings which were backed up in 1st step.

Compressing CSS files

Compressing a CSS file can be done in several steps.

1. Remove Comments.
2. Remove unnecessary new lines and semi colons.
3. Remove 1st digit of floats which are <1 (Eg: 0.56 -> .56)
4. Remove units of measure from zero values. (Eg: margin:0px -> margin:0)
5. Replace "none" with 0. (Eg: border:none -> border:0)
6. Remove unnecessary white space – Including tabs and spaces surrounding {}:; characters.
7. Compress HTML color codes if possible (Eg: #FF0088 -> #F08).

Combining Files

Combining files will facilitate reducing bandwidth usage by transferring a minimum number of files by combining several javascript/css files in to a single .js or .css file. JavaScript/CSS files can be compressed before combining in to a single file. So files will be very much optimized for a speedy download.