Combining javascript in header

[mathforum]

Has anyone successfully done this before? I know in theory that referencing .js files to grab in the header will slow down page loading time a lot, and vB4 has a bunch of them. Can I simply stack the source codes on top of each other and load that one .js file instead?

Any recommendations on a program to use for this?

[ozzy47]

This may get you going in the right direction, e360-Additional JavaScript Template (https://vborg.vbsupport.ru/showthread.php?t=291374)

[mathforum]

Thank you for the quick reply! That's not exactly what I need but it probably can be used at some point so I'll make note of it. :)

I can't say it's completely due to vB since I probably have some add-ons in there too, but the header portion of the code is a mess and renders terribly slower than it should. Each reference to a .js file and .css slows down the load time or completely stops it momentarily. This has been confirmed by several page load tests online.

The way to improve this, I hope, is to aggregate the code into 1 file so the HTTP header requests go down and the whole thing downloads at once, then more quickly moves on to the rest of the code.

Here is Google's suggestion: Remove render-blocking JavaScript:
http://yui.yahooapis.com/combo?2.9.0/build/yuiloader-dom-event/yuiloader-dom-event.js&2.9.0/build/connection/connection-min.js
http://mathhelpboards.com/clientscript/vbulletin-core.js?v=420
http://mathhelpboards.com/mobiquo/smartbanner/appbanner.js
http://mathhelpboards.com/clientscript/vbulletin_read_marker.js?v=420
http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js?v=420
http://mathhelpboards.com/clientscript/vbulletin-sidebar.js?v=420
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full&delayStartupUntil=configured
http://mathhelpboards.com/clientscript/vbulletin_md5.js?v=420
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/css?family=Passion+One
http://fonts.googleapis.com/css?family=Wellfleet
http://fonts.googleapis.com/css?family=Francois+One
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/main-rollup.css?d=1382833520
http://mathhelpboards.com/mobiquo/smartbanner/appbanner.css
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/forumhome-rollup.css?d=1382833520
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/sidebar.css?d=1382833520
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/widgets.css?d=1382833520
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/tagcloud.css?d=1382833520
http://mathhelpboards.com/clientscript/vbulletin_css/style00014l/additional.css?d=1382833520
http://mathhelpboards.com/css.php?styleid=14&langid=1&d=1382833520&sheet=additional.css

That is the list of files I want to merge. Then I'm hoping I can just delete the individual references in the template and reference the one large .js file and the rest will work like it did before.

I haven't found any record of someone doing this though here or at vbulletin.com, or anywhere else on Google although it's been mentioned many times.

[ozzy47]

I guess the best thing is to try it, see if everything works first, then run a speed test to see if there is a difference.

[mathforum]

Will do hopefully :) If anyone has tips on the easiest way to do this I'm still all ears. It's great to have another way to optimize vB after years and years of reading through all the ways.

[CAG CheechDogg]

I tried combining all the js files into one and there were problems because not every js file is needed at load time. I did exactly what you did, combine it all into one file for just one http request but it just didn't work.

If you do find a way to do this, please let us know my Man. I go back to it every once in a while to see if I can manage to come up with a solution, but nothing....sigh... GOOD LUCK !

[mathforum]

I tried combining all the js files into one and there were problems because not every js file is needed at load time. I did exactly what you did, combine it all into one file for just one http request but it just didn't work.

If you do find a way to do this, please let us know my Man. I go back to it every once in a while to see if I can manage to come up with a solution, but nothing....sigh... GOOD LUCK !

Did you combine all or just the js files from the header? We definitely don't want to load more than we have to in the head portion of the code, if the script can be dynamically run in the body somehow. I posted a list of the js files that my site is referencing now which could be optimized somehow - in total 8 files. I can only really combine the ones locally hosted so I'll try that today and see if going from 8 to 3 files makes any difference.

[final kaoss]

What you can do is run the plugin vbsupercharged and use it to combine js. Also what I've done is use the defer element on all but these scripts.

http://www.video-game-chat.com/forum/clientscript/vbulletin-core.js?v=421 (43.5KiB)
http://www.video-game-chat.com/forum/clientscript/vbulletin_md5.js?v=421 (5.2KiB)
http://www.video-game-chat.com/forum/clientscript/vbulletin_read_marker.js?v=421 (3.3KiB)
http://www.video-game-chat.com/forum/clientscript/jquery.lazyload.mini.js (2.5KiB)
http://www.video-game-chat.com/forum/ (2.4KiB of inline JavaScript)
http://www.video-game-chat.com/forum/forumrunner/detect.js (1.6KiB)
http://www.video-game-chat.com/forum/clientscript/sc_thumbs.js (1017B)
http://www.video-game-chat.com/forum/ajax.php?do=analytics&v=421 (1005B)

[mathforum]

Hi final_kaoss. Thank you for writing but as I see in that thread the mod is no longer working for vB 4.1+ and I'm running 4.2.0 right now so I don't think it will work.

Can you explain more about the defer script and how you discovered the scripts which are essential to load in the head versus not essential?

[final kaoss]

It's still working just fine. I'm using it on 4.2.2

Also I just found out by trial & error which ones not to do that to. You can learn more about deferring here.
http://gtmetrix.com/defer-parsing-of-javascript.html