Looking to optimise your vBulletin? Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors.

Making your page fast for these first time visitors is key to a better user experience.

Minimise HTTP Requests

Reduce the amount of images

Combining images is the preferred method for reducing the number of image requests.

One such method would be for creating image rollovers.

Image rollovers

Image rollovers are usually composed of two individual images; one for the default state and one for when the mouse is hovered over the image or link. However, it bears some advantages to use a single image by taking advantage of CSS image offsets.


The HTML

Code: 
<a href="#" id="infobubble">&nbsp;</a>
The CSS



Code: 
a#infobubble {
    width: 48px;
    height: 48px;
    background-image: url(http://images.music-web.org/misc/infobubble.gif);
    display: block;
    text-decoration: none;
}
a#infobubble:hover {
    background-position: 48px 0;
}

The Image







Rounded Corners

Another example of combining images are for rounded corners. I have written a couple of articles before on how to create rounded corners using 4 images (They can be found here: vBulletin Articles). The following method will reduce that to 1!

The HTML

Code: 
<div id="roundedbox">
      <div id="top">
         <div id="topleft">&nbsp;</div>
         <div id="topright">&nbsp;</div>
      </div>
      <div id="boxcontent">
         <p>Your content here.</p>
      </div>
      <div id="bottom">
         <div id="bottomleft">&nbsp;</div>
         <div id="bottomright">&nbsp;</div>
      </div>
   </div>
The CSS



Code: 
div#roundedbox {
      background: #bcc1ff;
      float: right;
      margin: 0 0 0 1em;
      width: 175px;
   }
   div#roundedbox #top, div#roundedbox #bottom {
      font-size: 1px;
      height: 16px;
      line-height: 1px;
   }
   div#roundedbox #topleft {
      background: url(/images/corners.gif) no-repeat top left;
      float: left;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #topright {
      background: url(/images/corners.gif) no-repeat top right;
      float: right;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #bottomleft {
      background: url(/images/corners.gif) no-repeat bottom left;
      float: left;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #bottomright {
      background: url(/images/corners.gif) no-repeat bottom right;
      float: right;
      height: 16px;
      width: 16px;
   }
   div#roundedbox #boxcontent {
      margin: -1em 1em;
   }
   div#roundedbox p {
      margin: .5em 0;
   }
The Image




Minimize the size of gradients

This is a common problem that is even seen in the default vBulletin style. Gradients that are repeated horizontally (on the x axis) only need to be 1px wide whereas gradients that repeat vertically (on the y axis) only need to be 1px high.

Compress Images

Graphics editing programs such as Photoshop often do a good job of compressing images sufficiently though anyone with a good graphics editing program could us an online tool such as Dynamic Drive's online image compressor.

Compress CSS

CSS optimization is a very valid form of speeding up downloads without having to sacrifice much (just legibility). With the average dialup user downloading at 3kb/s, savings of just 10kb can mean the page loads a stunning 3 seconds faster.

Using a free online tool such as Icey?s CSS Compressor you cut down the size of your CSS on average by 53%

Make CSS External

Using external files generally produces faster pages because the CSS file is cached by the browser.

Go to AdminCP -> vBulletin Options -> Style and Language Options.
Set "Store CSS Stylesheets as Files?" to Yes.


Compress Javascript

Using a free online tool such as: http://javascriptcompressor.com/ you can even compress your vBulletin javascript and save vital seconds of download time.

Please be aware that you will need to do this everytime you upgrade vBulletin due to the files being overwritten in each release.

Gzip

Go to AdminCP -> vBulletin Options -> Cookies and HTTP Header Options.

Set "GZIP Compression Level" to 1.

(Using more than 1 does not increase performance and only increases server load)

Thats it.

Source : Vbskins by MaestroX
EsotorisK Reviewed by EsotorisK on . Optimise your vBulletin to reduce bandwidth and load! Looking to optimise your vBulletin? Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. Making your page fast for these first time visitors is key to a better user experience. Minimise HTTP Requests Reduce the amount of images Combining images is the preferred method for reducing the number of image requests. Rating: 5