Habilelabs-Logo
Blog

5 Quick Steps to Make any Website Super-Fast

June 27th, 2017 . 9 minutes read
Blog featured image

Do you want to make your 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 speed up your website, combine all your CSS and minify that CSS, also combine all your javascript files and minify them as well. 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 the min version, this article will help you to minify your assets offline using grunt.

We have created a grunt script for you that can be easily added to any project. Here is sample grunt file code

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 node.js from https://nodejs.org/ before using these scripts.

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

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

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 the below script 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:

(ii) NGINX

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

(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 the client-side, you can Leverage browser caching and for the 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 the 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

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

(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 speeds 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 to your framework for caching to improve website speed.

As a piece of 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 an essential 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 a single javascript 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 :

Lazy loading CSS: CSS is a major component of your website, the main design of your website. But do we all need CSS? The answer is ‘No’!

At load time you need the only CSS for the first part of the visible screen by the time user scroll down we can load the remaining CSS, for that you need to create the 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:

  • 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 the 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 the 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 a 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 the framework- https://github.com/habilelabs/nodejsPerformance.

If you have any queries, post them in the comment section below, we will surely reply.

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

Author: ankit
Share: