Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 8
javascript and css optimization
 
sempsteen
Jr. Member
 
Total Posts:  4
Joined:  2007-09-03
 

hi,
i’ve installed magento just a few minutes ago. first thing i realize that there is a huge amount of javascript and css load. i want to suggest a technique that reduces the size and number of http connections. you gain faster page loads and lower bandwidths. The technique is explained here.
I’ve applied it on one of my sites which has built with a MVC framework too (not Zend). I’ve used a controller to achieve this, you may check it out here: http://www.pcoyun.com/assets/load/javascript/postslist
This resource is 62K total and it has:
- prototype,
- scriptaculous,
- scriptaculous effects,
- scriptaculous dragdrop,
- scriptaculous controls,
- scriptaculous slider,
- lightwindow
- and 2 additional javascript files that is 4.2K total

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Enthusiast
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

Thanks for the info - I’ll pass this on the core team smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jonathan Hedrén
Member
 
Total Posts:  67
Joined:  2007-08-31
Sweden
 

One alternative to decrease javascript file sizes would be to switch framework to jQuery. I personally think jQuery outperforms Prototype on almost every aspect, and then the core file is only about 20kb… smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brandon
Sr. Member
 
Avatar
Total Posts:  76
Joined:  2007-08-31
Web Developer
 
Jonathan Hedrén - 07 September 2007 11:46 AM

One alternative to decrease javascript file sizes would be to switch framework to jQuery. I personally think jQuery outperforms Prototype on almost every aspect, and then the core file is only about 20kb… smile

I agree. I like jQuery a lot more than prototype—not only because of file size but I prefer the functionality better as well.

However, this will be changed in the first template I make anyways.  Magento is not integrated into prototype (well admin is maybe), so people will be free to strip all of the extra overhead out if they wish.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pocket Aces
Jr. Member
 
Total Posts:  3
Joined:  2007-12-23
 

Hi there,
Why not compile the css and javascript ?

BTW, i’m sure you’ve heard this a bit but XHTML/CSS NOT valid, building/developing upon this is a mistake i feel

 
Magento Community Magento Community
Magento Community
Magento Community
 
iblastoff
Sr. Member
 
Total Posts:  252
Joined:  2007-08-31
 
Pocket Aces - 23 December 2007 04:27 PM

Hi there,
Why not compile the css and javascript ?

BTW, i’m sure you’ve heard this a bit but XHTML/CSS NOT valid, building/developing upon this is a mistake i feel

meh. the majority of ‘errors’ on the demo site is just missing alt attributes for images. no big deal.

 
Magento Community Magento Community
Magento Community
Magento Community
 
B00MER
Sr. Member
 
Total Posts:  130
Joined:  2007-12-27
DFW, TX
 
Jonathan Hedrén - 07 September 2007 11:46 AM

One alternative to decrease javascript file sizes would be to switch framework to jQuery. I personally think jQuery outperforms Prototype on almost every aspect, and then the core file is only about 20kb… smile

Better yet, mooTools… http://mootools.net/

Real time Comparison
http://mootools.net/slickspeed/

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

@B00MER: Thanks, nice page, got these final times:

K-Meleon CCF ME 0.06.0:
Prototype 1.6: 124
MooTools 1.2 beta1: 137
JQuery 1.21: 406

Firefox 2.0.0.11 with lots of extensions:
Prototype 1.6:  160
MooTools 1.2 beta1: 180
JQuery 1.21: 429

Safari 3.0.4:
Prototype 1.6:  349
MooTools 1.2 beta1: 60 (impressive)
JQuery 1.21: 171

IE7.0:
Prototype 1.6:  1024 (weird)
MooTools 1.2 beta1: 695
JQuery 1.21: 520

Would be interesting to get YUI stats too

 
Magento Community Magento Community
Magento Community
Magento Community
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

Hi there, my opinion on this matter:

jQuery does look very promising and it’s lighter in size.

But frankly it really doesn’t matter that one is a little bigger than the other, we are talking about a few KB, so the download wont affect much.
On the other hand, the cpu load, the browser support, the cache features, the gzip transfer of your server, ....
This things affect much more, so the Speed test at:

http://mootools.net/slickspeed/

Is more relevant than KB

Now, there are several solutions and considerations, there’s a very wide use of js compressors to reduce the size in order to have “minified/compressed” versions.
It does speed up the download of the page a lot.

Minified: Suppressed comments, line breaks, extra characters, extra spaces, ...
This is what “Packer” does, without the special features (Base62 encode and Shrink variables)

Compressed (what Packer’s special features do): The Minified JS code is compressed and it generates a new JS code, this is indeed smaller most of the times, but this is just playing dumb because with a gzip transfer, the Minified file will be smaller than the Compressed one, and wont have to be processed, because JS compression instead of GZIP compression means:
Load JS > Decompressed file (using JS!) > Load new JS > Use
The time obviously depends on each CPU power, but the thing is simple, you save some KB in exchange for loading time.
Must users have broadband, but not all have Opera 9.52 (the fastest JS browser) and multicore cpus, so Minified is the one.

Packer:
http://dean.edwards.name/packer/

Now, this is taken from Google Code APIs, so it’s GZIPED:

jQuery + jQuery UI
Normal = 30Kb + 63Kb = 93Kb
Minified = 16.5Kb + 40 Kb = 56.5Kb

Now cache: if the file address remains the same and the file hasn’t been modified, the user wont have to download it again, so this overpasses all optimizations.

So cache and gzip transfer affect a lot more, to ensure this, Magento should download the files directly from Google Code API’s instead of hosting them:
http://code.google.com/apis/ajaxlibs/documentation/

This way, not only the user will load them faster, it will be gzipped no matter if the Magento host server doesn’t support this feature, it will save that bandwith fom your server, and it will be cached even across different Magento’s websites.

I personally do like jQuery more and seems more promising to me, although I think jQuery UI is still young, so my vote would be for jQuery, but with some libs developed by Magento, maybe based at a jQuery UI personalized package:
http://ui.jquery.com/download_builder/

I do like MooTools but jQuery is far more popular and supported, at least for now.

jQuery is used by:
Google
Dell
Bank of America
Major League Baseball
Digg
NBC
CBS News
Netflix
Technorati
Mozilla
Wordpress
Drupal

It will be integrated with Expression Engine 2.0
Works faster

For me the choice is obvious.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

Complementing browsers speed, final times:

Opera 9.52 (OMFG!!!!)
MooTools 1.2 = 40
JQuery 1.2.6 = 20
Prototype 1.6.0.2 = 40

Google Chrome 0.2
MooTools 1.2 = 75
JQuery 1.2.6 = 38
Prototype 1.6.0.2 = 210

Firefox 3.1 (beta)
MooTools 1.2 = 75
JQuery 1.2.6 = 71
Prototype 1.6.0.2 = 147

Firefox 3.0.1
MooTools 1.2 = 90
JQuery 1.2.6 = 94
Prototype 1.6.0.2 = 167

Internet Explorer 7.0.57
MooTools 1.2 = 310
JQuery 1.2.6 = 207
Prototype 1.6.0.2 = 1197 (ouch!)

Internet Explorer 6
MooTools 1.2 = 409
JQuery 1.2.6 = 286
Prototype 1.6.0.2 = 1428 (ouch!)

And I hate to admit it, but IE 7 & 6 have like 50.5% of the world’s browsers usage, according to:
http://www.w3schools.com/browsers/browsers_stats.asp

So let’s have some jQuery!

 
Magento Community Magento Community
Magento Community
Magento Community
 
SimpleHelixcom
Enthusiast
 
Avatar
Total Posts:  906
Joined:  2007-08-31
Huntsville, AL
 

Yep, although not too sure about how much of a performance boost it would bring to magento but Jquery’s fluent language is a plain beauty.

And too much compression also causes lag on the client’s computer(if the PC is old) because they have to then uncompress and decode it so I would like the balance of minimal compression in JS.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

Well, running an in depth analysis of a Magento’s webpage load, it takes 3 SECONDS for my webserver to send me the html.
There’s a little weird thing about it, because at first, the GET command receives a “Moved Permanently” response code, to the same address.
Although it doesn’t take more than 200ms, this feels weird.

Secondly, all the JS files took 230Kb:

js/index.php?c=auto&f;=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js

Downloaded in 980ms-1480ms (tryed several times), loaded after another 2300ms or so.

So the php->html and js takes more than 5400ms combined that represents almost all the load time.
The total webpage load, including CSS, images and render, took 6890ms.

So I think JS optimization needs as much attention as PHP optimization

 
Magento Community Magento Community
Magento Community
Magento Community
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

Trying to solve PHP problem, I just changed my PHP config, to use PHP5 FastCGI, and this almost eradicated the problem, now the html part takes 736ms, but JS remains the same.
The total page load turned to be around 4370-5630ms.
Don’t get me wrong tho, this isn’t that great, but is decent speed (for the php part).
I have another webstore, builded with a PHP system, jQuery for front end stuff, I load it from Google Minified version, it takes 266ms to download, 320ms to load.
And I’m using Firefox 3.1 beta, so I would guess IE 7 takes like… double kick (for the JS load part)

Another terrible thing about this JS use is that the command that generates the HTML links does CSS too, so I can’t test it differntly.

<?php echo $this->getCssJsHtml() ?>
And to get worse… The way JS is linked, is not a browser friendly way, when you say:
index.php?c=auto&amp;f=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js
The browser doesn’t see this as a static file, so it WONT cache it, NEVER.
So every pageload means another 230KB download, this is so wrong.

Magento: if you guys want to serve only one file to reduce requests, do it, simply copy+paste everything to one JS, in the order they have to be loaded, and that’s it!
One static JS file, cache possible.

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 
mencargo - 04 September 2008 06:31 AM

The browser doesn’t see this as a static file, so it WONT cache it, NEVER.
So every pageload means another 230KB download, this is so wrong.

Is that true? That really sucks if it is.  I know for a fact that the browser is storing the JS on the hard drive.  It’s in the temporary internet files (Just tested on IE6).  However, the expires date is the exact same as the last accessed date.  I’m wondering if it won’t read the file from cache because it thinks it’s expired.  I attached an image to illustrate.

EDIT:  Ok I’m a dumbass.  The expires date is one year in the future.  I wasn’t paying close enough attention, lol.  So it does appear to be caching it properly.

Image Attachments
cache.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

The browsers always save the incoming files, but cache is a special function, so seeing the file there wont assure that it’s using it for cache.
You can verify this checking the creation or modification date, it should remain the same after you access your site again.
Firefox has a special plugin for this kind of stuff called Firebug, that tells you the access time, download time, loading time, if the file was cached, errors with js, etc…
It’s what I used to get all the time results I posted.
I don’t know if there’s something like this for IE, but you can check it manually with the modify/creation date of the file, if it changes, it’s downloading it again.

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 

I have Firefbug, just not on my laptop.  The keyboard on my PC is dead so I can’t get on there until the replacement arrives tomorrow.  That’s why I was using IE.  I also have the Firefox plugin CacheViewer which would make it easy to figure out if it’s being cached properly or not.  If it truly isn’t caching properly then that is a big problem IMO.  I agree that all of the javascript should be combined into one file, however, it appears that Magento is using some form of “lazy loading”, where only the javascript files necessary for that page are being loaded.  Maybe a possible solution is to do something similar to this: http://aciddrop.com/php-speedy/ I wouldn’t use exactly that, but just have all the javascript files combined, minified, then cached.  So instead of the browser seeing a php file with a big long query string, it would only see just the php file.  I’m assuming it would then cache that properly.  Just something to think about.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 8