Optimizing your Joomla site for speed

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.

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.
As mentioned, some templates use this technique. For instance, the Focus template by Joomla Bamboo utilizes sprites extensively to reduce load time.

No browser resizing!

Among the most common errors that Joomla users fall victim to is to resize images in the text editor. Basically, they insert a (large) image into the text editor of Joomla, and then resize it there. Bad idea!
The reason this is a bad idea is that, depending on your editor, the image will be resized using the Height / Width HTML parameters or CSS. Regardless of method, the image will be loaded full size by the browser, and then resized before being shown to the reader. Imagine an image being 10 times as large as it is shown in the browser. That means 10 times the data being transferred to the reader before the image is shown. And imagine you have 10 images on your page. That means 100 times more data than you need..!

Additionally, images resized in the browser can appear blurred and low quality. The browser is oftentimes not able to render the images clearly when resized. Internet Explorer in particular does a terrible job of rendering images resized with the height and width parameters.

The solution is simple: Resize the images to the correct size before uploading. Or, if you use the JCE Image Manager, you can resize the images on upload or using the Edit image functions (you can also crop and add effects using that tool).

The point is - the images should be exactly the pixel size that they will be shown in the final page on your site. That will save load time and improve the quality of the images.

If you're using a CCK or content plug-in, most of these will take care of some of image resizing for you. Typically, they will resize the first image of the article. Or, in the case of K2, the image you have chosen as the main image for the item. Still, there can be images in the main text that won't be touched by the extensions. So be very careful about using browser resizing. As a friend of mine would say: It's the devil's work (he was talking about hot dogs, though…).

That said, sometimes your users simply don’t understand what this is about, and resize images as they wish. To avoid the horrible effect this has on images in Internet Explorer, you can add a little piece of code to your CSS file:

img { -ms-interpolation-mode: bicubic; }

Click here to see an example of how this can improve image quality in Internet Explorer.

Spotting images without height and width
Here’s a tip for spotting unsized images during development. Add this CSS rule to your template's stylesheet:

img:not([width]):not([height]) {
border: 2px solid red !important;
}

This will highlight any images without width and height attributes with a red border so they’re easy to spot.

Finding the correct image compression

Most of the content plug-ins and CCKs have built-in image compression. Typically, you can set the JPG compression. If you have a large number of images on your site, this setting can drastically impact the load times of your site.

In K2, you'll find the compression setting in the «Options» modal box.

You should test the settings and use the lowest acceptable value. Lower values means you compress the image more, which will save data. Depending on the type of images you have on your site these settings can vary from site to site. A site using images with a lot of details might need less compression (to keep the detail). Whereas a site with lots of landscape imagery or similar can get away with using a tougher compression (lower value), because larger areas of the images are similar in color etc.

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.

Make sure the plug-in order is correct, as mentioned in this blog post by Peter van Westen. Speaking of Peter, he has also created a very useful (free) plug-in that creates a «Clean Cache» button in the administrator. That’s very handy when you do changes to your live site and need to see those immediately.

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.

Looking at the results, you should follow the instructions provided and re-test your site. That way, you will lower the load time for your site, shown by an increased Page Speed Score.

Using a CDN

According to Wikipedia, a content delivery network or content distribution network (CDN) is:

A system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottleneck near that server. Content types include web objects, download-able objects (media files, software, documents), applications, real time media streams, and other components of internet delivery (DNS, routes, and database queries).

There are currently three main CDN extensions available for Joomla.

You can read more about these and about CDN in general in my post about CDN for Joomla.

This post is taken from a chapter in my recently published book Blogging with Joomla, which sells for only US$9.