How to Reduce the Number of HTTP Requests
Introduction
Nowadays, it is not very hard to launch a website. There are cheap hosting packages available, numerous free high-quality designs, and with the help of many free tutorials, a website can be set within a couple of minutes. On the other hand, every web developer knows that this is not enough.
For example, if a website loads slowly, requires minutes to download the images, it is very likely that visitor will skip that website next time. In other words, speed is a very important part of every website. Naturally, speed can be achieved by purchasing a more expensive hosting package that can chew large amounts of data. However, why would someone pay for something, if almost the same result can be achieved for free with a reduction of the number of HTTP requests a website must process.
What Are HTTP Requests?
Each time a website calls a server in order to get a certain piece of information or data, some sort of HTTP Request is performed. For example, every time a website requests a CSS file, JavaScript function, PHP function, etc., a server receives a separate HTTP request. Furthermore, a server processes a request and returns the data. In order to minimize the number of HTTP requests, there are some tips that can be easily applied to any website.
Tip #1: Elimination of Unnecessary Files
This is a very common case; images, different files, libraries, etc., are preloaded on a specific page, while they are not used on that page at all. In other words, a website downloads files, which are not required at all. As a result, speed performance is degraded and very often a viewer can see the complete website, while the web browser is still downloading “something.” The solution for this is obvious; a developer should check the code and eliminate any useless preload functions.
Tip #2: Consolidation of CSS Files
If using several plugins on a website, many of them certainly have their own CSS files. Therefore, a website might be calling several CSS files on each load, and as a result, several HTTP requests are performed. The idea is obvious; first of all, by viewing the source code, it can be checked how many CSS files there are, and what their locations are. Furthermore, all these CSS files can be linked in one main CSS file, but a developer must be careful here, as some plugins might use the same class names.
Tip #3: Consolidation of JavaScript Files
The same method described in the previous paragraph can be applied to JavaScript files, although a developer should be a bit more careful, as the order of JavaScript appearance must not be disturbed.
Tip #4: Use of CSS Sprites
The use of CSS Sprites is a very popular method and the subject of many HTTP request reduction tutorials. If a theme is using a large number of images, consequently there are many HTTP requests that must be performed. So, the idea is to combine as many images as possible into one image. It is not easy to achieve this, though, but with a little practice (and imagination), the CSS Sprite method can cut off numerous HTTP requests.
Tip #5: Optimization of Images
The last tip, but not the least important, concerns images. Although this does not concern HTTP requests directly, it is important to mention it here, since images are the crucial factor responsible for bad website load rates.
People often put hundreds of images on their website, but it is very often the case, though, that these images are not optimized for the web. In other words, these images are put there directly from a digital camera, mobile phone or from some other device in their full dimensions and sizes. Image optimization refers to the process where these images are resized and transformed into some of the popular image formats, such as PNG or JPG and as such, they are ready for web. As a result, images taken directly from some device can be up to 3MB or more in size, while when optimized for the web, great quality can be achieved in only 300KB.
