I’ve really got no way to gauge how good or bad those results are relative to similar type sites (vBulletin, drupal, wordpress, joomla, etc…) It would be nice to be able to say “site type: vbulletin” to see what average load times are across that type for instance. Realizing of course that my site has more graphic elements than other vb sites which may be mostly css with a few small icons.
Right now I’m serving static content through lighttpd on a completely separate domain (which isn’t recognized as a CDN, but does make a difference). I’m optimizing images as time permits (using PageSpeed to identify them).
So, any suggestions on other things I could do to improve load times?
IE 8 and 9 increased the number of parallel requests from 2 to 6 and fetch javascript asynchronously which helps considerably given the number of requests on your page. I’m not sure how easy it is do yo on your site but the top two things you can do to improve the performance (in order) are:
1 - Merge the css and js files loaded at the beginning into as few of each as possible (preferably 1).
2 - There are a lot of small icon or background graphics that should be combined into image sprites
I’ve been eyeballing merging the css and js files, but that’s probably the last thing on my list that I’m willing to try to tackle because (for me) it’ll mean some major hacking to vb. I’m holding out for the complete mobile version - once they release that and I’m satisfied w/ the performance, I’ll start in on those.
I’ll start tinkering with sprites though - that sounds to me like the biggest bang for my buck right now.
After some head scratching and some strange sounds from my workstation, I was only able to get a few of the images into CSS sprites. Well, that’s not entirely true - I was able to create images that I could USE with CSS sprites, but for the biggest win (all the background images), I was unable to figure out how to implement them without breaking the style on the forum.
So…any vBulletin admins out there have any experience doing this? I could use a pointer or two.
Al, I’m also running vBulletin (version 3.8.x in my case). But I’m using image sprites only for my home page, so I don’t have any first-hand experience in implementing image sprites elsewhere within vBulletin. In the rest of my forum, believe it or not, I completely removed ALL images from the view of guests (and kept images to the bare minimum for members). The only single image guests see on my forum (excluding the home page images) is my site-wide logo of about 7KB. (I’m not counting my favicon.ico (318 bytes), and images added to posts by members.)
Look around your forum to see if you can also remove some unnecessary image files. You may be pleasantly surprised to find quite a few images you can happily live without!
P.S. To demonstrate how much unnecessary stuff the stock vBulletin currently has, which can be removed, here’s a comparison: vBulletin.com has 68 http requests on its forum home (my forum home has 5 http requests). vBulletin.com has 61 http requests on forum view pages (my forum view pages only have 4 http requests each). vBulletin.com has 55 http requests on thread view pages (I only have 6 http requests - more on pages which contain a unit of Google Adsense)
Thanks for the response. I’m probably compounding my problem by using a theme from CompleteVB - my home page (forum page currently) has over 100 requests - I think I could cut that by more than half if I could figure out how to sprite the background images. I’ve started looking at removing some of the images entirely (as you suggested).
It’s not complicated at all, Al. Use your favorite search engine, and search for terms: image sprites. You will find multiple step-by-step instructions.
Take your time. This is not something that needs to be done over night. Enjoy the process. Celebrate each removed .jpg, .gif, and .png!
If it helps as a starting point, spriteme is really helpful - http://spriteme.org/
It will generate the images and tell you exactly what modifications to make to your css. It’s not as adept as hand-managing the sprites but it’s a great tool for getting started (assuming the images are already background images).
Thanks - I’ve been using this one http://spritegen.website-performance.org/ for testing because it has an option to optimize the images with optipng - one less step for me to do and it also lets me feed it a zip file of just the images I want to turn into sprites.
I’m sure the problem I’m running into is a combination of my lack of strong CSS skills and the way CompleteVB coded the theme I’m using. Subbing one of their background images with a sprited one and the css to support it causes the theme to break. It’s a problem that repeats in a lot of places, so once I figure it out the win will be huge.
Oh and Marvin, I celebrate each removed image with a beer - which might explain a whole lot of other stuff!
Just make sure you are careful about splitting up sprites because repeat-x and repeat-y need to be in separate sprites while repeat generally can’t be sprited. Best to start with just the images that aren’t repeated at all (in case you’re bumping into a problem related to that).
Al, I’m not familliar with the CompleteVB theme, and since the theme’s website says their product is intended for vBulletin version 4.x, I suspect that’s the vB version you are working on. I’m still at vB 3.8.x, so I may be of little use here.
But an idea just crossed my mind. Rather than trying to modify a lot of vBulletin templates, I’d likely try to use the built-in “Replacement Variable Manager”, provided the new vB 4.x still has it. In vB 3.8.x, to access the “Replacement Variable Manager”, you would go to AdminCP, and then in the left pane you would find it in the “Styles & Templates” section. In your style, you would then click the [Add New Replacement Variable] link. There, you would specify, for example, that you wish to replace the existing code:
<img src="images/buttons/newthread.gif" alt="Post New Thread" border="0" />
with your new code, for example:
<div class="sprite_button_newthread"></div>
Al, I’m not certain if this is the best, and/or the correct, way of doing it, I’m not a pro at coding, this is just my hobby. But this seems to me much simpler than to start editing a myriad of vBulletin templates. It also is very easy to delete replacement variables from vB (at least in version 3.8.x).
I very briefly tested this approach before starting to write this reply, and it worked immediately with no issue as far as I can tell.
