Mootools optimization
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.
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.
- MorfiusX
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Mootools optimization
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
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
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?
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.
- MorfiusX
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
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
http://c3ohio.com/index.php/rick-winkle ... la-15.html
- ak4life
- Joomla! Apprentice
- Posts: 11
- Joined: Wed Aug 15, 2007 9:59 pm
- Contact:
Re: Mootools optimization
Nice work on this! It totally blows though that we have to hack the core to disable something that should be optional...
- ak4life
- Joomla! Apprentice
- Posts: 11
- Joined: Wed Aug 15, 2007 9:59 pm
- Contact:
Re: Mootools optimization
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.
I had tried the same approach, but any combination of custom mootools.js I tried broke the admin backend.
- MorfiusX
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
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 wrote: Nice work on this! It totally blows though that we have to hack the core to disable something that should be optional...
- ak4life
- Joomla! Apprentice
- Posts: 11
- Joined: Wed Aug 15, 2007 9:59 pm
- Contact:
Re: Mootools optimization
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
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
I posted a revised bit of code for the template:
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.
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" />
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 12, 2005 6:12 am
Re: Mootools optimization
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);
}
?>
-
- Joomla! Enthusiast
- Posts: 135
- Joined: Fri Oct 12, 2007 12:52 am
Re: Mootools optimization
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 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); } ?>
Last edited by dallen on Fri Feb 01, 2008 6:08 am, edited 1 time in total.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 12, 2005 6:12 am
Re: Mootools optimization
of course, mootools are needed for some effect. If you want use it on your web, must enable mootools.
-
- Joomla! Explorer
- Posts: 343
- Joined: Fri Aug 19, 2005 12:12 pm
- Location: Out of my mind ...sometimes
Re: Mootools optimization
@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 :
or - MorfiusX 's version :
@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.
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>
Code: Select all
<script type="text/javascript" src="/media/system/js/mootoolsnew.js">
</script>
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
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
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.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 :or - MorfiusX 's version :Code: Select all
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/your_template/js/mymootools.js"></script>
@MorfiusXCode: Select all
<script type="text/javascript" src="/media/system/js/mootoolsnew.js"> </script>
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.
And, thank you for the kind words.
Last edited by MorfiusX on Mon Feb 04, 2008 2:07 pm, edited 1 time in total.
-
- Joomla! Explorer
- Posts: 343
- Joined: Fri Aug 19, 2005 12:12 pm
- Location: Out of my mind ...sometimes
Re: Mootools optimization
Code: Select all
var MooTools={version:'1.11'}
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.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 12, 2005 6:12 am
Re: Mootools optimization
@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 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 :or - MorfiusX 's version :Code: Select all
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/your_template/js/mymootools.js"></script>
@MorfiusXCode: Select all
<script type="text/javascript" src="/media/system/js/mootoolsnew.js"> </script>
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.
-
- Joomla! Explorer
- Posts: 343
- Joined: Fri Aug 19, 2005 12:12 pm
- Location: Out of my mind ...sometimes
Re: Mootools optimization
@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
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
- Joomla! Intern
- Posts: 95
- Joined: Wed Sep 26, 2007 10:59 am
- Contact:
Re: Mootools optimization
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.
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.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 12, 2005 6:12 am
Re: Mootools optimization
@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 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
-
- Joomla! Explorer
- Posts: 343
- Joined: Fri Aug 19, 2005 12:12 pm
- Location: Out of my mind ...sometimes
Re: Mootools optimization
@XarlieN
Glad the process led you in the right direction.
Glad the process led you in the right direction.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 12, 2005 6:12 am
Re: Mootools optimization
Thank you, but I don't know where was error. Same procedure, different result now. Maybe some my mistake in stress.ghazal wrote: @XarlieN
Glad the process led you in the right direction.
-
- Joomla! Apprentice
- Posts: 43
- Joined: Sun Jan 20, 2008 3:50 pm
Re: Mootools optimization
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
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
-
- Joomla! Explorer
- Posts: 382
- Joined: Sat Aug 27, 2005 1:14 am
- Contact:
Re: Mootools optimization
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.
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.
-
- Joomla! Intern
- Posts: 66
- Joined: Thu Feb 14, 2008 3:21 am
Re: Mootools optimization
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
- Joomla! Virtuoso
- Posts: 3177
- Joined: Fri Sep 02, 2005 10:06 am
- Location: Solar system - Earth - European Union
Re: Mootools optimization
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 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
former Q&T WorkGroup Joomla member - Italian Translation Team Member
- MorfiusX
- Joomla! Apprentice
- Posts: 46
- Joined: Thu Dec 13, 2007 3:30 pm
- Location: Ohio
- Contact:
Re: Mootools optimization
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 wrote: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 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
- newart
- Joomla! Virtuoso
- Posts: 3177
- Joined: Fri Sep 02, 2005 10:06 am
- Location: Solar system - Earth - European Union
Re: Mootools optimization
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?
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
-
- Joomla! Apprentice
- Posts: 27
- Joined: Sat Feb 02, 2008 6:50 pm
- Contact:
Re: Mootools optimization
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.
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
-
- Joomla! Explorer
- Posts: 343
- Joined: Fri Aug 19, 2005 12:12 pm
- Location: Out of my mind ...sometimes
Re: Mootools optimization
Don't worry too much, your site is loading pretty fast on my side, on FF/Mac.I've been busy trying to reduce the size and increase the load time of my website because it has been absolutely horrifying!
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.
-
- Joomla! Apprentice
- Posts: 27
- Joined: Sat Feb 02, 2008 6:50 pm
- Contact:
Re: Mootools optimization
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.
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
- newart
- Joomla! Virtuoso
- Posts: 3177
- Joined: Fri Sep 02, 2005 10:06 am
- Location: Solar system - Earth - European Union
Re: Mootools optimization
"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...
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