Mootools optimization

Discussion regarding Joomla! 1.5 Performance issues.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Security and Performance FAQs
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Mootools optimization

Post by MorfiusX » Mon Jan 21, 2008 1:48 pm

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!

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Tue Jan 22, 2008 2:27 am

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?
Last edited by MorfiusX on Tue Jan 22, 2008 2:29 am, edited 1 time in total.

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Thu Jan 24, 2008 4:52 pm

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

User avatar
ak4life
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Aug 15, 2007 9:59 pm
Contact:

Re: Mootools optimization

Post by ak4life » Mon Jan 28, 2008 11:30 pm

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

User avatar
ak4life
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Aug 15, 2007 9:59 pm
Contact:

Re: Mootools optimization

Post by ak4life » Mon Jan 28, 2008 11:35 pm

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.

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Mon Jan 28, 2008 11:35 pm

ak4life wrote: 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.

User avatar
ak4life
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Aug 15, 2007 9:59 pm
Contact:

Re: Mootools optimization

Post by ak4life » Mon Jan 28, 2008 11:43 pm

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.  ;)

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Thu Jan 31, 2008 2:56 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 12, 2005 6:12 am

Re: Mootools optimization

Post by XarlieN » Thu Jan 31, 2008 8:35 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Fri Oct 12, 2007 12:52 am

Re: Mootools optimization

Post by dallen » Fri Feb 01, 2008 6:06 am

XarlieN wrote: 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.
Last edited by dallen on Fri Feb 01, 2008 6:08 am, edited 1 time in total.

XarlieN
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 12, 2005 6:12 am

Re: Mootools optimization

Post by XarlieN » Fri Feb 01, 2008 7:32 am

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

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Mootools optimization

Post by ghazal » Mon Feb 04, 2008 1:48 pm

@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.

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Mon Feb 04, 2008 2:01 pm

ghazal wrote: @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. :)
Last edited by MorfiusX on Mon Feb 04, 2008 2:07 pm, edited 1 time in total.

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Mootools optimization

Post by ghazal » Mon Feb 04, 2008 2:14 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 12, 2005 6:12 am

Re: Mootools optimization

Post by XarlieN » Mon Feb 04, 2008 3:34 pm

ghazal wrote: @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
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Mootools optimization

Post by ghazal » Tue Feb 05, 2008 7:26 am

@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

User avatar
dkarlovi
Joomla! Intern
Joomla! Intern
Posts: 95
Joined: Wed Sep 26, 2007 10:59 am
Contact:

Re: Mootools optimization

Post by dkarlovi » Tue Feb 05, 2008 12:36 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 12, 2005 6:12 am

Re: Mootools optimization

Post by XarlieN » Tue Feb 05, 2008 1:02 pm

ghazal wrote: @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
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Mootools optimization

Post by ghazal » Tue Feb 05, 2008 1:17 pm

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

XarlieN
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 12, 2005 6:12 am

Re: Mootools optimization

Post by XarlieN » Tue Feb 05, 2008 1:30 pm

ghazal wrote: @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
Joomla! Apprentice
Joomla! Apprentice
Posts: 43
Joined: Sun Jan 20, 2008 3:50 pm

Re: Mootools optimization

Post by positiveg » Sun Feb 24, 2008 1:38 am

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
Joomla! Explorer
Joomla! Explorer
Posts: 382
Joined: Sat Aug 27, 2005 1:14 am
Contact:

Re: Mootools optimization

Post by Reind » Fri Feb 29, 2008 12:06 am

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
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Thu Feb 14, 2008 3:21 am

Re: Mootools optimization

Post by xombies » Wed Mar 05, 2008 5:45 pm

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

User avatar
newart
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3177
Joined: Fri Sep 02, 2005 10:06 am
Location: Solar system - Earth - European Union

Re: Mootools optimization

Post by newart » Thu Mar 06, 2008 9:46 am

MorfiusX wrote: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?
former Q&T WorkGroup Joomla member - Italian Translation Team Member

User avatar
MorfiusX
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Thu Dec 13, 2007 3:30 pm
Location: Ohio
Contact:

Re: Mootools optimization

Post by MorfiusX » Thu Mar 06, 2008 1:28 pm

newart wrote:
MorfiusX wrote: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.

User avatar
newart
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3177
Joined: Fri Sep 02, 2005 10:06 am
Location: Solar system - Earth - European Union

Re: Mootools optimization

Post by newart » Fri Mar 07, 2008 7:26 am

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?
former Q&T WorkGroup Joomla member - Italian Translation Team Member

Schizoid21
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Sat Feb 02, 2008 6:50 pm
Contact:

Re: Mootools optimization

Post by Schizoid21 » Sun Mar 09, 2008 7:00 pm

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. ???
Teaching myself a Healthy Lifestyle: http://www.prohealthblog.com

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Mootools optimization

Post by ghazal » Sun Mar 09, 2008 7:47 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Sat Feb 02, 2008 6:50 pm
Contact:

Re: Mootools optimization

Post by Schizoid21 » Sun Mar 09, 2008 8:23 pm

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.
Teaching myself a Healthy Lifestyle: http://www.prohealthblog.com

User avatar
newart
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3177
Joined: Fri Sep 02, 2005 10:06 am
Location: Solar system - Earth - European Union

Re: Mootools optimization

Post by newart » Mon Mar 10, 2008 1:49 pm

"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... ;)
former Q&T WorkGroup Joomla member - Italian Translation Team Member


Locked

Return to “Performance - Joomla! 1.5”