Kickass your website front-end speed

The bounce rate on your website is directly proportional to the speed of your website; for that fact the conversion depends a lot on your website speed. If your website takes one extra second to load the important content people will leave your website and move to another one, especially on mobile devices which contributes to almost the half of the traffic nowadays.

How can I check what needs to be fix?

There are various tools you can leverage on to get insights about your website quality and speed. But I trust you won’t need anymore than these two:

• Google PageSpeed insights (https://goo.gl/KfeGcF) gives you whole lot of things you can optimise on your website. We will cover the one that counts the most.

• Google Chrome developer tools Google chrome provides a fantastic tool to monitor & analyse the speed and resource request lifecycle.
  Hint: Look under Network and Timeline tabs

Most important problems that these monitoring tools will point out are:

• Asset minification
• HTML minification
• Image Optimisation
• Slow image downloads

Asset Minification

One of the most practical and easy to implement solution is to minify all the assets (CSS and JS) to decrease the size of data the browser needs to download. One of the efficient way to automate this process is by writing a gulp task which would looks something like this:

var gulp = require('gulp');
var concat = require('gulp-concat');
var minify = require('gulp-minify');
var cleanCss = require('gulp-clean-css');

gulp.task('css-task', function () {
    return gulp.src(['resources/js/lib/*.js', 'resources/js/main.js'])
        .pipe(concat('complete.js'))
        .pipe(minify())
        .pipe(gulp.dest('public/build/js'));
});

gulp.task('js-task', function () {
    return gulp.src(['resources/css/style1.css', 'assets/css/style2.css'])
        .pipe(concat('stylesheet.css'))
        .pipe(cleanCss())
   .pipe(gulp.dest('public/build/css'));
});

gulp.task('default', ['css-task', 'js-task']);

Learn more about setting up gulp tasks here: http://gulpjs.com/

HTML minification

While there are many ways to minify the HTML, from using online apps to writing your own. It depends upon the platform the application is built upon. If you can use Node platform then one of the recommended package by Google itself is kangax/html-minifier which provides highly configurable environment for minifying html.

Another way I would recommend will be to write your own minifier that would essentially run as a middleware that collects the final response and minify it and responds to the browser, which simply is a string manipulation program to filters out unnecessary spaces and tabs which can considerably decrease the size of the html. Something like this in PHP:

preg_replace('/\s+/S', " ", $response->getContent());

Figure 1. left: before html minification, right: after html minification_

Image Optimisation

Optimising images is the most important part for frontend optimisation as the web is made of more than 64% of images, according to this interesting report.

• Image compression

Images plays an important role in loading a webpage, if the images are not optimised they can degrade the entire website performance. Google pagespeed tool’s recommendations can found here. The main idea is to keep images as compressed as possible.

• Lazy load images

Lazy loading of images can provide a great user experience and speed. This makes the above-the-fold content download much faster practically. One of the recommended library can be found here.

• Image sprites

Loading multiple image files (like icons) in multiple requests is highly discouraged for best practices. The best way is to club them together and download them all in a single request. And access them through the css background-position property. This process can be easily automated via grunt, gulp or node. In nutshell, the spritesheet (concatenated images) are created by a image processing program (most popular ones are compass and ImageMagick). Spritesmith is one of the popular packages available to automate the sprite generation process with grunt, gulp and webpack.

Using CDN for serving assets

A CDN is essentially a network of geographically dispersed servers. Each CDN node (also called Edge Servers) caches the static content of a site like the images, CSS/JS files and other structural components. CDN provides great speed and stability when it comes to serving images over the network. The primary end user benefit CDN provides is high speed. How it does it is by providing the following benefits:

1. High speed servers
2. Low network latency
3. Multiple edge servers