Board Optimization - Combine It - Javascript and CSS optimization

What does it do?

This mod is designed to automatically merge and minify all CSS and Javascript on the board and cache the result. This helps reduce requests to the server and reduces bandwidth usage.

Installation

1. Upload contents of upload folder to forum
2. Create a folder named 'cache' in the forum
3. Make sure the web server has the appropriate permissions to write to the cache folder
4. Import product-combineit.xml into vBulletin
5. Edit options under vBulletin options to reflect how you want the mod to act and to activate it

Notes

This may not work with highly customized CSS or Javascript. If the script can't write to the cache folder this mod will not function. If you find problems with the order a particular script is executing in, add it's filename as a stop word and it'll load as usual.

[Marvin Hlavac]

Hi Menewsha,

Many thanks for creating this add-in, and for sharing it with us.

I have combined my .js files recently myself, but I didn't know how to combine my two .css files. I just installed your add-in, configured it to minify and combine only .css, and tested it. It worked!

Now, instead of two .css files, when I check my source I only see one. I'm very much grateful to you for this!

However, I run my site via a CDN (Content Delivery Network), and I need to find a way to change the URL

from:

www.example.com/cache/

to:

cdn.example.com/cache/

The method I use for changing URLs of other static content doesn't seem to work for the .css file generated by your product.

For other static content (.js, .jpg, .gif, and even my old .css files), I simply created a Replacement Variable in the Replacement Variable Manager, but creating one for www.example.com/cache/ ---> cdn.example.com/cache/ doesn't change the www to cdn.

Maybe the combineit.php should be edited somehow to address my specific requirement?

I still want the plug-in to save the combined .css to the same directory ( www.example.com/cache/ ), but I need the URL in the html of my page to be cdn.example.com/cache/

Any assistance with this would be greatly appreciated.

Kind regards,

Marvin

[Marvin Hlavac]

I solved the above CDN-related issue by editing the line 101 of the combineit.php as follows:

$buffer = str_replace($first, '<link type="text/css" rel="stylesheet" href="'.'http://cdn.example.com'.'/cache/'.$hash.'.css" />'."\n", $buffer);

However, I came across an issue with WYSIWYG editor and FireFox web browser. When css files, including inline css, are combined, the WYSIWYG editor is not styled in FireFox (the background is gray instead of white, and fonts are different, too).

I think if it were possible to exclude individual css file(s) from being combined, this issue could perhaps be corrected by excluding vbulletin_editor.css. But I don't know if it would at all be possible to modify this product to exclude individual css files like it is possible to exclude js files.

Any feedback would be much appreciated.

[Marvin Hlavac]

I have found the above mentioned issue, which causes FireFox not to style the reply box, to be related to hosting CSS on a CDN. So this issue is not the fault of this product. This product, as far as I can see, works flawlessly, combining .css files with not a single issue so far on my forum. This product is an unnoticed gem! I can't believe only 43 people marked it as installed to this day!

I may look into using it to also combine my .js files, even though I already combined some of them myself a while ago. I briefly enabled the .js feature, but while it did combine them all, and my pages displayed in my browser just fine, I did notice a yellow exclamation mark in the Internet Explorer's status bar notifying me of errors. This may be related to incompatibility of my own modifications though, so I may look into this at a later date. For now, I'm just very glad I can use it at least for the .css files.

Is anyone using this product successfully for combining .js files? Would you mind sharing your URL, or tell us if it worked for you with or w/out any modification(s) needed?

[Hornstar]

Yeah I just found this too. Can't believe not more people are wanting such a feature working on their sites.

I will trial this in a little bit and fingers cross it works.

[Marvin Hlavac]

After 6 weeks of using this add-on to combine just .CSS, I decided to use it also for combining .JS. (Previously I combined my .JS myself, but the way I was doing it wasn't as nice as using this add-in.)

It works. The only slight issue I observed was related to an add-in I use (Geek Auto Linker), but that was easily solved by adding the name of the javascript for Geek Auto Linker (gal.js) as a "stop word" in Combine IT.

So, as a conclusion I can say, Combine IT works, and it works very well. For many (most?) vBulletin installations Combine IT will likely work right out of the box.

[SBlueman]

I seem to be having issues where members can't click on any quick reply options. Are others experiencing any issues with the quick reply?

[Marvin Hlavac]

By "Quick Reply options" do you mean the formatting options such as bold, italic, underline, enter hyperlink, add image, etc? I haven't noticed these issues, and I just tested them on my forum.

To ID the cause if the issue, I'd start by first trying to find out if a .css or a .js file is causing it. Disable .js combining, and test your forum. Let us know.

[SBlueman]

Yes, those are the options I was referring to. It seems that the issue is resolved once I disable .js combining. However, what to do if you want to combine .js?

[Marvin Hlavac]

You can (should?) specify in Combine It options that you want to combine only files from the same host.

Let is know if that helps.

[SBlueman]

I gave your suggestion a shot but unfortunately the issue remains with those settings in place.