Open source training & tutorials from experienced, passionate people
By A Web Design
The MooTools core library is usually large in size. The uncompressed version is of the complete core library is 101kb in size. This core library contains all functions, routines, classes which are associated with MooTools framework. This really means that the MooTools core library has quite an impact on page load times. Even when it is compressed it still has quite an impact on page load times.
Google uses page load times as an important attribute when assigning a page rank hence the MooTools core library load time has quite an impact on the Google page rank.
All of this points to being able to reduce the size of the MooTools core library. Rather than use the entire library, it would be excellent if only relevant sections of the MooTools core library can be grouped together and a shortened version of the MooTools library created and used. Obviously the shortened version will have lesser functionality than the full version, but as long as all the required web page functionality is available there really in no issues whatsoever. The shortened version of the MooTools core library will be much smaller in size. After compression its size will shrink even further which is excellent.
Using this technique appropriate webpage functionality will be available and the download time for the MooTools (derived) core library will be appreciably shortened. This will have a favorable effect on the webpage’s load times which in turn will reflect favorably in Google’s page rank.
Here’s the Internet’s Request / Response paradigm works.
Whenever a file like http://www.opensourcevarsity.com/index.html, is requested by your browser to a web server. The conversation goes a like this:
Diagram 1
1. Browser: Hey, GET me /index.html
2. Server: Ok, let me see if index.html is lying around with me…
3. Server: Found it! Here’s your response code (200 OK) and I’m sending the file
4. Browser: 100KB? Ouch… waiting, waiting… whew ok, it’s loaded
Of course, the actual headers and protocols exchanged between the Browser and Web server are much more formal (monitor them with Live HTTP Headers if you’re so inclined).
But it worked, and you got the file requested except that it took a ton of time to load in the Browser.
www.websiteoptimization.com is a site that sets benchmarks for several elements of a webpage says that a linked Javascript file should not be larger than 20kb for the great download speeds.
Regretfully, today in an effort to make a visitors experience memorable web pages seem to be filled with fancy things like slide out menu items, that to at multiple levels, Sliders that display various images and other content, larger, complex CSS files and other such exotic stuff. This causes JavaScript files to get larger and larger and thus take longer and longer to load via the Internet. Especially on slow or dial up connections.
It’s not mandatory that your js file should always below 20kb in fact this is often not possible for snazzy websites. It’s fair to have a js file with a 30kb to 35kb size. But the MooTools core library itself is 101kb (that really is too heavy for a js file). The compressed versions of the MooTools core library are above 50kb. Hence there really is a problem with page load times.
The way to fix this is to build a personalized version of the MooTools core library and then compress this to get a core library of a decent size.
Remember in addition to the MooTools core library, there will your own specific js library that will call functions, pass parameters to the MooTools core library to help deliver specific functionality to your webpage. All this really adds up to the js codespec size which in turn can and does adversely effects page load times.
To customize the MooTools core library another question arises. Is it easy or tough?
If you are thinking that, that you will open the MooTools core library file and edit it, i.e. deleting section or sections whose codespec is not required by the web page and keep those sections that are of interest it is not going to be easy because:
So, what’s the trick in customizing the MooTools core library?
This may sound unbelievable but the MooTools website provides a very simple way to personalize the MooTools core library. Regretfully, this facility is all too often overlooked by many coders.
Enter the URL http://www.mootools.net/ in your browser address bar.
The homepage of MooTools core will open in the Browser as shown in diagram 2.
Diagram 2
This option is often overlooked, but it is present in the homepage of MooTools all you have to do is scroll down the page a bit and search for it. Please refer to diagram 3.
Using this option you can personalize the MooTools core as per your requirements in a few minutes. Go to Advanced Download and under this heading you will find a link called build your personalize copy of MooTools as shown in diagram 3. Please click on that link.
Diagram 3
After clicking on this link, a new page will open in the Browser as shown in diagram 4. This page displays a listing of all MooTools components with a description in a fully categorized format.
Categories of Components in this list are:
Diagram 4
Select any of the components listed, by checking the checkboxes on their left ON.
In our case suppose we are only interested in the special effects provided by the MooTools core, check ON only those components required as shown in diagram 5. As the component of desire is selected the classes related to that component are automatically selected.
Diagram 5
To download selected components, scroll down from the page you till you locate a heading called Download Options which is has three compressor options such as:
As shown in diagram 6
Diagram 6
In our case we chose no Compression. You can choose YUI Compressor or JsMin Compression if you wish to obtain a fully compressed MooTools core library.
Click DOWNLOAD the customized MooTools core library file will begin its download to your computer.
This is the quick and simple way of customizing the MooTools core library so that its size reduces considerably which page functionality stays as desired.
Please wait...