Minimize HTTP requests

Reduce your http request is the one of the best way to speed up your website. I am going to explain all of the require step you needed for this and check the result after competition.

First of all go website and open the network tab.

I am using chrome. For chrome right click into your website and then go to the Inspect Element after that go to the Network tab. Here you can check every CSS, JS, Content, Images and other response loading time.
Now our goal is reduce the http request and reduce the loading time for every separate files.

Now if we are going check our pages source code by pressing Ctrl+U for modern browsers. We can check that we will get lots of files taking from other server or getting the files from our server by http request.

Step1: Modify CSS and JS file path

You need to link all your CSS files into your head and the JavaScript files bottom of your page before closing the body tag. Now try to fetch the files from relative path don’t use absolute path by http.

For this you need to know first your project structure as sometimes we are using open sources and we don’t have any idea from where we are fetching the CSS files. For that again go to the Inspect Element tab and mouse hover on the CSS files.

You will get CSS path for each and every file like /CSS/filename.css. Now go the master page and replace your all CSS file and JS file path with relative path like above.

Step2:data uris

Reduce image call by http request. In our website we are using lots of images by absolute http path. We can replace the image with data uris. Its modern technology for reducing http request for images. Even it reduce the website size. Practically in this method we are convert the image into gibberish characters, which we will going to use into the html image src and the CSS background like.

In css:

li { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat left center; padding: 5px 0 5px 25px; }

In HTML:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
You also need to add mine type like data:[][;charset=][;base64],

Its supported by almost all browser and including IE8-Edge.

For getting the code please go to the link http://websemantics.co.uk/online_tools/image_to_data_uri_convertor and upload your images and get the desire code.

Step3: Image sprite.

Using CSS sprite is another process for reducing http request, by this process we need to create a big image by merging all small image like.

Now we can use every image for specific purpose. For every image we have specific x axis and y axis. Assume the first image have height 100px and width 100px, and x-axis is 10px and y-axis is 10px; From Photoshop selection tools we can measure the x and y- axis value like.

So the desire CSS will be .sprite { Width:100px; Height:100px; Background: url(‘your_imagepath.jpg’) -10px -10px no-repeat; }

Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.