February 28, 2014

How to minimize HTTP requests

What is an HTTP request?

Most of the loading time of a website consists of downloading all the necessary components to show the website. Every HTML, CSS, Javascript and image file has to be requested from the server. This request made by the browser is called an HTTP request.

Why you should minimize the amount of HTTP requests

Every single HTTP request adds a little bit of time to the loading time of your website. Reducing the amount of HTTP requests is very beneficial for your users because they have to wait less longer to see your website. This increases their satisfaction which can potentially increase their usage metrics such as time on site and pages visited.

How to reduce the amount of HTTP requests

There are several ways to decrease the amount of HTTP requests on your website.
Let’s run through them one at a time.

Only include files you need on a page

A lot of websites load in all of their CSS and Javascript files on every single page of their website. Even when these files are not needed on the page. Make sure you only load the files you need on any given page.

Combine CSS files

If you use several CSS files you could ty combining them into a single CSS file. This decreases the amount of HTTP requests made but increases the file of the CSS file. Try not to load CSS that isn’t actually used on a page.

Combine Javascript files

Same rules apply to Javascript files as to CSS files. Try to combine Javascript files so there are fewer HTTP requests, but try not to load Javascript code that isnt’ actually used on the page.

Reduce the number of images

Always be careful when using images. They often take up most of the loading times.

Remove unnecessary images from the page

If it’s possible to remove images from the page that aren’t needed that would improve the performance of your page. Most of the time you don’t have any images on the page that you want to leave off.

Use CSS instead of images

The amount of things you can do with CSS has increased dramatically over the years. A lot of things which used to be done with images can now be done instantly with some CSS code. For example, rounded corners used to be done by adding images at the corners. Now you just use a simple CSS rule:

border-radius: 10px;

and you have beautiful rounded corners. This decreases the amount of HTTP requests and the amount of images.

Use CSS sprites

You can combine your background images into a CSS sprite. This way you can put all of your background images into a single file and by doing this you reduce the amount of HTTP requests. Depending on the amount of background images you use on your website this can save you a lot of loading time. More information about CSS sprites and image optimization can be found in this article.

Use browser caching

You can direct a users browser to keep a local copy of your static files on the hard drive. This way they don’t have to be downloaded again when the user revisits the page or when they visit another page on your website. More information can be found in this article

Minimize redirects

Each redirect that has to be performed triggers an HTTP request. Whenever possible try to avoid using redirects. A good way to prevent redirects is by adding a trailing slash at the end of a URL without file extension. Check out this article for more information.

Wesley Smits