Request a Call Back
X
Fields marked with an * are required
5 Quick Steps to Make any Website Super Fast - Habilelabs

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

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

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 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:

(ii) NGINX :

In Nginx, you can edit host file from sites_available folder and add 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 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

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 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 :

  • 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 :

  • 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.

What others say about us

quotes icon

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again."

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!."

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again"

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!"

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu