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 2 of 8
javascript and css optimization
 
mencargo
Member
 
Total Posts:  45
Joined:  2008-09-03
 

Well, I just found out that there is a total of 105 CSS files, 725Kb, and a total of 103 JS files, 1.14Mb
So this totally blows the option of merging all files in one because:
The first load will take forever
Some visitors don’t have the cache feature on their browsers
By the time they come back, the space available for the cache files has been used, so it has already erased this files.

Minified versions compress them between 25-40%

Solving the cache problem would be a much bigger step.
The HTML and JS files are the only files not cached. (can HTML be?)
And although CSS isn’t a big deal, 400ms average for 5 files (Firefox again, IE will dowload more CSS files and JS files, this should be slower)
I think the best way to improve performance without changes in the code is the same approach they did, but minified and cacheable.
Serve all JS files as one and do the same with CSS, but in a way that the browsers sees them as JS/CSS files, simply check your own site and you will see what I mean.

Try to load the JS file that the PHP script servers, it appears to be a PHP file to any browser.

I think this is what we are looking for:
http://code.google.com/p/minify/

# Combines and minifies multiple CSS or JavaScript files into a single download on the fly
# Uses a PHP implementation of Douglas Crockford’s excellent JSMin library for JavaScript minification and custom classes to minify CSS and HTML
# Caches server-side to avoid doing unnecessary work
# Responds with an HTTP 304 (Not Modified) response when the browser already has the requested content in its cache

So this hopefully avoid the user to download 230Kb of JS each time, and those 230Kb would become 180Kb.
This would be great, but it still wont help solve the JS loading time, just the download, for this I still think the best option is to migrate to jQuery.

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

Well Magento does combine all the javascript files into one.
It doesn’t compress it but if webserver handles the gzip compression of static files, it should compress the javascript in the process as well.

But all in all, I do find the heavy use of javascript in Magento to be a bit of a concern. If Magento was created without the need for any javascript framework, we would have surely seen a lot of increase in speed as well as a slew of user-created javascript plugin effects =)

Perhaps their next demo template can work without using any of the javascript frameworks.

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

Just want to clarify that “minify” isn’t really compression in the strict way, there are ways to compress it but as I explained, it creates a JS function that generates the original code, so you use JS to decompress it, and that takes time, resources and it’s not worth it.
On the other hand Minify

is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute.

So it saves 25-40% of space and it does nothing to the code, so it will be smaller without the need of decompressing it, if you add GZIP transfer to this, you will end with a very small version of the code and the decompression of the GZIP is very simple and fast.

Another thing I noticed is that there are more tan 600 images in GIF format, and

PNG also compresses better than GIF in almost every case (5% to 25% in typical cases)

I say it’s like 20-35% in my experience

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 
mencargo - 04 September 2008 07:26 PM

I think this is what we are looking for:
http://code.google.com/p/minify/

It looks like there is already an extension that uses this: http://www.magentocommerce.com/extension/457/fooman-speedster
No idea how well it works though.

So this hopefully avoid the user to download 230Kb of JS each time, and those 230Kb would become 180Kb.
This would be great, but it still wont help solve the JS loading time, just the download, for this I still think the best option is to migrate to jQuery.

I agree.  I would much rather see jQuery be used.

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

That sounds good, Magento should use that technique instead of their default, seems to work much better, I wont test it now, because I think it can mess up the upgrade procedure, there’s not enough info there.
And jQuery as well, seems to perform much better.
Is there a way to discus with the Magento’s team about their decision of prototype? Maybe they have other reasons behind this.

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

I haven’t tried it either.  The negatives listed kind of worry me, so I’d like to see if something better comes along, or just do my own.  I also prefer YUI compressor over JSMin, which is what that Minify library uses.  Downside is there is no PHP version of YUI that I know of, it’s Java based.  So all of the files would have to be minified by hand, and then redone if/when Varien makes changes to the javascript.

As far as why they chose prototype, I’m guessing that’s just what they are comfortable with.  Plus, they probably made that decision early last year, and jQuery may not have been up to par at the time.  I haven’t personally used either, so I wouldn’t really know.  I did notice that they are using an older version of prototype, and just upgrading to the newest version would probably be a good amount of work.  I’m guessing it’s just not very high on the priority list.  Since all of the javascript is in the templates as far as I can tell, it would be nice if the community came together and developed a template that started out using no javascript whatsoever, and then build in jQuery on top of that.  There is already a group formed to discuss this: http://www.magentocommerce.com/group/view/241/javascript-libraries

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

Well I don’t see any downside of JSMin vs YUI besides that YUI claims higher “compression”, so I will be more than happy to see Minify lib working, as I said earlier, the minify part doesn’t count as much as the cache feature.
And for the “Light Template” I couldn’t agree more, Magento should come without JS, and let the user choose their JS framework from extensions jQuery/Prototype/MooTools.
Anyway, I think the quick solution would be to migrate to jQuery instead of developing a new template, because jQuery has all the functionality Magento is already using so it will be a matter of translating the code, and jQuery files aren’t as messy as prototype+scriptaculous.

@i960: Maybe you can discuss this idea with the group, if jQuery becomes the next step for the group, PM me and I’ll help.

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

My reasons for choosing YUI over JSMin actually has little to do with higher compression.  This blog post explains it better than I can: http://www.zimbrablog.com/blog/archives/2007/12/from-gzip-to-jsmin-to-shrinksafe-to-yui-compressor.html

As long as everything is tested to make sure it works, I don’t see a problem with using JSMin.  Like you said, making sure the files are cached properly is far more important than shaving off a few more bytes.

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

I see your point now…
Well if JSMin has the risk of breaking the code, Magento’s version should be configured to only mess with comments, new lines, and extra white spaces, leave the other stuff intact.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Some JS files that come with default theme (probably modern too) are not used (yet) if you don’t use the feature, so you can actually remove them. Or it won’t matter if they are not being called?

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

I wanted to try working without the JS headers, the function that calls it also calls the CSS, and I don’t know where this takes place and I don’t want to mess with it now.
The other way would be to erase the function and add the CSS and the needed JS’s manually, this could be easy for testing, but right now I don’t have a complete store to check it out with the functions it needs. I think the validation JS will be needed, but maybe the other ones can be skipped.

If anyone has a “complete” store to check this out, it’s easy and safe, just go to:

app\design\frontend\default\default\template\page\html\head.phtml
And change:
<?php echo $this->getCssJsHtml() ?>
To:

<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/magentofolder/skin/frontend/default/default/css/reset.css" media="all"></link>
<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/magentofolder/skin/frontend/default/default/css/boxes.css" media="all"></link>
<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/magentofolder/skin/frontend/default/default/css/clears.css" media="all"></link>
<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/magentofolder/skin/frontend/default/default/css/menu.css" media="all"></link>
<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/magentofolder/skin/frontend/default/default/css/print.css" media="print"></link>

I don’t know exactly which js files will be needed, but this is my guess =P

<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/prototype/prototype.js">
<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/prototype/validation.js">
<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/varien/js.js">
<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/varien/form.js">
<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/varien/menu.js">
<script type="text/javascript\" src="http://www.yoursite.com/magentofolder/js/mage/cookies.js">

Switch back to the php code to find the JS’s it’s importing and experiment.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  889
Joined:  2008-04-28
London, UK
 

Hi guys,

I have tried using Minify to compress the CSS, and while I have finally managed to get CSS to compress, it does not work for all the JS files. The problem seems to be validation.js, which ruins EVERYTHING ;_). It throws fatal errors. It will not even compress with JSmin.

I have tried downloading the original validation.js file from the developer, which works fine, but that one does not seem to agree with Magento, as Varien seem to have changed something.

Any suggestions on how to make this work - as if we fix this, JS goes down from 200kb to about 40kb? Now that’s what I call compression.

Any JS wizards around??

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

@lisali - I did a diff on the original validation.js and the one included with Magento, and there are quite a few changes made.  I’m not a JS expert so I don’t know what the changes are or how to fix them to work with JSMin.  But this is one example of why I don’t like JSMin.  Sometimes it chokes.  I went ahead and compressed validation.js using YUI Compressor and I’ve attached it here.  I’ve elected to leave the comment block at the top, so it’s not quite as small as it otherwise would be, but close enough.

What I may end up doing is compressing all of the javascript files that I know are included in every single page into one large one using YUI Compressor, and then adding it to this thread for anyone who wants to download it.  A good idea would be to version control it so I can easily update it with a newer version if the latest Magento makes any changes.  Something like js-1.1.6.js for the current release.  Then if there are changes to any of the files, I just increment the version number so visitors aren’t loading an old file from cache.  Yes it requires some manual work, but only when there is an updated Magento that makes changes to the JS.  I don’t imagine that would be very frequent.

From what I can gather, these files are loading on every page:

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

Then some of the pages load a few additional files.  It may be best to leave those alone and let them load as needed like they already do, rather than including them within the base javascript file.  I will try to gather a list of other files that are loaded and what page brings them in.

File Attachments
validation-min.js  (File Size: 17KB - Downloads: 316)
 
Magento Community Magento Community
Magento Community
Magento Community
 
lisali
Enthusiast
 
Avatar
Total Posts:  889
Joined:  2008-04-28
London, UK
 

Hi i960,

Yes, I checked the original validation.js too and it differs a LOT from the Magento one. Have no idea what Varien have done, but the original one DOES NOT work with Magento, but it DOES compress properly with both JSmin and Minify 2.1. The modified Magento validation.js WORKS with Magento but DOES NOT compress properly with JSmin, nor does it work with Minify 2.1

Now, I have been testing minify and I like it’s dynamic compression and gzipping. My CSS files have gone down enormously in size. A note on this - one does need to convert all image URLs to absolute for this to work.

With the JS, I have tested all the scripts Magento needs one by one, and the culprit it - yes - validation.js. It gives a fatal error, while everything else is fine. What I would like to do is figure out what the problem with validation.js is so I can let Minify add it to the rest of the scripts.

I also wanted to ask if anyone knows how to embed HTML inside an XML file - as I’d like to add the minify reference to page.xml instead of havving to add it to each of the templates for 1,2 or 3 columns.

Many thanks!

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

Is it possible to download prototype + scriptaculous from google and load validation-min.js from the local folder?
http://code.google.com/apis/ajaxlibs/documentation/index.html#prototype

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