You are invited to Log in or Register a free Frihost Account!

Optimizing Joomla site for fast loads

The speed at which your site loads is very important. Firstly, a fast loading site will have your readers stick around longer. If they are served content fast, it is more tempting to click on another link to read more. Nobody wants to wait for a slow site.

Secondly, speed has become a major issue when it comes to SEO. Search engines, and particularly Google, now take the loading speed of a page into consideration when ranking the page for result pages. In particular, slow loading sites will be pushed down in the search results. The reason is that Google wants to serve its users with the most relevant content available, and in the shortest time possible. Giving people links to slow sites is not a good idea, so fast-loading sites will now appear higher in the search engine result pages.

There are several things you can do to optimize your site for speed. One way is to limit the use of installed extensions. In this thread, I have collected various items from across the web to improve the loading speed of your site/blog.
Optimizing images:
Images make up an important part of any blog. A good image can underscore and improve the content of your posts. You should use images in every post you create. Perhaps not overuse it, but try to use illustrations where it can improve the content. 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.

There are a lot of tools to optimize images that are available freely on the web.
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: get the image once, shift it around and only display parts of it. That saves the overhead of having to fetch multiple images.
CSS Sprites ....continued....

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.
No browser resizing ....continued....

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.

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; }

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.
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. You can 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.
Your post looks like a spam to me.. lol

I suggest you put on one topic and avoid replying your own post. lol.

Well, if it comes to the speed of your Joomla there are many techniques on how we do it. first on images- just limit your pixels, then for the extension- try to find a good and light extension (you will find many out there).

Rookbooster- is a free extension that will help you boost your website.

I hope that helps.
You can use the Web page Rate plug-in for Firefox and Search engines Firefox. It provides you with a record of developments you can make on your page..
I recommend you k2. it´s very useful.
Related topics
JOOMLA: Has anyone succeeded in installing it at FRIH.Net?
My website is slow like a snail!
Photo Gallery for Joomla?
Changing Main Banner on Joomla
Content Management Systems (CMS)
best cms to match my need
Do you use Joomla?
Need urgent help - Joomla got hacked
My Joomla Site Hacked
Flash banner in Joomla
500 internal server error?
Joomla silly question
Site won't redirect to /index.php
joomla site on subdomain
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.