Do you want to make website faster? If you have a slow website then this blog is for you. Let’s discuss how to make the website faster.

A slow website is bad not only for the end-user but also for search engine optimization (SEO), it can cause your website to rank lower in search engine results.

If your website loads just 1 second slow, then you will get:

11% fewer page views

16% down in customer satisfaction

7% fewer conversions (source: Aberdeen Group)

At Habilelabs performance is key for every project we take, We provide web development services for you with keeping high performance in mind.

Here I am sharing quick 5 important steps to speed up your website, these simple steps can improve website speed on any device.

1. Combine all your CSS and JS libraries:

If you are a web developer and want to speeding up your website combine all your css and minify that CSS, also combine all your javascript file and minify that as well, so finally on end user they need to download just a single css and js file. typically, this will reduce the size of the file by 30-90%. If you use jQuery you must be knowing min version, this article will help you to minify your assets offline using grunt.

We have created grunt script for you and these scripts can be easily added to any project visit https://github.com/Ankitdhir/css-minification-js-uglification for scripts. here is sample grunt file code

module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { js: { files: { 'public/dist/combined.js': ['modules/**/*.js'] } } }, concat: { dist: { src: ['modules/**/*.css'], dest: 'public/dist/combined.css' } }, cssmin: { target: { files: [{ src: ['public/dist/combined.css'], dest: 'public/dist/combined.min.css' }] } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['concat','cssmin','uglify:js']); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 module . exports = function ( grunt ) { grunt . initConfig ( { pkg : grunt . file . readJSON ( 'package.json' ) , uglify : { js : { files : { 'public/dist/combined.js' : [ 'modules/**/*.js' ] } } } , concat : { dist : { src : [ 'modules/**/*.css' ] , dest : 'public/dist/combined.css' } } , cssmin : { target : { files : [ { src : [ 'public/dist/combined.css' ] , dest : 'public/dist/combined.min.css' } ] } } } ) ; grunt . loadNpmTasks ( 'grunt-contrib-cssmin' ) ; grunt . loadNpmTasks ( 'grunt-contrib-concat' ) ; grunt . loadNpmTasks ( 'grunt-contrib-uglify' ) ; grunt . registerTask ( 'default' , [ 'concat' , 'cssmin' , 'uglify:js' ] ) ; } ;

This project will help you to create single css and single js files for a production environment. These scripts will run on node environment, please make sure you have installed nodejs from https://nodejs.org/ before using these scripts.

These scripts are completely off-line, so it will also work great in iterative development. These script will works with any web application developed using any programming language (.net, ruby, python, perl, php, node, java, grovey, rails, spring, g++ etc.), After installation of node you can run below commands in project folder

npm install -g grunt npm install -g grunt-cli npm install 1 2 3 npm install - g grunt npm install - g grunt - cli npm install

you can configure this project with your development environment and then you can generate min file whenever you made changes for production just by executing single command

grunt 1 grunt

you can find project specific details on project readme file.

2. Enable compression for your web assets:

Compression of web assets can speed up a website. Most of the modern web browser supports gzip compression, so you can enable compression from server end it will actually reduce bandwidth uses by 60-80%.I am sharing How to enable gzip compression in Apache, Nginx and node.js you can follow as below :

(i) Apache :

Using the .htaccess file for apache, You can use Mod_deflate as it is better documented and easier to configure. If mod_deflate doesn’t work on your server you can use mod_gzip. Not every host has these modules enabled on their servers, so make sure you ask your host about this when the below .htaccess scripts do not work.

Add below scripts to your .htaccess file (which can be found or should be placed in the root folder of your website usually /var/www/html)

To enable mod_deflate:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype # For Olders Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 < IfModule mod_deflate . c > AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE text / javascript AddOutputFilterByType DEFLATE text / xml AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE image / x - icon AddOutputFilterByType DEFLATE image / svg + xml AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / x - javascript AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / x - font AddOutputFilterByType DEFLATE application / x - font - truetype AddOutputFilterByType DEFLATE application / x - font - ttf AddOutputFilterByType DEFLATE application / x - font - otf AddOutputFilterByType DEFLATE application / x - font - opentype AddOutputFilterByType DEFLATE application / vnd . ms - fontobject AddOutputFilterByType DEFLATE font / ttf AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / opentype # For Olders Browsers Which Can't Handle Compression BrowserMatch ^ Mozilla / 4 gzip - only - text / html BrowserMatch ^ Mozilla / 4 \ . 0 [ 678 ] no - gzip BrowserMatch \ bMSIE ! no - gzip ! gzip - only - text / html < / IfModule >

(ii) NGINX :

In Nginx, you can edit host file from sites_available folder and add below script in server section to accomplish compression

gzip on; gzip_http_version 1.1; gzip_vary on; gzip_comp_level 6; gzip_proxied any; gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js; gzip_buffers 16 8k; gzip_disable "MSIE [1-6]\.(?!.*SV1)"; 1 2 3 4 5 6 7 8 gzip on ; gzip_http _ version 1.1 ; gzip_vary on ; gzip_comp _ level 6 ; gzip_proxied any ; gzip_types text / plain text / html text / css application / json application / x - javascript text / xml application / xml application / xml + rss text / javascript application / javascript text / x - js ; gzip _ buffers 16 8k ; gzip _ disable "MSIE [1-6]\.(?!.*SV1)" ;

(iii) Node.js :

In node.js framwork, you can install compression package here is documentation https://github.com/expressjs/compression

3. Cache everything you can Cache:

Caching is really important to make your website faster, you can cache at two places Client side and server side, for client side you can Leverage browser caching and for server side you can cache repetitive db calls, and dynamic HTML pages.

(i) Leverage browser caching:

Browsers don’t need to download assets from the web each time you can just enable cache for assets and on next page browser can use cached assets, to enable cache on reading more

How to Set Up and Configure Basic Caching on NGINX: Use blow script to enable cache

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off; server { ... location / { proxy_cache my_cache; proxy_pass http://my_upstream; } } 1 2 3 4 5 6 7 8 9 10 proxy_cache_path / path / to / cache levels = 1 : 2 keys_zone = my_cache : 10m max_size = 10g inactive = 60m use_temp_path = off ; server { . . . location / { proxy_cache my_cache ; proxy_pass http : //my_upstream; } }

For advance uses refer https://www.nginx.com/blog/nginx-caching-guide/

How to Set Up and Configure Basic Caching on Apache: use below script in .htaccess to enable cache

# ---------------------------------------------------------------------- # | Expires headers | # ---------------------------------------------------------------------- # Serve resources with far-future expires headers. # # (!) If you don't control versioning with filename-based # cache busting, you should consider lowering the cache times # to something like one week. # # https://httpd.apache.org/docs/current/mod/mod_expires.html <ifmodule mod_expires.c=""> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon (cannot be renamed!) and cursor images ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/x-javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" # Manifest files ExpiresByType application/manifest+json "access plus 1 week" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media files ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType image/webp "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web fonts # Embedded OpenType (EOT) ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType font/eot "access plus 1 month" # OpenType ExpiresByType font/opentype "access plus 1 month" # TrueType ExpiresByType application/x-font-ttf "access plus 1 month" # Web Open Font Format (WOFF) 1.0 ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/woff "access plus 1 month" # Web Open Font Format (WOFF) 2.0 </ifmodule> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 # ---------------------------------------------------------------------- # | Expires headers | # ---------------------------------------------------------------------- # Serve resources with far-future expires headers. # # (!) If you don't control versioning with filename-based # cache busting, you should consider lowering the cache times # to something like one week. # # https://httpd.apache.org/docs/current/mod/mod_expires.html < ifmodule mod_expires . c = "" > ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text / css "access plus 1 year" # Data interchange ExpiresByType application / atom + xml "access plus 1 hour" ExpiresByType application / rdf + xml "access plus 1 hour" ExpiresByType application / rss + xml "access plus 1 hour" ExpiresByType application / json "access plus 0 seconds" ExpiresByType application / ld + json "access plus 0 seconds" ExpiresByType application / schema + json "access plus 0 seconds" ExpiresByType application / vnd . geo + json "access plus 0 seconds" ExpiresByType application / xml "access plus 0 seconds" ExpiresByType text / xml "access plus 0 seconds" # Favicon (cannot be renamed!) and cursor images ExpiresByType image / vnd . microsoft . icon "access plus 1 week" ExpiresByType image / x - icon "access plus 1 week" # HTML ExpiresByType text / html "access plus 0 seconds" # JavaScript ExpiresByType application / javascript "access plus 1 year" ExpiresByType application / x - javascript "access plus 1 year" ExpiresByType text / javascript "access plus 1 year" # Manifest files ExpiresByType application / manifest + json "access plus 1 week" ExpiresByType application / x - web - app - manifest + json "access plus 0 seconds" ExpiresByType text / cache - manifest "access plus 0 seconds" # Media files ExpiresByType audio / ogg "access plus 1 month" ExpiresByType image / bmp "access plus 1 month" ExpiresByType image / gif "access plus 1 month" ExpiresByType image / jpeg "access plus 1 month" ExpiresByType image / png "access plus 1 month" ExpiresByType image / svg + xml "access plus 1 month" ExpiresByType image / webp "access plus 1 month" ExpiresByType video / mp4 "access plus 1 month" ExpiresByType video / ogg "access plus 1 month" ExpiresByType video / webm "access plus 1 month" # Web fonts # Embedded OpenType (EOT) ExpiresByType application / vnd . ms - fontobject "access plus 1 month" ExpiresByType font / eot "access plus 1 month" # OpenType ExpiresByType font / opentype "access plus 1 month" # TrueType ExpiresByType application / x - font - ttf "access plus 1 month" # Web Open Font Format (WOFF) 1.0 ExpiresByType application / font - woff "access plus 1 month" ExpiresByType application / x - font - woff "access plus 1 month" ExpiresByType font / woff "access plus 1 month" # Web Open Font Format (WOFF) 2.0 < / ifmodule >

(ii) Server caching:

Caching is a method of improving server performance by allowing commonly requested content to be temporarily stored in a way that allows for faster access. This speed up processing and delivery by cutting out some resource intensive operations. All different web frameworks provide caching.

For example, if your home page is using SQL queries you can cache those results that can save server response time. You can refer your framework for caching to improve website speed.

As an advice keep one thing in mind more you cache more performance you will get so Cache, Cache and Cache

4. Test your website speed with performance monitoring tools:

Google wants your site to be faster and provides a suggestion for how you can make your website faster. One of the best tools Google offers is PageSpeed Insights, where you get detailed insights into what’s causing your current site to be slow.

The best part is that you can get detailed reports and recommendations for both mobile and desktop versions of your site, so you really have no more excuses for presenting a slow site to your clients!

After putting your site’s URL into the field, you get a list of things you should fix for both site speed and the user experience, which, of course, go hand-in-hand. Here is URL https://developers.google.com/speed/pagespeed/insights/

you can also use http://tools.pingdom.com to the major load time of your web page to speeding up your website.

5. Get lazy with lazy loading:

Ever heard of lazy loading? It’s a design pattern that’s characterized by not rendering objects until the point in time that they’re necessary. So, for instance, objects that are below the fold will only begin to load and initialize when users are actually scrolling down the page.

This only-when-necessary design approach means that your site needs to rely on fewer resources, thereby making it faster in performance.

These design patterns play important role in webpage loading and can speed up your website. I am dividing Lazy loading into three steps

Lazy loading javascript: In step First, we have created single java script asset, now that can be load after HTML for this you can load js asynchronously. For loading js asynchronously you need to add an async attribute with the script as below :

<script async src="script.js" ></script> 1 <script async src = "script.js" > </script>

Lazy loading css : Css is a major component of your website its main design of your website but does we need all CSS? Answer is No, at load time you need the only css for first part of visible screen by the time user scroll down we can load remaining css, for this first you need to create minimum required css and add that css inline to your header of website rest single css which we have created in the first step you can load with below code :

<script async type="text/javascript"> var ss = window.document.createElement("link"); var sheets = window.document.styleSheets; ss.rel = "stylesheet"; ss.href = "/dist/combined.min.css"; document.getElementsByTagName('head')[0].insertBefore(ss,document.getElementsByTagName('head')[0].lastChild); </script> 1 2 3 4 5 6 7 <script async type = "text/javascript" > var ss = window . document . createElement ( "link" ) ; var sheets = window . document . styleSheets ; ss . rel = "stylesheet" ; ss . href = "/dist/combined.min.css" ; document . getElementsByTagName ( 'head' ) [ 0 ] . insertBefore ( ss , document . getElementsByTagName ( 'head' ) [ 0 ] . lastChild ) ; </script>

Lazy load Images: If your page contains many images then images are a most heavier component of your web pages, you can lazy load images as below:

For js based site you can use http://dinbror.dk/blog/blazy/

For angular based site you can use https://github.com/Pentiado/angular-lazy-img

For react based site you can use https://www.npmjs.com/package/react-lazy-load

All links above contain detail documentation to use lazy loading of images.

Conclusion:

You can increase web performance (Website loading Speed) by 70-80% using above steps. Some tips are easy to implement but some required technical skills to improve website speed.

Here I have shared quick tips for starting web performance, We at Habilelabs follow good practices to have 100/100 page score in google page speed. If you need a ready made solution you can use Habilelabs node.js based web performance framework to a quick start here is a link to framework https://github.com/habilelabs/nodejsPerformance.

If You have any query you can post in the comment section below, we will surely reply.

I hope you enjoy reading this article “how to make website faster” so don’t forget to share with friends.