Quick Performance Gains

May 18th 16

Optimisation is usually the last thing to pay attention to. If however, you already have a separate public folder that you are serving from you might as well get get some performance improvements for a nominal amount of effort.

For a complete overview I would recommend this Yeoman blog post that details various optimisations and there task runner implementations.

Performance Optimisation Tasks

Performance Gains

If you have a slow legacy project or are at a hackathon you don’t want to spend lots of energy configuring your site to be completely optimised.

I have collected my own Grunt and Gulp tasks that do some best guess optimisation on a directory here.

Gruntfile

module.exports = function(grunt) {

        grunt.initConfig({
            imagemin: {
                dist: {
                    files: [{
                        expand: true,
                        cwd: 'public/',
                        src: ['**/*.{png,jpg,gif}'],
                        dest: 'public/'
                    }]
                }
            },
            uglify: {
                dist: {
                    files: {
                        'public/js/main.js': ['public/js/*.js']
                    }
                }
            },
            cssmin: {
                dist: {
                    files: {
                        'public/css/main.css': ['public/css/*.css']
                    }
                }
            },
            htmlmin: {
                dist: {
                    options: {
                        removeComments: true,
                        collapseWhitespace: true
                    },
                    files: [{
                        expand: true,
                        cwd: 'public/',
                        src: ['**/*.html'],
                        dest: 'public/',
                    }, ]
                },
            },
            copy: {
                dist: {
                    files: [{
                        expand: true,
                        cwd: 'test/',
                        src: ['*'],
                        dest: 'public/'
                    }, ]
                }
            },
            clean: ['public']
        });

        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-imagemin');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-htmlmin');
        grunt.loadNpmTasks('grunt-contrib-clean');
        grunt.loadNpmTasks('grunt-contrib-copy');

        grunt.registerTask('build', ['clean', 'copy', 'imagemin', 'uglify', 'cssmin', 'htmlmin']);

    };

Gulpfile

var gulp = require('gulp'),
        htmlmin = require('gulp-htmlmin'),
        imagemin = require('gulp-imagemin'),
        uglify = require('gulp-uglify'),
        minifyCSS = require('gulp-minify-css');

    gulp.task('uglify', function() {
        gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public/'));
    });

    gulp.task('imagemin', function() {
        gulp.src('public/imgs/*')
            .pipe(imagemin())
            .pipe(gulp.dest('public/imgs/'));
    });

    gulp.task('minifyCSS', function() {
        gulp.src('./public/**/*.css')
            .pipe(minifyCSS())
            .pipe(gulp.dest('./public/'));
    });

    gulp.task('htmlmin', function() {
        var opts = {
            comments: false
        };
        gulp.src('./public/**/*.html')
            .pipe(htmlmin(opts))
            .pipe(gulp.dest('./public/'));
    });

    gulp.task('build', ['uglify', 'minifyCSS', 'htmlmin', 'imagemin']);

DigitalOcean Email using Gmail

Next