Javascript optimisation

← Ask a Question — Started 10 Jul, 2011

I have been doing a lot of work on my forum - but I load a heck of a lot of javascript, and I know its slowing the site down Sad

Things I have tried are:

Loading Prototype, Scriptaculous and jQuery from the google cdn
Gzipping the javascript - I have the gzip module installed on my server and I have my MYBB Gzip settings at 4
Trying to only load on demand - I have the MYBB shadowbox conversion - I love it - but its loading 5 files per page load.

I found this on the web Require.js and I wondered if anyone here had experience of using it?
[Image: leelink.gif]
You've forgotten the "http" for jQuery and Scriptaculous in your headerinclude file. Smile

I'll be honest and say there isn't much you can do in terms of javascript optimization, just to ensure that it is correct and that there are no errors (as errors traditionally slow down the script).

Most of the things you can do with jQuery you can do with Prototype/Scriptaculous. I explained the difference and it pretty much beats all jQuery arguments. If someone says they just know jQuery better, that's their loss. I know you have things like sortable tables and other fancy stuff, but honestly, keep it to a minimum. Loading two massive libraries is the first problem.

Require looks good though. I'll have a look into it too - let me know what you think!
leesester
11 Jul, 2011, 12:31 pm (This post was last modified: 11 Jul, 2011 12:40 pm by leesester.)
(11 Jul, 2011 8:38 am)Tomm Wrote:  You've forgotten the "http" for jQuery and Scriptaculous in your headerinclude file. Smile

Well, I did the http thing based on this blog entry:

http://blog.jonathanoliver.com/2010/09/h...oogle-cdn/

He seems to be saying that with the http: missing then you get the cached versions of either http or https. Seemed like a small win, but are you saying its actually slowing things down?

(11 Jul, 2011 8:38 am)Tomm Wrote:  I'll be honest and say there isn't much you can do in terms of javascript optimization, just to ensure that it is correct and that there are no errors (as errors traditionally slow down the script).

Most of the things you can do with jQuery you can do with Prototype/Scriptaculous. I explained the difference and it pretty much beats all jQuery arguments. If someone says they just know jQuery better, that's their loss. I know you have things like sortable tables and other fancy stuff, but honestly, keep it to a minimum. Loading two massive libraries is the first problem.

Require looks good though. I'll have a look into it too - let me know what you think!


Yes - jQuery is a devil - we don't need it, but the prototype tutorials page is a bugger to understand (for me). There are very few actual examples and it assumes a level of skill in javascript that I don't have. jQuery on the other hand seems to have a much lower entry bar. I am working on my jQuery slider panel again, hoping to replace it with a Prototype/Scriptaculous version, as it is daft to have jQuery load on the front page JUST for a sliding panel.

I will keep the sorting tables (I love how it doesn't jump to the top on the sort you see), but only on those three pages, all of which are fairly quiet pages in terms of traffic.

Now to find a pretty prototype datepicker Smile

THIS looks nice http://www.frequency-decoder.com/demo/date-picker-v4/
[Image: leelink.gif]
(11 Jul, 2011 12:31 pm)leesester Wrote:  He seems to be saying that with the http: missing then you get the cached versions of either http or https. Seemed like a small win, but are you saying its actually slowing things down?

Extremely trivial to be honest. It won't slow things down, but there's better way to optimize things that that.

(11 Jul, 2011 12:31 pm)leesester Wrote:  THIS looks nice http://www.frequency-decoder.com/demo/date-picker-v4/

That looks hot!

I didn't have a lot of javascript knowledge before I started with MyBB, mine was just HTML and CSS. I found Prototype easier to pick up than jQuery, and although there are more resources for jQuery, it's easy once you've figured out that you never refer to the Prototype documents and just google the how-to.
yes, I found this on the scriptaculous page:

http://madrobby.github.com/scriptaculous/effect-queues/

Looks like what I may need. I think its hard to make new forum owners let go of jQuery and all the cool things a newbie can have with it. It doesn't seems such a big deal at first, and I know I first tried thinking well, can just load the jquery and jquery plugins and pow - awesome pages - just for two more requests.

But requests are not all of it, I think. I am not sure what's best really. That's why I am looking at these loaders to help me with the optimisation. However, I am starting to see jQuery stuffs as the primrose path, and I am looking for replacements. I found a GREATproto/scripty plugin called horinaja - but it does not play nicely with Opera. Its even exploded on his home page, so I am sure its not me Sad

http://horinaja.com/download.php
[Image: leelink.gif]
It seems to work for me? Of course, everyone here runs Opera. Tongue

That looks very cool, and even less coding in Scriptaculous. I've been playing with Scripty2. I can't wait for hardware accelerated animations.
(12 Jul, 2011 8:38 am)Tomm Wrote:  It seems to work for me? Of course, everyone here runs Opera. Tongue

That looks very cool, and even less coding in Scriptaculous. I've been playing with Scripty2. I can't wait for hardware accelerated animations.

Aha. It suffers from the evil "fit to width" thing. I have seen this on a couple of sites - when you have "fit to width" set in Opera then it breaks SOME things. But how can we ensure that users have that set "correctly" - I dont want a pile of smashed potatoes on my front page when folks log on using my favourite browser.....

Also - found this - http://prototools.negko.com/demo/tableorderer/#Usage 9kb minified. Compared to 45 kb(minified) and the whole of jQuery for DataTables. I am gonna try it Smile
[Image: leelink.gif]

User(s) browsing this thread: 1 Guest(s)