Board Optimization - United-Forum CSS Sprites - ludicrous speed - NOW!

tl;dr Makes your forum faster.

Want an easy one-click installation for this addon? . Vote for this jira-entry

Add on currently is in beta stage

When visiting a website, speed is a very important factor not only for users but crawlers as well. Long loading times are a nuisance since your time is basically wasted during the waiting period. Hence, we are trying everything we can in order to speed up our site. One great way to improve loading times is by the use of css sprites. Unfortunately these are not implemented by vBulletin.

We therefore decided to develop our own css-sprite add on for vBulletin boards and want to share this code with the worldwide vBulletin community.

Live demo

The add on is permanently running in our vBulletin board ( > 2.000.000 posts), take a look:
http://www.united-forum.de

The add on will be supported via this thread. If you have any questions, issues, improvements or feedback regarding this add on, please feel free to post a comment or write us a pm at any time. We are happy to discuss

vBulletin performance using css sprites

Our tests are based on version 0.7.0. We used the analytic tools firebug network utility and the googlelabs.com page speed site

on the client side the following parameter were used:
download speed: 5.7 MBit/s
ping: 31ms

css sprites - what are they?

The intention behind css sprites is the bundling of many small graphics into one large graphic in order to decrease the number of required http requests. This shortens the loading times of the given website. In addition, the the accumulated size of all small graphics is higher than the size of the sprite due to reasons of compression.
You can find further information in a great article by Chris Coyier.

What is the gain in using css sprites?

Aside from the technical implementation, the question on how much one actually does gain by using css sprites is of the most interest. Obviously they decrease loading times - but how important are small loading times and what is the impact on vBulletin overall loading times?

A short time ago, Jasper Aguila pointed out that speed is one crucial stickiness factor in his blog on vBulletin.com.

Originally Posted by Jasper Aguila vBulletin Support

The internet has unfortunately contributed to the exponential decrease in attention span for many individuals. That's why this decade is seeing a trend in emerging technologies emphasizing the importance of speed request. It's crucial for your content to be promptly distributed in a timely manner, else bounce rate will increase - making you lose returning visitors. It's also important to note that slow sites may be penalized by search engines.

With better browsers, more powerful processors, and improved technologies constantly releasing each year, it's becoming quite difficult to provide excuses for slow loading pages. Therefore, try optimizing your server for speed. Read up and learn optimization techniques at vBulletin.com's Server Configuration forum.

In addition, the google ranking is influenced by the site speed as well.

Google Webmaster Central Blog

Originally Posted by 09.04.2010 - Google Webmaster Central Blog

You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

vBseo Webmaster Mert G?k?eimam

CSS sprites is a huge bonus for big boards , any big board owner definately should use it.

Last but not least, not only the user's loading time is reduced, but also does the server load decrease as the server will have to handle a lot less of http requests. This clears available connections and cpu time.

Add on features

In the current released beta version 0.7.2, sprites are available for FORUMHOME and FORUMDISPLAY. Coming up next SHOWTHREAD.

Sprites are created style based for all forum styles and saved in a folder which you can set via the imgdir_sprite stylevar. You have one additional button in the ACP (CSS-Sprites -> Refresh) which automatically creates all sprites, the according css definitions and includes those css definitions in the vBulletin css rollup files.

Installation

First of all, if you didnt want to change the templates manually, install the Template Modification System (TMS). Now proceed with the installation:

• upload the contents of the upload folder into your forum home directory.
• import the add on in the ACP
• upon installation a new stylevar imgdir_sprite will be created. Update this stylevar based on your file structure - default value is the vbulletin sprite directory. Make sure the folder is writable, else the sprites can't be saved!
• create the sprites via the ACP at CSS-Sprite using the Refresh option.
• If you have installed TMS, you are done now. This was an easy gained speed up, not? If you didnt installed TMS and didnt want to do it, proceed with the next point:
• in order to use the sprites, you then will have to edit some templates. The diffs (xou will find it in the do_not_upload folder show which parts you have to delete '<' and which parts to add '>' In addition, on top find the lines in which you will find the respective code.[/b]

[Mooff]

I see.

The addon does know you have GD installed and it is working (partly) as shown here:

Starting with images/sprites/sprite-49-main_rtl.png.
18 icons added.
Creating sprite (width:313px height:18px).
Sprite saved, updating css-rules.
CSS template successfully updated.

So it does sprite something.

As for the errors. That particular error does hit here:

Originally Posted by sprite.php_pseudo_code

else if(~imagetypes() & $imageinfo[2])
-> throw error, skip icon

If your gd version does not support the imagetype that image has, the addon cannot add that icon and therefore doesn't.
In your case i assume (unfortunately the error message doesn't show us which image type due to an oversight) that your gd version doesn't support *.gif files. So the fix would be to update your GD version.

Regards Mooff

[Mickie D]

I will have a go at updating GD but I do not want to have to recompile PHP.

That is why ImageMagick in my opinion is a much better solution than GD.

EDIT
----------------------
gd

GD Support enabled
GD Version bundled (2.0.34 compatible)
GIF Read Support enabled
GIF Create Support enabled
PNG Support enabled
libPNG Version 1.2.44
WBMP Support enabled
XBM Support enabled
-----------------------

It seems I have GIF enabled ?

Mick

[klaus]

Will there be an updated version soon that incorporates more images in the sprite?

[baerwurz]

Will this be updated to vbcms too?

[Mooff]

@Mickie D
untested:
in the admincp/sprite.php file find that code:

                        else if(~imagetypes() & $imageinfo[2])
                        {
                            echo '<span style="color:red">Error occurred:</span> Your System does not support ' . image_type_to_mime_type() . '.<br />';
                        }

replace with

                        else if(~imagetypes() & $imageinfo[2])
                        {
                            echo '<span style="color:red">Error occurred:</span> Your System does not support --- Imageinfo:' . $imageinfo[2]. '<br />';
                        }

that should return a clearer error message.

@klaus
FORUMDISPLAY and FORUMHOME are pretty much final. I think 0.8.0 does add 3 icons there.
Next big release will be SHOWTHREAD with 0.8.0.
On our board we have a 0.8.0alpha already running for some weeks now. Unfortunately it's a bit harder to use sprites on SHOWTHREAD. We had to use :after and :before css classes and the css in the default vbulletin version has a lot {vb:math 2/3*{vb:stylevar padding}/{vb:world}*sqrt(275)} expressions in there - which are kinda hard to reproduce for backgroundimages. So in order to release a version here, we have to debug that a lot, so we can be sure it doesn't look off in custom styles where the icons are bigger, or the font is different and so on.
One of those graphic bugs can be found on our live board using chrome - the top button is broken in german language there (look for "nach oben"). And some other bugs like the notices box, or problems in the profile.

In addition i can't really say when we will have the time to polish 0.8.0 since we are really packed codingwise right now. My spare time gets eaten up by a secret project which should be done in about a month or so - and after that 2 other projects are waiting. As for Osbes, he is currently working on our new server, which does include optimizing that new box a lot, since that is the only time we can actually squeeze more performance out without an additional downtime. After that we will prolly finally go for 4.1.(7)(8) which is scary cause we need to convert our 10 years old vbulletin database to utf8 and there is of course the new editor, which scares me a lot.


That aside the addon as of right now does provide a hook you can use to include your own icons into the sprite. And we will continue to provide support on here, we just can't release a new version in the near future.

@bearwurz
vbcms support isn't planned as of right now since there aren't that many icons which can be caught - for example previewimages and avatars can't be supported, since that doesn't make sense. Icons like quote, reply and so on will be automatically included once 0.8.0 is out i think, not 100% sure, depends on if they use the same css classes as showthread.
In addition the cms is prolly different for every site, depending on what widgets you use and do not use - and it doesn't make sense to include icons for widgets which won't ever be used on your site.
But as posted above, the addon does have a hook, where you can add your own icons into the sprites.

[FReeSTER]

how is the Update looking? lol

[thecore762]

After adding the https://vborg.vbsupport.ru/showthread.php?t=152931 My forum icons stop showing....default and custom style too.

[Gato]

The scripts look very very good.
If you can do it with an installer for add in the Products/addons in ADMINCP, and with information for the people that can´t be so technical or the people that doesn´t know very much about sprites will be EXCELENT!!!

I will wait for non beta version!!

[Mooff]

@thecore762
What is your question? If you have issues with the TMS you should ask in the TMS thread.

@Gato
This is already a producs/addon ACP modification. You have two ways of installing it:
a) Install it and then do the template edits manually
b) Install the TMS first, then install the sprites addon and everything should work out of the box.

This behaviour cannot change.

As for beta or no beta. Codingwise not that much will change in a non beta version (when ever that will be ready). Basecially you should do the same as you do with all addons, install it on your testboard first and then if you experience no bugs (or fixed them) port it to your liveboard. What i'm trying to say - we have some high standards before we would ever call something gold or final. In addition with every new vb4 version new bugs might show up in every addon, so basecially it might never pass beta state. :P But it's fully functional on both forumhome and forumdisplay.

[imported_stefan]

Google Site Speed increased from 56 to 60 ;-). So nice but not fascinating ;-)