How to speed up page rendering

In website, speed up page rendering is very important factor. Because if our page speed is fast then visitors can visit more pages on our site and can take a glance easily. We have to make our web pages fast but it’s not easy to optimize web pages at each and every scale. There are many factors that can slow down our web page speed. We are pointing out here some of the factors and some tips to achieve them.

1. Reduce server response time:

Server Response time is impacted by many factors but overall for this, we have to regular monitor and measure where our server is spending the most time.

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

In websites, some of the content on our pages could be rendered without waiting for the resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

The major component of download time is not the base HTML file itself, but the number of subsequent HTTP requests to load the page’s supporting files – CSS, JavaScript, images, etc. Each of those are extra HTTP requests, and each unique request takes a relatively long time.

The fewer requests to the server that the browser has to make, the faster the page will load.

There is an inherent overhead in each HTTP request. It takes substantially less time to serve one 60K file than it does three 20K files and a lot less than it does six 10K files.

Best way is that we have to

• Render JavaScript in the footer instead of header
• Render only those JavaScript files which is being used only on the page. No need to render unnecessary files.
• Combine and minimize the JavaScript and CSS files for faster loading
• Include small code to inline codes

 3. Compressing the files:

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

There are plugin in WordPress which do the same thing like W3 Total Cache, WP Super Cache, which gives the option to compress the files.

Some Apache servers have this module already enabled (previously mod_gzip a 3rd party module in Apache 1, and now built-in in Apache 2 as mod_deflate)

In Apache, we can achieve the same by including below given code in .htaccss file:

In these given types, we can add or remove the mime type which is creating us problem.

4. Leverage browser caching:

If we set an expiry date or a maximum age in the HTTP headers for static resources, it instructs the browser to load previously downloaded resources from local disk rather than over the network. Means if we load the data from local disk than from the server, it really increases the rendering speed.

In apache, we can achieve this by including few lines of code in .htaccss file:

5. Optimize images:

In most websites, content that has more images, often account for most of the downloaded bytes on a page. The images on the page can be optimized to reduce their file size without significantly impacting their visual quality. So optimizing images can often yield some of the largest byte savings and performance improvements.

The fewer bytes the browser has to download, the less use of client’s bandwidth and the content can be downloaded and rendered on screen more faster. We can get optimized images by using any optimizing tools like Google page speed extension to provide the optimized image.

By using these above given ways of speeding up the page rendering will really helps in your website performance and give us the benefit of coming in search criteria of search engines.