[admin]

Looking to optimize 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.

Here is an example taken from my classical music forum:

The HTML

<a href="#" id="infobubble">&nbsp;</a>

The CSS

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

<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

   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 That...

Whereas this guide looked primarily at optimising style elements of your vBulletin, I also recommend reading Brandon's vBulletin Optimisation guide here.

MaestroX
vBulletin Skin Zone

[peterpigman]

I tried making our gradients 1 px deep but it didn't work. How exactly do you do it?

[admin]

I'll give you an example. In the default vBulletin package this is the tcat gradient:



Now because this gradient is repeated horizontally (along the x-axis) it only needs to be 1px wide. So it would look like this:



We can take this even further. There is no need in the gradient being 100px high when half of the image is a single colour. We crop of the excess and just use sensible css to make it work (The default tcat css will already work for this but you will need to customise it depending on your gradient colour). Here is the image:



Here is the CSS:

#869BBF url(/images/gradients/gradient_tcat.gif) repeat-x top left

Hope this helps

[peterpigman]

that is exactly as we have it set, if i change the gradient to one pixel deep. it does not repeat, does it need something adding to the extra attributes?

[admin]

Have you checked that the css includes "repeat-x"? Also if you could provide a link to where this is happening that would be great.

[peterpigman]

http://forum.uncoverreality.com/

it is the category strips I am looking at. The code we have atm is #5F4033 url(http://www.uncoverreality.com/forum/...dient_tcat.gif) repeat-x top left

[admin]

You gradient should repeat on the y axis (so change repeat-x to repeat-y). You should make the image 1px high.

Hope this helps

[peterpigman]

Originally Posted by MaestroX

You gradient should repeat on the y axis (so change repeat-x to repeat-y). You should make the image 1px high.

Hope this helps

Yeah that's it, thanks a lot.

[admin]

No problem. Just a note but I would recommend using GIF image files instead of Bitmap. In general Gifs are smaller and better suited to the web.

[peterpigman]

Originally Posted by MaestroX

No problem. Just a note but I would recommend using GIF image files instead of Bitmap. In general Gifs are smaller and better suited to the web.

Where are the bitmaps? I never noticed any. I didn't make the skin I'm just tidying it up.