Mootools optimization

[MorfiusX]

I have been trying to optimize my site http://c3ohio.com . Using the optimizer at http://www.websiteoptimization.com/services/analyze/, I see that mootools.js is by far the largest file that gets loaded. In fact, it's over half of the size of my page. I have tried to use a custom mootools.js from http://mootools.net/. My page loads fine, but I get a JavaScript error in IE. How can I trace what is causing the error so I make sure to include those functions in the custom mootools.js? Even when I selected all components, the file was only ~40k, while the native 1.5 file size is ~70k. Where are the extra 30k coming from? Thanks!

[MorfiusX]

Well, I've kinda figured it out. I basically removed components one at a time from the file using the custom downloader at Mootools.net.

I have a new question though. Is there anyway to specify a different mootools.js for the template vs the one for the admin site?

[MorfiusX]

I'm pretty sure I have everything working the way I want it. I wrote an article on my site about this. It can be viewed here:
http://c3ohio.com/index.php/rick-winkle ... la-15.html

[ak4life]

Nice work on this! It totally blows though that we have to hack the core to disable something that should be optional... 

[ak4life]

Ok, I misspoke, your approach doesn't hack the core, just the distributed mootools.js.. Still..

I had tried the same approach, but any combination of custom mootools.js I tried broke the admin backend.

[MorfiusX]

Nice work on this! It totally blows though that we have to hack the core to disable something that should be optional... 

Yeah, I agree. That's my only real complaint with 1.5. It would be nice to have the option to enable or disable it.

[ak4life]

Yeah, inclusion of mootools.js, made me go take a look at Drupal again. Base install of Drupal 5.6 with default theme was like 30K. With a Abergreen theme, it was 16K. I shouldn't limit myself to Joomla. Each of the top open source CMS offerings have their pros/cons. Nothing wrong with healthy competition. 

[MorfiusX]

I posted a revised bit of code for the template:

Code: Select all

<?php 
    $user =& JFactory::getUser();

    if ($user->get('guest') == 1) {
        $headerstuff = $this->getHeadData();
        $headerstuff['scripts'] = array();
        $this->setHeadData($headerstuff);
    }
?>
<jdoc:include type="head" />

This will check to see if the user is a guest, if so it will remove both mootools.js and caption.js. Also, this won't effect the admin interface. My site is ~27k right now and I haven't ran into a single error.

[XarlieN]

little tunnig (registered user don't need mootools too) is:

Code: Select all

<?php
// Remove mootool sripts for guest and registered
    $user =& JFactory::getUser();
    if ($user->get('guest') == 1 or $user->usertype == 'Registered') {
        $headerstuff = $this->getHeadData();
        $headerstuff['scripts'] = array();
        $this->setHeadData($headerstuff);
    }
?>

[dallen]

little tunnig (registered user don't need mootools too) is:

Code: Select all

<?php
// Remove mootool sripts for guest and registered
    $user =& JFactory::getUser();
    if ($user->get('guest') == 1 or $user->usertype == 'Registered') {
        $headerstuff = $this->getHeadData();
        $headerstuff['scripts'] = array();
        $this->setHeadData($headerstuff);
    }
?>

I just wanted to chime in with my findings as I tested my site with the code above by adding it to the top of my index.php for my current template, which is ja_purity. The good news is that my site did indeed load faster and the size dropped considerably. Now the bad news is  that AllVideos Reloaded stopped working, well it disappeared from the site. The page still loaded just fine and everything, but the video was MIA. The only other thing that I noticed is that the drop down menus didn't flow down, instead they just appeared. And that was to be expected with the menu as on the backend mootools is one of the menu display choices. But the menu's still functioned properly. Now I only tested this on FireFox 2.0.0.11 and Joomla 1.5 Stable. I read the article on MorfiusX's website about the mootools optimizations (http://c3ohio.com/index.php/rick-winkle ... la-15.html) and making a custom file and maybe I'll look into that at a later date and have Joomla load a much smaller custom file instead of the full deal. But that was my experience with making the modification.

[XarlieN]

of course, mootools are needed for some effect. If you want use it on your web, must enable mootools.

[ghazal]

@dalien
If you read correctly MorfiusX 's post, his goal was to get rid of the mootools library as it is in the distributed package, and use a lighter one instead, not  erase it. So he gave a solution to have it eliminated from the frontend but maintained in the backend.

And I thank him A LOT for this.

Now, as many comp/mod/plugins developers use it, you must add it - modified to your liking  (as he explains on his site) - on the index.php of your template like this for example :

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/your_template/js/mymootools.js"></script>

or - MorfiusX 's version :

Code: Select all

<script type="text/javascript" src="/media/system/js/mootoolsnew.js">
</script>

@MorfiusX
As I said above, Thank you. I wanted to test mootools latest version (1.2) in Joomal 1.5 and this bit of code will be very handy, to say the least.

[MorfiusX]

@dalien
If you read correctly MorfiusX 's post, his goal was to get rid of the mootools library as it is in the distributed package, and use a lighter one instead, not  erase it. So he gave a solution to have it eliminated from the frontend but maintained in the backend.

And I thank him A LOT for this.

Now, as many comp/mod/plugins developers use it, you must add it - modified to your liking  (as he explains on his site) - on the index.php of your template like this for example :

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/your_template/js/mymootools.js"></script>

or - MorfiusX 's version :

Code: Select all

<script type="text/javascript" src="/media/system/js/mootoolsnew.js">
</script>

@MorfiusX
As I said above, Thank you. I wanted to test mootools latest version (1.2) in Joomal 1.5 and this bit of code will be very handy, to say the least.

I wonder what version is included with J1.5? That may explain the difference in size for the full packages between the native J1.5 version and the version available at mootools.net.

And, thank you for the kind words.

[ghazal]

Code: Select all

var MooTools={version:'1.11'} 

as specified at the beginning of mootools.js file in media/system...
mootools version beta-1.2b2 compressed, the latest distributed, is absolutely opposite to what you were looking for, as it "weighs" around 112k. Lets say it's still a beta version, so let's hope for something  lighter.
I dont recommend to use it now as it is often not compatible with older mootools based comp/plugs/mods
But so full of improvements et much easier to work with.

[XarlieN]

@dalien
If you read correctly MorfiusX 's post, his goal was to get rid of the mootools library as it is in the distributed package, and use a lighter one instead, not  erase it. So he gave a solution to have it eliminated from the frontend but maintained in the backend.

And I thank him A LOT for this.

Now, as many comp/mod/plugins developers use it, you must add it - modified to your liking  (as he explains on his site) - on the index.php of your template like this for example :

Code: Select all

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/your_template/js/mymootools.js"></script>

or - MorfiusX 's version :

Code: Select all

<script type="text/javascript" src="/media/system/js/mootoolsnew.js">
</script>

@MorfiusX
As I said above, Thank you. I wanted to test mootools latest version (1.2) in Joomal 1.5 and this bit of code will be very handy, to say the least.

@ghazal: but if you use only your modified mootools, SAVE and CLOSE from frontend editor not work. I try select ALL at web mootools.net, but buttons still not work (must use Joomla mootools)

[ghazal]

@XarlieN
I could not replicate the error you mentionned. It works here. MorfiusX's script installed and my version of Mootools 1.11 compressed, everything selected, 48k.
It could be related to the editor you use (JoomlaFCK for me) or some setting of your template (mine is 1.5 native).
This is the file I use, dld it:
http://rapidshare.com/files/89283335/mo ... 11.js.html

[dkarlovi]

I have this idea for the Mootools issue, if you use the packed version, you can still GZIP it and gain better load times. The idea is to add a mod_rewrite rule in .htaccess for .js and .css files to get rerouted to say /deflate.php. It would then check to see if GZIP is enabled in Joomla. If not, just dump out the file, if yes, GZIP it.

The great part is we wouldn't need to change anything anywhere (well, except .htaccess), the templates request CSS and JS files at their usual places (URIs would remain the same), but they get GZIPed on the way automagically. I know about mod_deflate, this would be a quick fix.

[XarlieN]

@XarlieN
I could not replicate the error you mentionned. It works here. MorfiusX's script installed and my version of Mootools 1.11 compressed, everything selected, 48k.
It could be related to the editor you use (JoomlaFCK for me) or some setting of your template (mine is 1.5 native).
This is the file I use, dld it:
http://rapidshare.com/files/89283335/mo ... 11.js.html

@ghazal: I use standard Joomla 1.5 with default template (or my native template) and default option (default editor). Your version work good. But now work my version too ... some bug on the road maybe :-(

[ghazal]

@XarlieN
Glad the process led you in the right direction.

[XarlieN]

@XarlieN
Glad the process led you in the right direction.

Thank you, but I don't know where was error. Same procedure, different result now. Maybe some my mistake in stress.

[positiveg]

I have tried everythign guys
http://www.nevispages.com
the top banner is to rotate and then i wanted a video on the front page.
And also the SOBI listing module I was using well it had a problem with the add entry in IE I added the fix you guys gave for the header to stop the mootols
well that worked but now the video and rotating won't work at all
I also added the script tag in the template index.pho but that was no success even after I dl a mootols js scrip and uploaded it into the medi system js folder
Anyone else has an more ideas
Why it won't run in IE
and also now why the header totally stop running in FF. thanks
Gawain

[Reind]

That's because the components are using the build in mootools script, when you disable the build in script and it doesnt get loaded your components and modules that are using the build in mootools will stop working.

In my opinion it has an good and an bad side, good side is that all the components that use the build in library have everything they need. The downside is that the script is to big for regular use because more than 50% isn't being used for 98% of the time.

[xombies]

I just wanted to chime in and thank the OP for his both his work and the link to the website optimizer. Much appreciated!

[newart]

I'm pretty sure I have everything working the way I want it. I wrote an article on my site about this. It can be viewed here:
http://c3ohio.com/index.php/rick-winkle ... la-15.html

I've read carefully the article but I don't know what is the right "minimum" mootool file to use (around 20K?) and what's for... if you have a simple template and that file is needed for authors only, well, you can upload only in that specific case. In short, if you know, the small file works for... what?

[MorfiusX]

I'm pretty sure I have everything working the way I want it. I wrote an article on my site about this. It can be viewed here:
http://c3ohio.com/index.php/rick-winkle ... la-15.html

I've read carefully the article but I don't know what is the right "minimum" mootool file to use (around 20K?) and what's for... if you have a simple template and that file is needed for authors only, well, you can upload only in that specific case. In short, if you know, the small file works for... what?

Actually, you may not need it at all. If you also remove caption.js, you probably don't even need the file at all. I found out what I needed by simply adding one component at a time until no more JS errors where encountered.

[newart]

Good news, so you can wipe them out without any problem.

I've avoided them by script and I've replied to a thread for avoiding them by an admin option at http://forum.joomla.org/viewtopic.php?f=500&t=266809

Who is interested to support our idea / need is welcome on the thread. Moreover I think that it should be more flexible a system where you can choose what to load, the full mootools package (as now it is) or only a specific small file for that specific component or feature.... and possibly separating the admin part from the live site, too.

Do you agree, don't you?

[Schizoid21]

Hi,

I've been busy trying to reduce the size and increase the load time of my website because it has been absolutely horrifying! I deleted several css image files, edited many css files (still is a major problem, since my template has over 10 css files...) and I applied caching and compressing wherever possible.

My load time increased, but it's still kinda crap. I have several components installed and legacy enabled, so I think that's a part of the problem... but definitely also this mootools file that's over 100K has been terrorizing me! It's there, being loaded every time and I don't know what I can do with it. Can anyone tell me if it's possible to reduce the file size / replace the file with a smaller file and how? I'm not very smart!

=> this is my slow site: http://www.prohealthblog.com

edit: I just analyzed again and I saw there are 2 mootools loaded. One by me template and one by joomla standard. The size of the mootools.js in my template is unknown, though. I can't find this js file in the said folder either.

[ghazal]

I've been busy trying to reduce the size and increase the load time of my website because it has been absolutely horrifying!

Don't worry too much, your site is loading pretty fast on my side, on FF/Mac.
Re : mootools
with FF comes a very handy extension, https://addons.mozilla.org/en-US/firefox/addon/2076, which gives .js and .css files size, when page is loaded. Whats weird is that the size of one of the mootools file doesn't show on your site's page.
Maybe you should test with the template's mootools file off. It should work, as mootools is loaded by default on J!1.5. Your template has been most probably developed for j!1.0.X (in j!1.5, template_css.css is no more, its template.css), and the developer had to add this file.

Another handy FF extension is YSlow, http://developer.yahoo.com/yslow/, name self explaining.
It comes with Firebug, the absolute must for webdevelopers.

[Schizoid21]

I've seriously decreased my loading time the last 2 days by cutting in my css code and images and now by downloading a new mootool script. I removed the same components as morfius did (I wouldn't know which need to be removed and which I have to keep, so I just did same as he did....) and my file went from 73-> 38kb. So that's definitely a great improvement.

I don't see any problems in backend or frontend so i'm happy :-)

At another time I'll see what I can do to reduce my 10 css files to the minimum.

edit: THX for the Yslow tip. Its so handy! I found out only my index file is compressed by gzip and I could considerably decrease website size by gziping JS and css files. Now I'm trying to gzip my mootools file.

edit2: I managed to gzip my mootools file. There were two methods possible, the first involved htaccess files but this didn't work on my server, the second involved adding a php code before the javascript code. Now my mootools file is about 11000 in size.

Script http://prohealthblog.com/media/system/js/mootools.php 11085 (size) 0.174095 (loading time)

The loading time though, stays about the same speed. So did I gain anything? Maybe people with slow connection did... I don't know.

[newart]

"the second involved adding a php code before the javascript code. Now my mootools file is about 11000 in size"

please post here your code... also if we know the problem would be resolved at the best in a whitepaper forum...