Compress JavaScript and CSS files to optimize website speed.

Referencing external JavaScript and/or CSS files from a web page considerably increases the load time. As a rule of thumb remember that each external file requires additional HTTP request by the browser, hence the time to render a page will increase. Every web developer worth their salt should make optimization their priority. Fortunately, since this is such a common issue many people have thought about it and came up with solutions.
Below is a list of few of these solutions to optimize your website by compressing JavaScript and CSS files.

But before you start optimizing your website, I recommend that you visit WebSiteOptimization to analyze your website. Save the results and after you are done with your optimization analyze your website again and compare the before and after results. I bet you will be pleasantly surprised.

• Make Your Pages Load Faster
  

  “The idea is that you have one directory for CSS files and one directory for javascript files on your server. If you rewrite the URLs that point to these directories to a small script that intercepts the requests for those files. The script loads the file from disk and compresses it using gzip. It then sends that compressed file back to the browser. Given that JavaScript and CSS files compress really well this will greatly decrease the size of the data that is going to be transferred and thus decrease the time needed to download these files. Because this works completely transparently you do not need to change anything in your existing code.”

• Serving JavaScript Fast
  

  “With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”

• YUI Compressor for JavaScript and CSS
  

  “The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).”

• JSMin- The JavaScript Minifier
  

  “JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.”

• Packer – A JavaScript Compressor
  Online JavaScript Compressor. You can also download PHP, perl and .NET versions of this tool.
• CSS Formatter and Optimiser
  

  CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise. It helps you get smaller CSS file sizes and better written code. The way the optimizer works actually lets you decide how much compression you want. From super compressed (virtually unreadable and editable by a human being) to visually pleasing. I prefer the standard setting because it gives you a little of both.

This is just a sampling of the tools available for optimizing JavaScript and CSS files. This is not an exhaustive list and I am sure you can find many more tools online. The point is to consider optimization when you design and develop your website. If you know any other optimization tool or technique send that to me and I’ll be glad to add that to this list.
Happy optimization!