How to Optimize and Speed Up Joomla 1.5

Saturday, 12 July 2008 03:47 Last Updated on Monday, 18 May 2009 23:01

It's not easy for someone with minimal web optimization experience to try to optimize and speed up Joomla! I learned a lot from Yahoo! Developer Network's YSlow for Firebug website. I want to thank to developers at Yahoo! Developer Network for creating such an easy to understand website optimization article called Best Practices for Speeding Up Your Web Site and for creating website optimization too called YSlow which I will recommend using later. Many things I'm recommending are based on what I learned from this article, only I've applied to them Joomla! so I can give back to Joomla! community for making something so great!

GoDaddy's shared hosting is slow. This is how I got into trying to speed up my Joomla! site. I am not unhappy with GoDaddy because shared hosting is slow everywhere. Anyways, if you're like me, and you're on a shared hosting environment, you have to make whatever web applications you plan to run on these servers lean and efficient. Unfortunately, Joomla! is neither lean nor efficient. That's because it wasn't designed for performance and efficiency, but rather ease of open source development, flexibility, and I think most importantly and the main reason I love Joomla!, modularity. That doesn't mean it can't become lean and efficient, it just means there's going to be some trade offs to these optimizations. Anyways, here is my attempt at creating a comprehensive how to article on optimizing Joomla! 1.5 with YooTheme templates or some other Javascript-heavy templates.

So, how are we going to optimize? One, we're going to decrease the initial loading time by decreasing the file size of all files that get transferred from your web server to your visitor's browser. Two, we're going to put in a Far Future Expires Headers so that when you visitor goes from one page to another, your website will load much faster because it will never download anything twice.

How we will optimize & speed up Joomla! 1.5

1. Optimizing Images

2. Compress/Minify Javscripts

3. Compress/Minify CSS Stylesheets

4. Gzip Javascripts and CSS Stylesheets

5. Removing ETags & Adding Far Future Expires Headers (Most important!)

6. Other general hints and tips

Requirements :

I am assuming that you're on a linux server running apache web server. If you're not, you can follow up to step 4, and either consider a linux host, or figure out how to remove ETags and add Far Future Expires header on the web servers you're using. This is very important in optimizing and speeding up your website. Incredible speed gains with minimal drawbacks.

1. You'll need Firefox 2 with FireBug with YSlow. Download and install these in this order.

2. Web-based Javascript Compressor (http://www.jscompress.com/) We'll use this website later, choose JSMin engine when prompted

3. Web-based CSS Compressor (http://www.cssdrive.com/index.php/main/csscompressor/) We'll use this website later, choose supercompact & strip all comments when prompted

4. Gzip compression utility called Win-Gz

Now let's begin optimizing! Things will get harder or more technical as you move up the steps.

Step 1: Learn to use FireBug & YSlow on your own. It should be easy enough for anyone trying to run a Joomla! site.

Familiarize yourself with FireBug and YSlow. Just use it, check it out, see what it does. Try running a performance test on Mosaically.com and your website and compare the results. Now, we're going to try to make all those F's becomes A's or B's or C at the least, unless it's something we can't afford such CDN and we won't worry about it.

Step 2: Optimize images

Open you Photoshop, or Gimp, or some relatively powerful image editing software. Open all images used in your Joomla! uses and save them using "Save for Web & Devices" or some other ways to save the image files optimized for web. Make sure to select the right settings for Gif, Png, or Jpeg, and pay attention to transparent png's as they can become distorted with optimization. Gif's Jpeg's usually see most benefit in this area. Play around with the settings, and make sure you're making the image files smaller and not larger. Now, use them for your website. This is very minor optimization, but easy to do, although a bit tedious. Whenever you switch you templates, you want to do this. Whenever you create graphic content for your website, you want to do this.

Step 3: Optimize Javascript

Open all CSS files your Joomla! uses, and copy everything on to this website's (http://www.jscompress.com/) Javascript Compressor, and select JSMin engine. Now compress them, and copy the compressed version and paste it onto the original files. Make sure you have back ups of your Javscript files if you've modified them. Save the files, and use these Javascript files for your website. Some Javascript files don't work when it's compressed. I've had least problems with the JSMin engine, and most of Joomla's and other related component's Javascripts are compressible with this engine.

Step 3: Optimize CSS Stylesheets

Open all CSS files your Joomla! uses, and copy everything on to this website's (http://www.cssdrive.com/index.php/main/csscompressor/) CSS Compressor, and select supercompact & strip all comments. Now compress them, and copy the compressed version and paste it onto the original files. Make sure you have back ups of your CSS stylesheets if you've modified them. Save the files, and use these CSS Stylesheets for your website.

Step 4: Consider Gzipping your Javascript files & CSS Stylesheet (Just the large file, don't bother with small files)

Warning! You should not take this step if you don't want to change any component's or template's code. It's also a trial & error process. You won't know if it'll work until you do it and see. You also have to test it with different browsers. For example, I am testing with Firefox 2, 3, IE7, and Safari. Anyways, use a Gzip compression utility like Win-Gz and gzip your CSS Stylesheets. Upload them to the same directory as your original stylesheets. Find all places in your Joomla! code that use these CSS stylesheets, and add .gz extension after the file names. Make sure to test on all browsers you want your website to work. Don't bother with small files, they're not worth the trouble. Focus on Javascript frameworks, and large CSS files.

Step 5: Removing ETags & Adding Far Future Expires headers

The most important step. First, brief explanation of what they are: ETags are like information tags web server and a browser uses to figure out if you need to download the file again or not. Unfortunately, this system stores a bit too much information on the file and causes problem with modern day web server environments which work in clusters or computers rather than a single computer. On top of that there is still performance hit per file to do the ETag look up. Anyways, we're going to throw out this system, and replace it with expires header system to do the same job. It's simpler, faster, and always works. Of course, it has its drawbacks, but it's worth it.

We are going to add some lines of code to .htaccess file inside your Joomla! directory. If you haven't been using it, you may have to change the filename. Open it up, and at the top add the following lines of code.

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None
<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2010 20:00:00 GMT"
</FilesMatch>

Now, what this does is tells your browser that any files with the above extensions will not change until April 28th 2010, which is my birthday. So, how does this improve performance? Well, it doesn't improve the initial loading time at all, however it will increase your website's browing speed significantly as it will improve the speed you move from one page to next up to 10 times or more. Why? Because you're ETag system needs to do a lookup of each file's Etag, expires system simply check the files you already have with the current time. Another big reason is your ETag most likely are not doing their job right. Anyways, this is what improved my website's performance the most, and the drawbacks aren't that bad.

What's bad is that when you do update something on your website, your visitor's browser no longer cares because you've already told it that you're not going to change the file until April 28th, 2010. So, let's say you changed your logo, your visitors who have already been to your site will not get your new logo until they click the refresh button. There is an easy way around this, and solution is to simply update the file name whenever you update a file that has this far future expires header. For example, add a 4 digit date after the file name.

YooTheme users should note that YooTheme already Gzips their javascripts, and css stylesheets, and adds expires header.

Step 6: Other general hints and tips

Okay, now I'm just going to go over some easy, somewhat-obvious things, just in case you don't know already.

1. Use only what you need to in terms of your components, modules, and plugins. (plugins slow down the whole system little by little)

2. Joomla Cache - turn it on and use it, does wonders, but only works for static content. Don't forget to go through all modules and turning on their cache, they too rely on Joomla cache, but are off be default.

3. Legacy 1.0 - unless the module you want to use requires 1.0 is something you really need, don't use it and keep the legacy off. It's a somewhat-big performance hit. I would think equivalent to multiple content plugins.

4. Absolute make sure there aren't any Javascript issues like duplicate scripts, or clashing javascript frameworks. These will not only make your website slow, but can make your visitor's computer slow.

5. Turn off SEF/SEO unless you really need it.

There are optimization techniques for everything. For example, Joomla! depends on PHP and mySQL, so if you optimize PHP or mySQL, your Joomla! would speed up as well. However, it's hard to play around with PHP or mySQL on a shared hosting. If you are running you own server and looking to improve performance, you should definitely look into optimizing PHP and mySQL. I considered this at point, but decided I really don't want to learn all the technical details of server maintenance. Anyways, that's all I got for Joomla! 1.5 optimization. Leave comments if you have any questions.

TrackBack URI for this entry

Comments (23)

Subscribe to this comment's feed