I thought Magento came with this feature out of the box but it doesn't appear to be working at all. I'm not sure if I haven't set it up properly, but right now I'm resorting to using cat and altering the page.xml layout file to use the combined javascript and css files.
Can I make Magento do this instead or is there an extension that adds this feature?
Go to System>Configuration>Developer and alter the settings in the Javascript and CSS settings boxes. Ensure that you have correct Configuration Scope set in the top-left of the page for your website/store.
Make sure that you flush the cache after changing the setting.
P.S. The Fooman Speedster extension will also perform this task.
There is also mod_pagespeed which does this for all output from your server but doesn't hurt Magento while it does it.
There are extensions in Magento Connect like JS/CSS Compression minify or on the web like Compressor.
http://www.magentocommerce.com/magento-connect/catalog/product/view/id/10581
this extension works fine and has improved our site's performances to a considerably higher levels...
Think this might help someone...
install mod_pagespeed by google on server zero configuration for your magento.
Related
I have a wordpress site which works good but has a long average loading time. According to google insights and other benchmarks, my main problem is the JS and CSS code from different plugins installed (like, 40 or so..) but mainly the JS.
Is it possible to combine all the JS into a single file without breaking the entire site and/or plugins? (I need all of them.) Is it also possible to do the same with CSS?
Yes, this is possible, you should use another plugin for that task.
There are several that you can use and it's a matter of personal preference but here are a couple that popped from a quick search.
Merge-Minify-Refresh
"JS & CSS Script Optimizer" is another option.
And probably most popular one.
W3 Total Cache
Yes , You can do it by below plugin.
https://wordpress.org/plugins/w3-total-cache/
Is there a NetBeans plugin to check for unused CSS and JavaScript across a project? I know there are tools such as Dust-Me (for Firefox) to do this online for one page, however I am interesting in perhaps a plugin that can look across multiple files and find unused resources.
Thank you!
I am unaware of any plugin like this written for NetBeans specifically. If you are interested in looking across all the pages in your project, something like Helium is probably as close as it gets.
While not a plugin for your IDE, you load the JS file into your header so it is present in all pages, and it will scan your site and return a list of unused selectors in loaded stylesheets. Hope this helps!
When I make changes to CSS and JavaScript files, my users often have to reload a couple of times to get the changes (obviously to clear out the cache).
I was wondering if someone had a really good experience with a plugin to solve this issue.
I am currently using grails 1.3.7 and I use tomcat for my production environment.
Seems to me that this might be the best option for me.
As you say, the cached-resources plugin is a great option.
You need to install it alongside the resources plugin. Assuming the resources plugin is installed and configured correctly, you don't have to do anything with the cached-resources plugin in order to get it to work correctly. Hence the apparent lack of documentation for the cached-resources plugin. Everything you need to know is linked from the resources plugin.
Is there is way to compress JavaScript code?
e.g.
function test(){
// some code here
}
after compression it should be
function test(){//some code here}
Also, I need vise versa at the time of editing the code.
You can use a javascript minifier.
YUI Compressor
JS Minifier
jsCompress
There are a number of tools available that can reduce the download size of your javascript, improving first-load performance. The general technique of making syntactic changes to your javascript, without changing its structure, is called minification; and the tools are minifiers. I know Google has an excellent tool, as does Yahoo - there are probably others as well. Check the other responses here for links.
For more resources, try this search:
http://www.bing.com/search?q=javascript+minify
Some other things to keep in mind when optimizing your javascript:
You'll want an option to download non-minified javascript, at least on your test site - debugging minified javascript is a major pain.
Configure your web server to also compress (gzip) your javascript if the client includes the appropriate 'accept' header in their request.
Make sure you configure our cache settings for your javascript so that browsers can use their locally cached version without even sending a server request, if the file is already previously downloaded.
Minified Javascript
http://www.google.com/#hl=en&q=minified+javascript&fp=64df356c6a3f8304
http://www.minifyjavascript.com/
http://developer.yahoo.com/yui/compressor/
Good answers, for jquery you have a compressed version, remove the comments in the header to save some octets.
For your own files, use the YUI compressor, i think it's the best.
I would add if you want to save some time, you can also put all your Javascripts files in one, so you will save some precious time with http request (only for production though).
There is already a compressed version of jQuery for you to use. For js you write yourself any of the other tools mentioned will work, I use YUI myself.
A good way to optimize your site is to include one javascript file for all. An article that explains the process of Javascript Bootstrapping can be found here.
Once you use the available compressors above, you should implement this so that your site run quicker.Hopefully this will help.
Use JSMIn its the best.
Is there any way to truncate jQuery?
I need to use only AJAX related methods in jQuery code.
As you might know the minified version is only 55KB and the uncompressed version is about 110KB.
I think the answer to your question is 'probably not'.
But consider these points:
You don't have to serve it on every page request, sensible HTTP response headers should mean it only needs to be downloaded once per client browser.
If you use the Google CDN for jQuery, your client may not need to download it at all, as there is a very good chance they will already have it cached.
i.e.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Using gzip compression it brings it down to 19kb. It's going to be cached from there on out, so I'm not sure why it's an issue. That's far less than most decent sized images.
Using a CDN is also an option if you don't mind someone else hosting your code and your issue is just overall bandwidth.
Is there a reason why you need to make it smaller? Coming in at a size of 55kb is rather insignificant nowadays.
If you need it faster, try having it link off of Google, it's always cached on their server. Look at their documentation here.
You can also try downloading your Javascript files asynchronously.
You can go to an older code base if it suits your needs.
1.2.6 packed is 30KB
1.1.4 compressed is 22KB
You can try to build your own jQuery from source. jQuery is actually cut into little modules and you could try to disable some of them when building your own jQuery.
If you only need AJAX, you may not need DOM manipulation, CSS utilities or animations.
Um, why is jQuery too big? How large are your pages?
What you should be doing is forcing the client to cache it so it's only downloaded once. You do this by setting the Expires header often accompanied with versioning the file so you can force a reload if necessary.
You could manually prune the code but that's probably going to be a huge headache.