Minifying Text-Based Resources

INTRODUCTION

The third way of optimising the First Paint (FP) and First Contentful Paint (FCP) performance metrics is to minify your text-based resources (CSS and JavaScript files).

To do this, we are going to make use of Gulp Js, a toolkit for automating painful or time-consuming tasks during development.

To use Gulp Js, we have to install it and create the gulpfile.js file.

$ npm install gulp-cli -g
$ npm install gulp -D
$ npx -p touch nodetouch gulpfile.js

After creating our gulpfile.js file, we need to import Gulp to use it

const gulp = require('gulp');

MINIFYING CSS FILES

To minify CSS files, we will be making use of the following Gulp plugin:

• Gulp Clean CSS Plugin

INSTALL GULP CLEAN CSS PLUGIN

To install the gulp-clean-css plugin, we do the following

$ npm install gulp-clean-css --save-dev

USING THE PLUGIN

To actually minify our CSS files, we use the gulp-clean-css plugin which should look like this:

Add gulp-clean-css to gulpfile.js

const cleanCSS = require('gulp-clean-css')

Create the gulp task

Add the following code to your gulpfile.js file

// MINIFY CSS TASK USING `cleanCSS`
gulp.task('minify-css', () => {
    //  provide path to CSS files
    return gulp.src('<PATH_TO_CSS_FILES>')
        //  use cleanCSS plugin on `gulp.src` and
        //  set compatibility for IE 
        .pipe(cleanCSS({ compatibility: '*' }))
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});

MINIFYING/UGLIFYING JAVASCRIPT FILES

To minify JavaScript files, we will be making use of the following Gulp plugin:

• Gulp Uglify Plugin

INSTALL GULP UGLIFY PLUGIN

To install the gulp-uglify plugin, we do the following

$ npm install gulp-uglify --save-dev

USING THE PLUGIN

To actually uglify our JavaScript files, we use the gulp-uglify plugin which should look like this:

Add gulp-uglify to gulpfile.js

const uglify = require('gulp-uglify')

Create the gulp task

Add the following code to your gulpfile.js file

// MINIFY JS TASK USING `uglify`
gulp.task('uglify-js', () => {
    // provide path to Js files
    return gulp.src('<PATH_TO_JS_FILES>')
        //  use uglify plugin on `gulp.src`
        .pipe(uglify())
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});

RUNNING THE GULP TASKS

We make use of Gulp to run a specific task we want to happen to our code. The general format for that is

$ gulp <task_name> 

where <task_name> is the actual name provided for the task.

So, to run the above tasks for minifying our files, we do this:

$ gulp minify-css && gulp uglify-js

We could also run it via NPM by adding the following to the scripts property in a package.json file

{
...
"minify-css": "gulp minify-css",
"uglify-js": "gulp uglify-js",
"minify-files": "gulp minify-css && gulp uglify-js"
...
}

and running them through the npm command

$ npm run minify-css
$ npm run uglify-js
$ npm run minify-files

After all is said and done, our gulpfile.js file should look like this

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');

// MINIFY CSS TASK USING `cleanCSS`
gulp.task('minify-css', () => {
    //  provide path to CSS files
    return gulp.src('<PATH_TO_CSS_FILES>')
        //  use cleanCSS plugin on `gulp.src` and
        //  set compatibility for IE 
        .pipe(cleanCSS({ compatibility: '*' }))
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});

// MINIFY JS TASK USING `uglify`
gulp.task('uglify-js', () => {
    // provide path to Js files
    return gulp.src('<PATH_TO_JS_FILES>')
        //  use uglify plugin on `gulp.src`
        .pipe(uglify())
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});

CONCLUSION

To minimise text-based resources is to speed up load times of websites because it reduces the sizes of our files making the time it takes for the browser to fetch said files significantly shorter.

SOURCES

• Gulpjs.com
• NPM