Minify your JavaScript – and save the KB's for later (Imtech JavaScript Minificator – Free Tool)
Development, JavaScript, Performance, Tools, WebdesignRecently I have spent quite some time measuring and tuning the performance of the Imtech SharePoint Enhancement Toolkit: a toolkit that I have built in order to achieve standards compliancy, accessibility and slightly more performance of SharePoint Web Content Management (WCM) solutions.
During my tests I have stumbled upon an article of Robert Nyman about YSlow – a performance measurement Firefox add-in: Improve Your Web Site Performance – Tips & Tricks To Get A Good YSlow Rating. Because the tool presents not only the test results, but also helps you fixing the discovered issues, you should definitely be careful and make educated choices rather than fixing everything on your way. One of the aspects YSlow measures is whether the JavaScript are minified: are all the indents and line breaks removed in order to keep the file size low.
YSlow suggests two services which can minify your JavaScript: JSMin and (of course) YUI Compressor by Yahoo. Both tools are command-line tools, which minify whole JS files. YUI Compressor provides you an option to minify the CSS files as well.
While you could just minify all your JS files manually in every WCM project you're working on, I'd rather have it done automatically so I could work with human readable files in the development and serve them minified to the visitors. That's when the problems start.
Not every JavaScript file can be minified. In order to minify a JavaScript file (or script) each line has to end either with an operator or semicolon. Having implemented the JavaScript minifier in the Imtech SharePoint Performance Toolkit I have discovered that the SharePoint JavaScript files don't support it. And it's a pity, because having the SharePoint JS files would spare about 10%-15% (about 30KB) per file!
Looking on the Internet for a Windows App which would help me minify my JavaScript files I have stumbled upon the JavaScript Minifier – a utility by Rick Strahl.
It's a really great tool. It allows you to either minify a single JavaScript file or a complete directory. However, while using it, I have found out that I would like to have the ability to paste JavaScript scripts and have them minified as well.
I have put the missing functionality into the Imtech JavaScript Minificator. Both tools work using the JavaScriptMinifier class by Douglas Crockford.
Imtech JavaScript Minificator is a free utility and you can use it without any restrictions.
Download: Imtech JavaScript Minificator v1.0.0.0 (31KB)
June 7th, 2008 at 5:15 am
We're developing a tool that works at runtime to minify JS and a bunch of other stuff – this means you don't have to change your source code and resources during development.
See http://www.runtimepageoptimizer.com
This is designed for Microsoft ASP.NET intranet/internet websites, with a free download.
It compresses, caches and combines resources in a webpage to speed up a website 2x to 4x
Ed Robinson
CEO
ActionThis Limited
ed.robinson@actionthis.com
June 9th, 2008 at 8:24 am
I think you dont need to change the resources in development Robinson, you can just rename the file and upload that on server and it should be working fine.
Nawaz Ali
June 13th, 2008 at 4:55 am
Anytime you change a resource and upload it – this adds extra development effort, and means your source code (and development testing) is different than what is in production.
This is why we figure doing it all automatically at runtime with the runtime page optimizer is the right approach.
What does everyone else think?
Ed
June 13th, 2008 at 6:21 am
Personally I would integrate it in the build process: it's not like you change JavaScript and CSS files each day or directly in the production environment. If you care for structured and repeatable deployment, you would like to have each change documented and deployed. Therefore integrating minification in the MSBuild tasks would be my preferable approach.
June 13th, 2008 at 10:19 am
Either way works well. The challenge for us all is so many sites are sluggish and could be improved easily.
The real test is: what performance improvement does the ImTech minifier give SharePoint sites?
I can post performance examples for the RPO – but I don't want to fill your blog up with unsolicited advertising!
June 13th, 2008 at 8:00 pm
What Imtech JS Minificator does is that is removes any overhead characters from the JavaScript files. These files can be further improved by using standard available features like content compression and caching (both server and client).
June 13th, 2008 at 9:34 pm
These are good ideas, but the real performance improvements come from minimizing latency and network travel time – combining requests or using a CDN.
Try this: compare the speed of this homepage. One URL returns the page with the RPO turned on, the other with it off:
http://runtimepageoptimizer.com/?rpo=on
http://runtimepageoptimizer.com/?rpo=off
Use Firefox/Firebug to see the effect on the page resources. BTW: This is hosted in New Zealand – 12,000 miles away from you.
Ed
ed.robinson@actionthis.com