Make Your Website Load Faster And Increase Page Speed - SEO

By Neeraj Singh | Updated: Dec 25, 2019 | Views: 247
Speed up to make your website faster. Increase page speed for SEO and low bounce rate. Combine and minify CSS, JS and HTML scripts. Defer JS parsing, reduce HTTP requests, deploy CDN.
Is your website sucks and decline to load fast? 
Your are not the only one suffering from slow website speed!

Many websites are suffering from the slow page loading speed. Sometimes from the very beginning or may be after 1 or 2 years of reasonably good performance.

As Google announced that website speed is a ranking factor now, people started to worry more about page speed. For webmasters with little technical skills or background, the problem looks even bigger and involved for them.

You can make your website perform better and faster by implementing few of the steps in this article.

These steps are non-technical and can be adopted by any webmaster. Other steps can boost website speed further up to 10-20X depending on the extent of implementation of the techniques discussed in this article. 

How can you contribute to make your website faster?

Don’t sit idle thinking about hiring someone to do it for you. You can contribute to effectively improve the speed of your website load performance. There are techniques and procedures that can help speed up your website.

You can make your website using direct programming, ready to use CMS framework, website builders and with the help of freelance programmers. In all the above ways - making your website faster involve techniques that are related with server configuration, resource optimization and good selection of hosting plans.

Increase page speed using server configuration

To increase page speed, there are techniques that a non-technical webmaster can use:

Leverage browser and server caching

This is one of the biggest factor that affects your website loading speed. When a site is not using browser caching, the better coded sites can languish. Allow browser to cache static resources viz. images, style sheets, JavaScript files and fonts to achieve faster speed.

Serving files from server cache reducing script execution. This way, you can reduce server response time. This is particularly useful for large websites with high computational requirements.

Enable Compression on static resources

Transmission of higher payload over internet is always a performance bottleneck. You can configure your server for GZIP or deflate compression to minimize the size of HTML, CSS and JavaScript files. When you use HTML compression, the server compresses output before sending it to your browser. Upon receiving the file, the browser decompresses it locally and renders the output. This is a goof technique to make website faster.

Use CDN networks indeed make your website fast

Latency (or the round trip transmission time) increases the download time of a resource. Imagine, you have your host in Singapore and the user visiting your site is from United States. The time to reach the web server and get the result back will be higher that a user browsing the site from India. So the user of USA will have a slower browsing experience than a user in India.

To handle this, you can use the power of CDN networks to load large / static content from the location near the user. There are many companies that offer CDN services. Some of them are Cloud-flare and CDN77.

When you configure your site to load images, CSS and JavaScript files from their network, the resources will be loaded from CDN network servers rather than your web server. It reduces load on your web server while providing faster website experience to its users.


Resource optimization to load website faster

Optimize Images

Always use optimized images and try to use fixed size image size in your website. Re-scaling images by the browser bites you since browser spends more time is estimating the scaling the images to display it properly in the browser. By image optimization, we mean to assert that unless extremely necessary, use web resolution images. We also mean that the width and height of images are not more than required. If you are using b/w image, don’t make it using 16 bit color / 32 bit color spectrum; rather use a maximum up to 256 colors. Optimize as much as possible.

Minify and combine CSS and JavaScript resources

Many a times, many CSS files and JS files are used by a website. As mentioned in point 4, all these files are to be loaded and need connections to the server, which is very expensive in terms of time. So minifying it and bundling together speed up your website many folds.

The tips above help you in generating high loading speeds even if you are hosting your site on a shared server. But, in no way this list is complete. There are many more ways you can achieve it, but the best of them are those which can be controlled and help you in all situations. After implementing these techniques, you can test it using Google Page Speed Insight test to analyze your website's performance metrics.

Use sprite images

Instead of using many images, which is loaded by the browser separately on independent thread, using one collage of images and using different sections of it using CSS background positioning will improve the response. This is because, say for example, loading 5 images will need 5 separate threads and connections and each connection will transfer one image to the browser, but if one image consisting of 5 images are loaded in a single thread, there is only one connection required, which reduces the resource intensive operation of establishing connections and transfer of data.

Avoid render blocking scripts

The CSS, JS and custom font downloads are render blocking. The browser need to build DOM, CSSDOM and custom font display ready before it starts painting (rendering) the view-port area. When they are added in the head segment in HTML script, it will block the rendering until these resources are made available.

Defer JavaScript parsing

There are two methods to defer parsing.
  • Insert JS file references at the end of HTML. This will improve your response time. Since JS parsing is a blocking operation, delayed loading of script improves the visible responsiveness of your page and your viewers will enjoy the agility of your pages.
  • If the script is an external file and not dependent on any other script, add async attribute to the the script tag.
    <script async src='http://example.com/myjs.js'>>/script>
    This attribute will ask browser to load the script in separate independent thread asynchronously and the main thread rendering of will not be obstructed.

Load CSS asynchronously

External CSS file is also render blocking. It block the display of the page until the all CSS files are downloaded and CSSDOM is constructed.

In this case, you can download the CSS file using asynchronously using JavaScript. But downloading CSS files async will allow your page to render quickly but you may experience a flicker in display. The page flicker happens because once the CSS is loaded and bound with DOM, a screen repaint event occurs.

To avoid flicker separate the CSS into "Above the fold CSS" and "Below the fold CSS". Make above the fold CSS internal and embed it at the top of HTML while load below the fold CSS asynchronously.

Since, above the fold CSS is internal, the user will have a smooth experience while having the benefits of asynchronous CSS loading.

Swap custom font loading

Today, most websites use custom font for their design purposes. Custom font is downloaded before being being utilized. Custom font download is a render blocking operation and must be used with fallback font.

There is no standardization for the way of using fallback font across the browser. But with font-face in CSS, you can use font-display attribute to minimize the render blocking with the value "swap".

font-face { font-family:'My Font'; font-display:swap; src:url('https://x.example.com/webfont.woff2') format('woff2'); }
This allows to switch to fallback font if custom font is not available withing 100ms for the page request. This allows other requests to start quickly and hence make your website achieve faster speed index.

Effective programming

Websites may suffer from bad programming and unnecessary codes on the pages. This has a negative impact on the website page speed. To help make website faster, you will need a good programmer for your site. Not only the leaner code helps but integrating the other things like reducing page request, avoiding bad requests, removing unnecessary redirects and database connections can help speed up your website.

Lazy load images

There are sites having lots of images on their pages. This increases the payload manifold makes website slower. Lazy loading of images can speed up websites with large number of images.

Lazy Load: the images are loaded only when they come in the view-port i.e. when user scroll down to the area where images are. Until then, the image download and display is deferred. This reduces the page load and make your website faster.

Avoid code bloats to reduce payloads

Reduce unnecessary HTML codes and scripts from the page that is not used by it. You can remove white-space characters and minify the HTML output. Use short variable names and compact scripts.

Reduce page requests

The number of requests your page make while loading determines if your website speed can be faster. The lesser the number of resource requests, the higher will be the page speed. This happens because, with every request, there is a network latency associated. When you reduce number of requests per page, you reduce network latency and this result in higher page speed.

Avoid page redirects

Page redirect is also like a new request made by the page. This increase the number of requests. Although there is little or no payload associated, the latency does impact the optimum website performance negatively. These extra page requests add-up negatively in speeding up your website.

Change hosting plans

When you exercise most of the tasks above and still not go above 90+ on Google Page Insight (page speed test), consider changing your host or shift to premium hosting plans that allows more hardware resources to your hosting.

Alternatively, you can test your website speed on GTMetixPingdom that also guides you on how to make website faster. 


In Document References:
Improve Website Performance And Loading Speed - No Coding