How to Make Websites Faster?

Websites should rank high not only in appearance and usability, but also in performance. A website that has a high load and processing time will not be popular among users because nobody likes to wait for long periods of time to view a website. Intense competition makes it imperative for websites to score high on performance and efficiency and it is the designers’ responsibility to do everything possible to achieve this goal.

The performance of a website can be broadly categorized into efficiency and processing time. Efficiency deals with scalability and the ability of a website to offer service to millions of users who may access it at the same time. A good case in point is Google.com which is accessed by millions or even billions of people every day. Processing time, on the other hand, is the number of HTTP requests that a page makes and its impact on the speed of the site. In general, the more the requests, the slower the site will be. So the designer should come up with an effective design and architecture that will allow any number of users to access the site without compromising on the speed.

The tips mentioned below can go a long way in improving the performance of a website.

Image optimization

Images are a tricky component of any site because their presence increases the look and feel of the site as well as the response time. Without compromising on the overall attractiveness of the site, designers can work around certain tricks to reduce the response time. One good idea is to use .PNG extensions instead of .GIF because they reduce the size to a considerable extent. Also, they can be optimized by using different tools, such as ImageMagick, Imagetran and PngCrush for better results.

Larger images need more time to load and so designers should keep the images small and adjust their height and width in HTML. Also, images can be compressed using different compression techniques and software. Alternately, multiple images can be combined into one image so that the browser makes only one request to the server. These image-based techniques are sure to boost the performance of the website.

Minimize HTTP requests

HTTP requests are a major culprit of slow sites. It is estimated that 80% of response time is spent on the front end waiting for the components on a page to load. One way to increase the speed is to reduce the components on the page and make the design simple. This will reduce the number of HTTP requests that the web page makes to the server and in turn, this will greatly improve the performance of the site.

There are many techniques to reduce HTTP requests and one of the popular ones is to use combined files. In this case, there is only one file for style sheets and one for scripts. So, only one request is made to the server and this increases the speed. Another technique is using image maps where many images are combined into a single image so that HTTP requests are reduced. Inline images and CSS Sprites are other techniques that can improve the performance of the website.

Keep DNS lookups and DOM elements to a minimum

The Domain Name System (DNS) is a map that connects host-names to IP addresses. So when the user types a host-name, the browser contacts the DNS and retrieves the IP address from it. Only after getting the IP address can browser send requests to the concerned server and download the content. This DNS look up takes anywhere between 20 to 120 ms. Although it’s not significant by itself, when the page makes multiple DNS lookups, it tends to increase the response time. Therefore, it’s a good idea to stick to no more than four unique DNS lookups per site.

DOM elements can also have a negative impact on the site’s performance. When a page has numerous elements, it reduces the speed of DOM access in JavaScript. In other words, when a script has to loop through DOM elements to add an event handler or do some other action, it makes a huge difference when the number of elements are 100 or 1000. When there are 1000 elements, the script has to make 1000 loops and this is sure to affect the response time.

Place your code in the right way

Placing the code in the right place and combining files like style sheets and scripts can increase the performance of the website. It is always a good idea to put the style sheets right at the top of the page. When the style sheets are included in the HEAD of the document, it makes the page to render progressively which means the available components are displayed first while the request to the server is made. This is perfect for websites that have a lot of content and for users who are using a slow internet connection. On the other hand, scripts should be at the bottom of the page because they disable parallel downloading. Despite this advantage, it may not always be possible to put them at the bottom, and in such scenarios one can use deferred scripts.

It’s always a good idea to put JavaScript and CSS as an external file, because they are cached by the browser and so they do not have to be downloaded every time. When the scripts and CSS are inline, then they require a download every time and this can have a big impact on the performance of the website.

Eliminate cookies and filters

Cookies are used to store information about the user and for authentication purposes. Unfortunately, when cookie sizes are large they increase the response time of the site and this makes it slower to load. To prevent these problems, the cookie size should be as small as possible and the designer should remove the unwanted ones. Also, an expiry date should be set to remove outdated cookies from time to time. It’s also a good idea to ensure that the static website components are free of cookies because they do not have any role in the usability of the site.

Filters are another bottleneck because they may prevent the rendering of images. Also, they are unnecessary for the execution of the pages and their presence will only slow down the site, so, it’s best to remove them completely.

Speed testers

Speed testers are a great way to evaluate the performance of a website, because most of them are free and they provide a detailed analysis of the speed of download for the various components in a page. Based on this information it is possible to optimize the pages so that the response time is minimal. It’s a good idea to run the speed diagnostic on different tools so that it’s possible to identify all the big-bandwidth consumers in the web page.

The screen shot shown below is taken from a speed tester called Websiteoptimization.com and shows the response time for different object on the site. Based on this information, the designer can make necessary changes to improve the performance of the site.

In this second example, the tool used is called Pingdom and it analyzes the site page by page so that the designer can make changes to the appropriate pages for best results.

Conclusion

Speed and performance are important attributes of a website and they are the two most important factors that can make or break a site. When a site is slow to load, most users will refrain from using it because of the higher time and bandwidth that it consumes and this, in turn, will reduce its number of users. So a designer should design a site that is appealing to users without having a significant negative impact on its performance. The above-mentioned tips can act as a useful guide for those who are looking to design a site that ranks high in performance.