When someone visits your website quick loading time on desktops and mobile phones is critical, for two reasons the first one is for good user experience, visitors don't have to wait a lot on first-page loading or between navigation on various pages. Second is the page loading speed is one of the factors that impact the SEO ranking on google. One technique for high-speed page loading is to combine all js files to one and the same goes for the CSS files.

The previous task is possible to achieve by using a task runner like the Gulp, we can installĀ Gulp JS through the nodes js package system the NPM. We will assume that you already have installed it in your computer, the next steps are the installation of gulp.

npm install gulp-cli -g or sudo npm install gulp-cli -g

if you find any problem run the command with sudo

npm install gulp -D or sudo npm install gulp -D

in the top, your project directory create a file a with the name


In CSS directory there three CSS files we want to combine in one, the bootstrap.css, boostrap-theme.css, and main.css for this we have to install all the gulp contcat module andĀ  the gulp order module

npm i gulp-concat-css or sudo npm i gulp-concat-css
npm i gulp-order or sudo npm i gulp-order

in gulp file, we insert the following code

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
var order = require('gulp-order');

gulp.task('css', function(){
        ], { base: __dirname }))

And then in command line run the command

This will combine the three CSS files in one, and will output a new file named all-static.css in directory t this speeding up our website because now the webpage has to load 1 file instead of three and we have 2 fewer HTTP requests in our web server.

You can down the sample files from here to test your self sample files

You can use it to optimize compress the assets to Magento Deployment Process.