Why are http requests so important?
When your user visits your web page, it makes additional HTTP requests to load different resources and elements of the web page such
as photo files, favicon files, font files, CSS files, JavaScript files, and so on. As the number of such HTTP requests increases, your web page takes longer to load, negatively affecting your user’s experience on your website. Use HTTP Request Checker to keep a tab on your webpages and ensure that the number of HTTP requests does not exceed beyond a permissible limit. Typically, the total number of HTTP requests from a web page should be less than 20.
How many HTTP requests is too much?
It depends on the domains the requests come from. When a page makes more than 20 HTTP requests from the same domain you should start to look into lowering the amount. It also depends on the type of page you have.
How to Make Fewer HTTP Requests (Boost Site Speed Easily)
1) Combine & inline CSS scripts
Most website templates require multiple CSS files (usually in the header and the footer) to load to support the template. You should combine these files to one large file to minimize the number of HTTP requests. It’s as simple as opening all the files and copy & pasting their content to one file. Make sure that file paths inside the CSS scripts are correct.
2) Inline smaller JavaScripts
When it comes to page speed, the best way to handle JavaScripts is to inline them.
3) Combine all JavaScripts
When you can't inline JavaScripts and your website requires multiple JavaScript files to load you should try and copy and paste all the JavaScripts to one big .js file and call this bigger JavaScript file from the HTML head. To reduce HTTP requests it’s generally a smart idea to minimize the number of JavaScripts that are loaded with a page.
4) Minimize the use of design & functional images
You should aim to minimize the number of images used for design or functional reasons and 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 instead of CSS.
5) CSS image sprites
When you really can't escape using images for a design, you can combine and save all of those individual images to one bigger file by using CSS sprites. You can then call the individual images from a CSS script by using X and Y coordinates.
6) Convert images to Base64 code
You can encode functional images (like a logo) to a Base64 string, which basically means you transform an image file into script code. One you have the code you replace the original image tag with this code to display your image.
7) Minimize number of plugins
Plugins can be a great asset to a website but usually require several web files to load on a web page to function. This is why it is important to really only use plugins when you deem it absolutely necessary.
8) Limit the number of social buttons
Social buttons (Twitter, Facebook, etc.) are a great way for users to share your website with other people. But social buttons can also slow a website down. The button images, JavaScript and CSS files add multiple HTTP requests. Remove the buttons altogether when you don’t need them.
9) Content Delivery Network (CDN)
A Content Delivery Network (CDN) makes it possible to serve web files from different (sub)domains. This reduces the number of HTTP request your server has to process. CDN services also usually provide a network of servers across different locations all over the world. This makes it possible to deliver files to your visitors with the smallest response time (first byte time) possible.