Top 8 best practices to speed up your website

Today we will go through the best practices to speed up your website

In today’s world, If you think if you develop a website and the work is done then you are wrong. You need to take care of the performance of your website also

If your website taking more than 3 seconds to load then 53% of visits abandoned.

As per google, website speed is a ranking factor for them.

47% of consumers expect websites to load in two seconds or less. And 40% will abandon a page that takes three or more seconds.

So let’s discuss the topics which help you loading the website fast.

Hosting Providers

Even though you created a well-optimized website but your hosting server is not up to the mark then you need to face consequences.

Hosting servers are where the website is hosted. When we hit URL into the browser it first makes a request to a website hosting server (webserver).It should give a response as early as possible. This term also called as TTFB(time to first byte).It Means time taken by the webserver to load the first byte.

If you want to check what is your website TTFB

• Hit website url in browser tab
• right click and inspect element
• In network tab you can check TTFB.

Typically good TTFB speeds are

• 100ms for static content (content that already exists on the sever as files)
• 200-500ms for dynamic content (content that is put together from a database and templates, like WordPress does, for example)

If you are having a WordPress website, Then I personally recommend Siteground hosting. Siteground not only one of the fastest providers it also provides an optimizer tool for the website called SG optimizer which takes care of all the performance things for your website.

It means you no need to install other plugins to the WordPress site. Because unnecessary plugins slow down your website.

Minify javascript, Html and css files

Lower the file size lower time will take to download.But how to reduce size of files because you might have javascript or html file of 1mb obviously it takes time to download. So to decrease the size of file minfication process comes into the picture.

What minification does?

Minification is the process reduce the file size In which unwanted thing in the file get removed like extra spaces, comments etc

So obviously If you have a file with a small size then Initial Load time will reduce.

for eg.

export class Router {
    constructor(routes, routeElement) {
        this.routes = routes;
        this.routeElement = document.getElementById(routeElement);
        this.initialize();
        this.hashChanged();
    }
    getPathAndRouteMapping() {
        const routeMapping = {};
        for (let objKey in this.routes) {
            routeMapping[this.routes[objKey].viewObj.path] = this.routes[objKey].viewObj.url;
        }
        return routeMapping;
    }
    initialize() {
        window.addEventListener('hashchange', (e) => {
            this.hashChanged()
        })
    }
    hashChanged() {
        const locationHash = window.location.hash;
        for (let i = 0; i < this.routes.length; i++) {
            const route = this.routes[i];
            if (route.isActiveRoute(locationHash.substr(1))) {
                this.navigate(route.viewObj.path)
            }
        }
    }
    navigate(path) {
        const pathRouteMapping = this.getPathAndRouteMapping();
        const url = pathRouteMapping[path];
        const xhttp = new XMLHttpRequest();
        let scope = this;
        xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                scope.routeElement.innerHTML = this.responseText;
            }
        };
        xhttp.open('GET', url, true);
        xhttp.send();
    }
}

Above file is unminified version of javascript file where we have unnecessary spaces

export class Router{constructor(t,e){this.routes=t,this.routeElement=document.getElementById(e),this.initialize(),this.hashChanged()}getPathAndRouteMapping(){const t={};for(let e in this.routes)t[this.routes[e].viewObj.path]=this.routes[e].viewObj.url;return t}initialize(){window.addEventListener("hashchange",t=>{this.hashChanged()})}hashChanged(){const t=window.location.hash;for(let e=0;e<this.routes.length;e++){const s=this.routes[e];s.isActiveRoute(t.substr(1))&&this.navigate(s.viewObj.path)}}navigate(t){const e=this.getPathAndRouteMapping()[t],s=new XMLHttpRequest;let i=this;s.onreadystatechange=function(){4===this.readyState&&200===this.status&&(i.routeElement.innerHTML=this.responseText)},s.open("GET",e,!0),s.send()}}

Above code minified version of javascript where unnecessary space and comments are removed.

If you are using WordPress then lots of plugins available for taking care of this process.

For eg. you are using SGOptimizer tool of siteground then you have already option of minimizing code.

As you can see above image options are directly available so it’s easy for the non-technical people.

Defer render-blocking JS files

Sometimes even though we have done minification to the files but still some files takes time to download and which not require for initial loading. In such case we can defer rendering javascript files which is not required at initial phase.

Defer means files will not load until page has been loaded.

<script src="demo_defer.js" defer></script>

In the above eg. we can see we have added a defer keyword to the script. which means this script will load after page load is completed.

For wordpress user, you will find defer render blocking js files feature in Plugin.

It’s readymade thing for the wordpress user. But you should have idea what exactly it does.

GZIP Compression

Gzip compression is a technique in which a web server sends a response in compressed format

For eg.

First let’s take an example without compression

browser makes a request of HTML files. Webserver check the requested file is present or not.If web server finds the file it sends a file to the client means the browser

If request file is of 100 kb then obviously it takes time to download which affects performance optimization.

Now let’s implement compression technique,

• Browser request for file
• web server finds file which is of 100 kb
• Web server before sending file to the server it compress it.Now file size is 30 kb
• Browser got this file and download it and decompress it.

So, gzip compression will help you in minimizing load onto the website

Lazy loading images

Images play a crucial role in any web application. For eg you have 100 images on home page

obviously, even though we compress it download 100 images on the initial level then it becomes a very expensive operation.

So,Lazy loading concept comes into the picture. We only download images that are visible to the user.

Optimizing web fonts

Nowadays for better UX people uses web fonts which leads to http request. So we need to optimzie by reducing http request like combining webfonts file in single file.

If you are a WordPress developer then SGoptimizer plugin will do work for you.

CDN Caching

Content delivery network(CDN) refers to the geographically distributed server which cache website pages, Images in each server.

When you make a request it serves from the neared CDN server which increases website performance.

Minimizing HTTP request

Mainly most of the website performance is low because for every resource in our website browser makes HTTP request which affects website loading.

So what will be the solution for minimizing HTTP request.

we should combine files to reduce HTTP requests like combining CSS files, javascript files, etc.

Conclusion

Nowadays, In the online world, extra one second can cause your business down