Advanced ways to improve page loading speed

With the improvement in technology, the patient have become less. Today, We expect websites to load quickly and find everything in just matter of seconds, regardless of the device and if we have to wait for the website to load, we will leave. So, the slow webiste can cost you money.

In 2006, a report from Amazon says that they speed up their website for every 100 milliseconds, this results in a 1% of increase in revenue. Also according to Google, they rank the search results based on the page speed. 

Since then, there've been thousands of case studies which clearly shows the benefits of having a fast website. In this Blog, I've tried to put together almost every important thing that will help you to improve your website's loading speed. 

First of all, how fast should be your website? Page speed optimizations can be a challenging process. There will be always a room for improvement, so how fast is fast enough?

One way is to use the online websites to find out and even compare your site's loading speed against the other major websites. The aim should be one of the fastest in the bunch.

Another way is to use following guidelines:

The above benchmarks are based on studies showing that 47% of the people expect a web page to load in under 2 seconds and 57% of users will leave the page if it takes 3 or more seconds to load.

So what are the efficient ways to speed up your site? Let's have a look on some of the things that have the biggest impact.

#1 Use a CDN (Content Delivery Network)

 To use a content delivery network to host your media files is one of the best ways to speed up your website and can save you up to 60% of the bandwidth and reduce the number of requests the website makes to halve.

CDNs host your files across a large network of servers around the World. When a visitor visits your site, the files will be downloaded from the server that is closest to the visitor. The Bandwidth is spread over such huge numbers of various servers, so the load on any single server is reduced and your sites are protected from traffic spikes.

#2 Add Expire headers to leverage browser caching

Expires headers tell the browser if the specific file should be requested from the webserver or to use the browser's cache to get a version of a page. This will of course onlu applies if a user already has a version of your web page stored in their cache, so this will be helpful in speeding up your site only for users who have visited your website once.

There are two ways in which expires headers speed up your site. Firstly, the need to download the same files for users from your webserver twice is reduced. Secondly, number of HTTP requests are reduced, which speeds up the time further.

#3 Optimize IMAGES

 Images play a vital role on websites. They allow the visitors to visualize th on-site experience and can help in creating an emotional connection. 

Your website should contain high-quality images to catch the attention, but the images can slow down your site speed. If you aren't displaying them in their original size, then you should scale and optimize them appropriately to reduce the page load time. For example, an image that is 500 x 500 pixels but you are showing it at 100 x 100 pixels, it needs to load 5x more than it should, which affects the load time.

Also, Image dimensions specification helps in improving page speed. By adding a width and height attribute in your img tag for all images allows images to render faster by preventing the need for unnecessary reflows and repaints.

#3 Minify CSS and JS

When you look at the cause of slow page load, clunky Javacript files and CSS are most of the time main reason for the pages being loaded inefficiently. 

There are many ways to minify the files. The first and the efficient way is to squish all of your files into one and instead of calling multiple individual JS files, all your files are simply placed in one file. The second way is to make your files smaller by removing unnecessary lines of codes and white space. 

#4 Link to your stylesheets, don't use @import

More resource are used up by @import than directly linking your stylesheets. The second reason of not using @import is that it is not supported by some old browsers, so it's best to avoid it if possible.

#5 Lazyload Images only when in Viewport

Loading images on websites asynchronously is what we call Lazy loading of images. That is, the images are completely loaded only when they appear in the browser's viewport. This means if the user don't scroll down all the way down, images which are placed at the bottom of the page wont't even be loaded.

Well, lazy loading images indeed helps with website performance, but what's the best approach to use it?

In my opinion, there is no perfect way. If you are a fan of JavaScript, implement it with help of JavaScript otherwise jQuery can also be used. It totally depends on your understanding and the requirements.

You can browse the web for different approaches and start experimenting with them.

#6 Serve resources from a consistent URL

Multiple pages or sites that share same resources, each reference to the same resource must use an identical URL. If multiple pages or sites that link to each other share a same resource, but are hosted on different domains or hostnames, serving the file from a single hostname rather than re-serving it from the hostname of each parent document, would be the better option in this case. In this case, DNS lookup overhead might be outhweighed by the caching benefits. 

So if both firstSite.com and secondSite.com are using the same JS file, and firstSite.com links to secondSite.com (requires a DNS lookup anyway), it makes sense to just serve the JS file from firstSite.com. Due to this, the file is likely to be already in the browse cache when the user goes to secondSite.com.

THANKS