Naukri Gulf optimizations - using base64 encoded images

Optimization and Performance budgeting is the most focused area @ Naukri Engineering, for better User Experience and more user retention.

Earlier we already have implemented some of the techniques to improve page optimization. You can refer the link to check them out.

Performance Optimization of Web Pages: NaukriGulf &
Optimizing CSS & background images using WebP

Now this time we have implemented and automated base64 encoded technique through grunt for page optimization.

Why did we do that?

We have reduced multiple image request and free our browser resource for downloading other content. Because generally, a web browser can make 6 or above maximum connections per single hostname. For more information, click on the below link to see how many connections per hostname are allowed:

www.browserscope.org

The Performance gained:

We had a background image of 24.6 KB and was taking approx. 50 ms to get downloaded earlier. But after using base64 technique, it eliminated the HTTP overhead of creating a polling request for the background image file.

On the other hand, size of CSS file did get increased by around 20 KB which will still we could afford.

In this approach, Grunt read CSS files and replaced all required image URL’s into base64 image data.

Actual CSS file before using base64 or URI Data:

.br_down {

background: url(../icons/br_down.png);

height: 16px;

width: 16px;

}

CSS file after converting it to base64 or URI Data:

.br_down{

background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA50lEQVR4Xt2MQWqEQBBFK4oLcaEbEQWNuNKFtuABJjeYHCVHyxHmBp0cIWsX3XvFTn0oQoOEYbbz4dHVVf9/ehIty3Jl0gf8KTIETdN0UUo5fvU4jndL4IFXMhcahsEwTtB93/9bghs8nt8E+75/bNtGwszcuq47lWCHm3gIIEtQ27bXpmkM4wRd1/VfCWbsvLtBhnxVVaXKsjSME0xRFIo57eEl0Qt5yvNcHcdx4zGTlcXj/4MgeFvX9ftcIGRZ9solnzzOjK8vDr9ba3/onpIkSeM41owTNHb0iKIoSsMw1AAzPa9+Ab+Vat2gkD80AAAAAElFTkSuQmCC');

height: 16px; width: 16px;

}

Screenshot of Web inspector for background image loading:

So, how did we achieve it ?

We have achieved the above result by automating base64 technique through grunt module called grunt-css-url-embed.

Steps:

Install Package

Install grunt-css-url-embed

In your Gruntfile.js

module.exports = function (grunt) {
grunt.initConfig({
cssUrlEmbed: {
encode: {
options: {
skipUrlsLargerThan: '5 MB'
},
expand: true,
cwd: `src/css',
src: [ '**/*.css' ],
dest: 'gen/css'
}
}
});
grunt.loadNpmTasks('grunt-css-url-embed');
grunt.registerTask('default', ['cssUrlEmbed']);
};

Run Grunt Task

grunt default

And it’s done.

For more options follow the link:

https://www.npmjs.com/package/grunt-css-url-embed

You may have a question in your mind, why not sprite?

You are absolutely right. We also thought that, we could use sprites, but multicolour images and animated GIF images are not the best fit even I would say not a solution for that.

Because If you combine multicolour image files in sprite, the sprite file will get extremely large (because of multicolour or image complexity) and It might take an unacceptably long time to download & use huge bandwidth when the user first visits the page

Stay tuned for more optimization techniques & Please feel free to share your thoughts in the comments below.

Posted in Frontend, Software Development

Tags: base64, page loading, page optimization