Brought to you by vBulletin Skin Zone
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.
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
The CSS
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
The CSS
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
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
Code:
<a href="#" id="infobubble"> </a>
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;
}
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"> </div>
<div id="topright"> </div>
</div>
<div id="boxcontent">
<p>Your content here.</p>
</div>
<div id="bottom">
<div id="bottomleft"> </div>
<div id="bottomright"> </div>
</div>
</div>
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;
}
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
Total Comments 5
Comments
-
Heh.
The bulk of that is actually "Ace's vBulletin Optimisation Guide" but Brandon has added some nice additions.
Posted 12-02-2007 at 03:37 PM by Ace Shattock
-
Re: Rounded Corners
Very nice approach, I'll try to use it with the next release of the vBSEO Skin.
Re: Compress CSS
Why would you want to compress the (external) CSS if it will be cached by the browser anyways?
Re: Compress Javascript
Same as with CSS, external JS gets cached by the browser. Also, if gzip is enabled, js files will already be compressed when the server returns the request.
vBSEO notes: CSS and JS minifying is something we've looked into as possible performance enhancements by vBSEO, but we haven't determined those to justify the additional overhead caused by processing, mainly due to the above reasons (this content is cached by browsers).Posted 12-02-2007 at 04:26 PM by Juan Muriente 
Updated 12-02-2007 at 04:42 PM by Juan Muriente -
Hi Juan and Ace, thanks for the encouraging feedback
The reason for compressing CSS or Javascript even though it is cached by the browser is that for new users, large css/javascript files will slow the overall loading on pages (and vbulletin's javascript files are large!). Through my own personal tests I have been able to shave off a few seconds on initial page load times using the above methods.
Jelsoft have announced that all vbulletin javascript in 3.7 will be compressed (source:http://www.vbulletin.com/forum/showp...7&postcount=20) so good news for everyone there.Posted 12-02-2007 at 05:58 PM by MaestroX -
This is the real source of the vbulletin optimization tipsPosted 12-11-2007 at 09:45 PM by Loco - I wish I knew how to quote in here.. ahh well.
<3 to Brandon!
(Though, mine are clearly just the tip of the iceberg, you have expanded and added so much useful information. Kudos, sir!)Posted 12-11-2007 at 09:59 PM by Ace Shattock
Total Trackbacks 0
