A website to load fast on desktop and mobile devices is critical not only for technical SEO but also for a good user experience. The user experience factor is important because visitors don't have to wait a lot on first-page loading or between navigation on various pages. The next reason is that the page loading speed is a factor that impacts SEO ranking on google search.
There are many techniques for optimization but one for high-speed page loading is to combine all js files into one and the same goes for the CSS files, all you need to use is a Task Runner.
What is a Task runner?
Task runner is a small independent program that handles repetitive task such as compression CSS and js files, combining multiple CSS files to one file, also can optimize images, and perform some test coding tasks
Οne popular task runner is the Gulp js
Installing Gulp JS
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
Configure gulp js
in the top, your project directory create a file a with the name
gulpfile.js
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(){
gulp.src('css/**/*.css').pipe(order([
'css/bootstrap.css',
'css/bootstrap-theme.css',
'css/main.css'
], { base: __dirname }))
.pipe(concatCss('all-static.css'))
.pipe(gulp.dest('t/'))
});
gulp.task('default',['css']);
And then in command line run the command
gulp
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
Gulp is a popular tool to manage website assets popular php framework have internal tools to manage taskrunners like laravel elixir for compiling assets witch provides a wrappert to manage gult tasks. Similar task runners or the tools can find frameworks like Yii Asset.
