MyBB Community Forums

Hi,
I'm liking MyBB software a lot, I came over from WordPress into the forum dev world somewhat recently. I'm in the middle of making some sprite based and borderless themes for MyBB and was looking into how else I could streamline site loading/performance. I noticed there were a few external javascripts included with a standard install of MyBB 1.6. So I searched the source to find all other .js instances to get a picture of how, where, and when scripts are used. Now I'm not a javascript guy so I have little to no knowledge of troubleshooting it or understand internals workings of scripts. But since my goal was to streamline loading, I set a goal to combine all scripts in scripts directory into 1 file. I used Google's Compiler as well as tried some others and even some python based scripts. Well.. to back track, I found the following:
Inline scrits (seems would be pointless to combine in 1 external script):
codepress.js
peeker.js
view_manager.js
mycode_sandbox.js
config_settings.js
quick_perm_editor.js
imodal.js
themes.js
users.js

Attempted to combine into 1 script:
autocomplete.js
captcha.js
controls.js
dragdrop.js
editor.js
effects.js
general.js
inline_edit.js
inline_moderation.js
popup_menu.js
post.js
prototype.js
rating.js
scriptaculous.js
slider.js
thread.js
usercp.js
validator.js

After changing the core to reflect a single "SuperScript" file and testing locally, I find that some of the jquery functions do not work properly. Such as polls and quick edit. I assume it's an error in compiling the javascripts into 1 file.

Has anyone done this successfully? and if so would you be willing to share how you successfully compiled the scripts OR would you be willing to share your compiled script? Thank you.

_______________________________________
[attachment=26864] Sprite based MyBB themes coming soon.
[attachment=28651]

I also have had some experience with combining scripts and reducing http requests. First of all, you should not be combining the mybb stock scripts with any jquery scripts. If you are wanting to run two frameworks on one site that is the price you pay.

I went down the route of serving prototype from google (and jQuery where I use it) and then combining some scripts. You can also use google to load scriptaculous, and target controls/dragdrop etc where used.

I combined general.js and popup.js and that was my front page sorted. I used googles closure compiler to do this.

Though the number of http requests seems large, most of them are going to be cached as the user browses your site.
I think chucking the whole lot in one great big uber script though it may reduce the number of http requests IS going to impact page loading, and that would be a larger impact on user experience. Before you start combining scripts etc etc make sure you have the page well optimised - stylesheets first, js later.

Combining moderator scripts with standard user scripts is also a bit of a waste - you are loading js that a large number of users don't even use by doing that.

Take google page speed and YSlow results with a pinch of salt - though my index page does come in at 90 on YSlow and 96 on Page Speed

there are a lot of JS files and CSS files that are page dependent, so overall you are only increasing the bandwidth and load times.

example, post.js is only on new threads/posts, so why load it on the index page?

as long as you setup your .htaccess to properly cache/expire/gzip JS and CSS files and make sure you us cache busting ?ver=XXX codes when calling the JS and CSS files (standard in MyBB), then you are going to minimize bandwidth as much as possible

(2012-07-18, 09:30 PM)Leefish Wrote: [ -> ]I think chucking the whole lot in one great big uber script though it may reduce the number of http requests IS going to impact page loading, and that would be a larger impact on user experience.

You're absolutely right Leefish, I should think more about the end user experience. Combining the admin/mod scripts with the normal user scripts also doesn't make much sense, I went a little too gun ho with attempting to throw everything in one pot.

I need to better understand which script does what and for whom so I can make a more informed decision before trying this again.
I also used Closure Compiler, but when using calcdeps.py with closure compiler I produced an empty js so I just sticked with using the regular compiler on simple optimizations.
But I understand now the problem is in throwing them all together.. if it's not too much hassle for you, would you be willing to summarize what user type (mod or regular) each script is for or perhaps lead me to the documentation on them? Searching around MyBB forum for documentation on the scripts has not been obvious for me.. ha.
My CSS is shorthand and in good order, and as I shared I'm using sprites for my layout and buttons.

A side thought.. it would be great to use sprites in post icons and smiles... It seems admin cp or forum software is not set up to do this. I haven't played with the database much but perhaps theoretically it's possible to alter the table data for smilies and post icons to use image coordinates instead of just a image location? Yay or Nay?

(2012-07-18, 09:48 PM)pavemen Wrote: [ -> ]there are a lot of JS files and CSS files that are page dependent, so overall you are only increasing the bandwidth and load times.

example, post.js is only on new threads/posts, so why load it on the index page?

as long as you setup your .htaccess to properly cache/expire/gzip JS and CSS files and make sure you us cache busting ?ver=XXX codes when calling the JS and CSS files (standard in MyBB), then you are going to minimize bandwidth as much as possible

.htaccess is a tuff beast to me.. I've read tons on it and it's like learning another language. I've noticed there's quite a lot there already from standard install and especially after making the changes requested by the Google SEO plugin. I searched the forum and found a few posts which recommended certain codes.. but what I found was login credentials would appear to ghost (dissapear and come back unexpectedly).. since apache langauge is like Greek to me I just stayed with using stock.
Is there a code usage you'd reccomened for cache, expire, gzip for default setups that cache longer than whats set by a standard install? According to pagespeed there's plenty of images that should be cached longer.. can that be defined in .htaccess?

When searching the MyBB install source code earlier I found most of the js scripts had ?ver=XXX appended to their script strings, from my understand this is a way to make the browser to redownload the script which has a long cache value by simply changing the version number in the string. But I've read this is not a good practice in theory if you have many proxy users visiting your sites as "proxy servers don't cache query strings". Regardless of the proxy issue I read about, I'm just trying to minimize http requests to a bare minimum but as Leefish pointed out, still balance page loading with performace to provide the best user experience.

If my questions are excessive I do appologize,
I'm just eager to properly reach my goal.

It is not a problem to try and help - but - do bear in mind that all this work on the js will have to be redone once 1.8 comes out, and maybe the http requests side will be a bit better optimised out of the box.

The first thing I did, before I started on the js was to go through the site looking at images and trying to see where I could get rid of them. I use CSS buttons on my postbit, with just the gif on the multi-quote. You can do a pure CSS solution on the multi-quote but I did not think it delivered enough return to match the effort required. You will get a plainer looking site, but it will be faster.

Next thing I did was to combine my popup.js and general.js with Closure Compiler (CC) and as I said, load the prototype from google. Their caching is better than mine and they can afford the bandwidth. It is not minimised or anything, but you might catch a break and someone with a primed cache will come to your board.

Your other primary use of js is in showthread and forumdisplay. Depending on the viewing user different js will load. A guest does not see the inline edit js on forumdisplay, but a user does. If a user is not logged in, then they need to log in - etc - the js is in the cache, we don't care...If they are already logged in on arrival then they have the js in the cache - we still don't care.

This led me to conclude that chasing the js outside the index page was a red herring and that I would be better off working on my caching strategy. Euantor posted a pretty good htaccess file - I will see if I can find it.

thank you Leefish for the support.

(2012-07-18, 11:41 PM)Leefish Wrote: [ -> ]Their caching is better than mine and they can afford the bandwidth.

lol well said