How to Improve Page Speed of your Website

If the time taken by your website is high, It is a concern that needs to be taken action immediately. This means your website is losing its traffic. And a High Speed Mobile Friendly website gets a good ranking in Search Engines. Google changed it’s way of ranking of websites based on the Mobile Compatibility and the speed of the page loads.

Here are some useful tips you can do to improve page speed of your website

1. Reduce Server Response Time

First and Foremost step to improve page speed is reducing the server response time. It is better to have a response time less than 200ms. This depends on the host provider and how many websites are hosted on the same server in a shared hosting. Larger the number of websites, larger the server response time. So Be careful while choosing your host provider.

2. Reduce HTTP Requests

An Highly attractive design eats up your server’s bandwidth to load all the CSS, Javascript and Image Files. This yields you a slower a page load speed. So better to keep a simple and minimal design with less number of File resources enough to convey the information that your website needs to show your visitor. Lower the resources, Higher the Page Speed.

3. Optimize Images

A common mistake every developer or designer does is that they fail to optimize or compress the image as per requirement of the website. It is better to use the correct size image, instead of using a very big size image and resizing it using CSS. There are many free tools that helps in optimizing the images. If you are using a WordPress website, WP Smush is one of the best plugin we prefer to optimize the image.

4. Minify HTML, Javascript, CSS Files

Habit of Using tabs, spaces, comments in HTML, Javascript and CSS files are more common now. This causes a increase in the file size, resulting in more time to downloading these files. Minifying these files will reduce the respective file’s size and gives improved downloading speed. Better WordPress Minify is a good minifying WordPress plugin which has more than 60000 active installs.

5. Enable Browser Caching

Browser Caching is a technique to instruct the user’s browser to use the same resource files such as CSS, Javascript and Image files for a particular period of time without downloading it everytime, as these files will not be changing frequently. Add the following to .htaccess file in your website’s root folder to enable browser caching.
For Apache Server

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html M3600
    ExpiresByType text/css M3600
    ExpiresByType application/x-javascript M3600
    ExpiresByType image/bmp M3600
    ExpiresByType image/gif M3600
    ExpiresByType image/x-icon M3600
    ExpiresByType image/jpeg M3600
</IfModule>

For NGINX Server

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
        expires 1h;
}

Above codes instruct the browser to hang on the same files for 3600 seconds or 1 hour. For more explanation about Caching, Click here

6. Enable Gzip Compression

It is better to compress the resource files at the server end itself before it is served on the browser side. This would reduce the bandwidth and improve the page speed by a good margin. Add the following to .htaccess file in your website’s root folder to enable compression.
For Apache Server

#Begin gzip and deflate
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>

Gzip Compression on Apache depends on the mod_deflate module to be active.
For NGINX Server

server {
        gzip on;
        gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
    }

Gzip on NGINX depends on its HttpGzipModule.

7. Avoid Inline CSS & Javascripts

A Good Website is the one that has very less number of inline CSS and Javascripts. This could increase the HTML size and which is also causing repititive definition of same style for different elements instead we can define a class in CSS file to define those elements.

8. Eliminate render-blocking JavaScript and CSS in above-the-fold content

You can see this often, If you check your web page speed with Google page speed insights. This is a very simple thing that everyone can do. Just move the CSS files or Javascript files that blocks the web page from loading to the bottom, As the page content loads fast, later the resources that are needed to beautify the page.

9. Use a Content Delivery Network (CDN)

A CDN is a high-performance network of servers across the globe that replicate the static assets of your website and serve them to visitors from the closest POP. Cloudflare is a good & free CDN for better performance website. You can also see this option to connect your website with CDN in some of the Host Provider’s Control Panel.

10. Use Caching to reduce Database Requests

If you are Content Management System Websites, You can utilize the Caching option in order to reduce the number of database requests. This way a HTML version of the page is cached in the server and ready for serving the visitor quickly. WP Super Cache & W3 Total Cache are some preferrable caching plugins that can be used for WordPress Website.

So to Sum Up…

If you are still reading this, You have already crossed one step to improve page speed of your Website. Most of the tips suggested above are easy and Some are difficult. If you feel these things difficult, feel free to hire an experienced Web Developers to Help you speed up your website.
Happy to hear your comments!….

---