One of the techniques that used to optimize a website is to combine all javascript files in one file and minify the code inside this file. The same process applies to css files, so all these kind of files that are called assets of a website, have to be optimized for better user experience and SEO.

As ar result, a browser will make fewer calls for resource requests to the server and furthermore the combined js file will be significantly reduced in size. Immediately users could browse with faster as page loading time will be minimized, this is important if you want to achieve better seo as page speed is a factor in ranking, also a better user experience for those who browsing from mobile devices.

Closure Compiler for combining JS files

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 . For CSS compression you can use the yahoo compressor, 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

Assets in Yii project

Let's see this process in the 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 the 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')

technical optimization of speed of the website it's part of the job a seo consultant as you see before this technique can be done easily in the last phase of yii developent based project.

Of course nowadays with the huge growth of javascript and the npm there are streamline building systems that you can install through npm like gulp.js  . This tool can automate the compression of css and js files and add more functions like tools to solve problems like the above the fold content. If want to optimize a website task runners like gulp is the modern way to go.


Optimizing your website by compressing and combining assets files like css files and javascript client side files is very important for the improvement of user experience especially when someone navigates from mobile phone and improving your seo rankings