Website Optimization Compressing Javascript and Css

  • webtech

One of the techniques that is used to optimize a website is to combine all the javascript files in one file and minify them. The same applies to css files. Optimizing the so called assets of the website is important for usability and seo purposes. The browser will make less calls for resource requests to the server and furthermore the combined js file will be significantly reduced in size. An immediate result would faster loading times of the web application, which is important if you want to achieve good seo results and better user experience, especially for those browsing from mobile devices.

To combine multiple js files and compress them, there is a variety of tools. One of them is the Closure Compiler. It's written in Java, so it's a requirement to have Java installed in your development environment. You can find the compiler in https://developers.google.com/closure/compiler . For CSS compression you can use the yahoo compressor http://yui.github.io/yuicompressor/ Of course we can use these tools individually.

For example to combine 2 js files can be done with following command:

java -jar compiler.jar --js_output_file=all-files.js  jquery.maskedinput.js jquery.jgrowl.js

Let's see this process in context of a yii2 project. Firstly in the project we create a template by pressing the following command:

php yii asset/template assets.php

This will create a file in the root of the project which is the Configuration file for the asset command. After that after you have to set correctly the directory path in @webroot and the url in this file asset.php @web.

We assume that already have download the Closure Compiler, renamed to compiler.jar and put it in same folder as the assets.php. Then we do the same with Yahoo compiler. We rename it to yuicompressor.jar and place it in the same directory. Finally we type:

yii asset assets.php config/assets-prod.php

The css and js will be combined and compressed, and the new configuration will be created with name assets-prod.php in the directory config. Finally in the web config/web.php we have to replace the bundles with the following command:

 'bundles' => require(__DIR__.'/assets-prod.php')   or you can adjust as you want

SaaS software, easy to use platform and interface to setup quickly your eshop .