How to make fewer HTTP requests.


Every time a visitor loads one of your pages, additional supportive files have to be loaded as well, like for instance CSS files, Javascripts, design images, etc.. Every time such a file is requested it creates an additional request for the browser to deal with. We call these requests HTTP requests. Now, knowing that most of the popular browsers allow about 6 parallel connections per domain at the same time you’ll understand that when your site has 6 or more supportive files to load it can already slightly slow your site down. The more requests your site makes, the slower it can get. This is because the browser has to wait for the unloaded files to load until its done with loading the previous files.
If you have too many HTTP requests, you should minimize the amount of supportive files your website loads by loading as less of them as possible. Learn how to do that below:

Check how many HTTP requests your URL makes

You can use the HTTP Requests Checker below to see how many requests your pages make. You can also see which type of requests your page makes (images, css files, etc..):

Combine & inline your CSS scripts

Most website themes today require multiple CSS files (usually in the header or the footer) to load to support the theme. You should combine these files to one large file to minimize the amount of HTTP requests. It’s as simple as opening all the files and copy & pasting their content to one file. An even better option is not using a file for CSS at all, this will help speed up your pages even more. Just put all the CSS code in <style></style> tags and paste it inside the <header></header> (also called inlining CSS)HTML tags on your pages.

Inline small Javascripts

The best way to treat Javascripts when it comes to page speed is to inline them. This is usually only advisable to use with smaller Javascripts though.

Combine all Javascripts

If you can’t inline your Javascripts and your website requires multiple Javascripts to load you should try and copy and paste all the Javascripts to one big .js file and call this bigger Javascript file in the <header></header> tag. Also, keep in mind that it’s always a smart idea to minimize the amount of Javascripts for your site. The more Javascripts your site needs to load, the slower it usually gets. Only load those scripts you really need for your site.

Minimize the use of design & functional images

You should aim to minimize the amount of images used for design or functional reasons, or load only those you really can’t miss. Lots of older, or badly coded designs use images for backgrounds, buttons, borders, hover effects or other design purposes. The same visual effects can usually be achieved by simply using CSS and thereby minimizing the number of HTTP requests. A good free online tool to create various visual CSS effects is CSS3.0 Maker.

CSS image sprites

If you really have to use images for your design you can combine all those images to one bigger file by using CSS sprites. You can then call these images to use in your design by using X and Y coordinates in a CSS script. This way the browser only has to make one HTTP request for multiple images. You can use the CSS Sprites Generator tool to create CSS sprites. Read the documentation on the generator for information how to use the sprites on your website.

Limit the amount of social buttons

Social buttons (Twitter, Facebook, etc..) are a great way for people to share your website with other people. But social buttons can also slow your site down, a lot. Using these buttons add multiple HTTP requests, which can slow your website down significantly. Remove the buttons alltogether if you don’t need them. If you do need them, try to limit the amount of buttons to the most important ones. Also, host your own buttons instead of requesting the files from the domains of the social sites themselves.

Convert images to Base64 code

If you really want to go hardcore you can encode your design images (like your logo) to a Base64 string, which basically means you transform an image file into code. One you have the code you replace the original image tag with this code to display your image. This way you make fewer HTTP requests for the server to handle. You can use the Base64 File Encoder tool for this. Just select the image of your choice and your Base64 image code will be generated automatically.

Still have too many HTTP requests?

If your website has too many HTTP requests coming from the same domain (10+ and above) you should create a subdomain and place some of your files on this subdomain. Subdomains are seen as seperate domains by browsers. Because of this you can load more files at a time(assuming the browser can handle 6 parallel connections per domain) which will speed up your website. Don’t overdo it though, you should never use more as 2 subdomains to serve files as that will actually slow down your website because of too many parallel connections.

Content Delivery Network

If you have a huge amount of files to load like for instance a lot of photos or scripts, you could use a Content Delivery Network (CDN). CDN services provide a network of servers accross different locations all over the world. This makes it possible to deliver your files to your visitors with the smallest response time.