How to Speed Up Your Joomla Site
Joomla is an open source content management system that allows you to build web sites and powerful online applications. This award-winning web site software contains easy-to-use features and it is freely available to everyone.
Joomla is written in PHP for managing content on the web and uses a MySQL database to store content. Joomla! is released under the GNU General Public License.
In this article, I will tell you about how to speed up your Joomla site.
Using CSS sprites
The technique of using CSS Sprites is a great idea. It can save your site from a lot of HTTP requests, which in turn will save load time.
A CSS sprites are images shown on your site, that are actually one large image. The browser will load the large image once, and then use CSS to show parts of the image only in different parts of the site.
Some sites take this technique to the extreme, using one image for the entire template imagery. One such example is the extremely fast-loading free template Afterburner from RocketTheme.
Sprites are not little images like in an 80’s video game. A sprite is actually one big image. Have you ever seen the CSS technique where the «on» and «off» states of a button are in the same image? That is done by changing the background-position for the image container. That saves time, as the image is loaded only once.
CSS Sprites is a more advanced application of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it. That saves the overhead of having to fetch multiple images.
In this example, we set the linked list items of an unordered list to have a background image:
#nav li a {background-image: url('/../img/image_nav.gif')}
Then, we set the portion of the background image to use by shifting the background position for each menu item. In Joomla, you can easily use these menu item classes as they are added in the mod_mainmenu module by default.
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
This way, you can add icons to your menu items or similar. Or you can use the technique to set icons or background images for modules. You can also use sprites for common items on your blog like social media buttons and more. Only the imagination limits what you can do on your quest to less http requests.
Optimizing images
In my opinion, images make up an important part of any blog. A good image can underscore and improve the content of your posts. I believe you should use images in every post you create. Perhaps not overuse it, but try to use illustrations where it can improve the content. For instance, I'm using charts, tables and screenshots a lot on joomlablogger.net. It is sometimes easier to understand a concept when it's illustrated as well as explained with text.
On the other hand, using too many images can slow down the loading of your blog. If your reader's are mostly in countries with high bandwidth internet access, it's normally not a problem. However, if your site is accessed by people living in low bandwidth areas, you might need to think differently.
I have a good friend who runs a couple of blogs in India. He uses almost no images in his posts. His readers mostly have low bandwidth available to them when browsing. If it came down to a choice between a slow site and hires images on my blog, I would choose speed. More about that in the SEO chapter.
Joomla Cache
Before launching your site, you should activate the Joomla cache. This will increase the load speed of the pages a lot. You set up the cache type in the Global Configuration. Then, you should check if the cache plug-in is activated by navigating to the Plug-in Manager. I have seen that the plug-in sometimes is disabled, even though the cache is enabled in the Global Configuration screen.
Testing for speed
When you are setting up your blog, you should test it for speed. Particularly after installing new front-end modules or content plug-ins. I use the Page Speed plug-in for Firefox and Google Chrome. It will give you a list of improvements you can make on your page. You will also get a score (X/100) which is an indication of how well the page performs. Higher numbers are better.