Bundling to improve the performance of the website
As per the old saying “Performance is a vast area and great results can never be achieved by a silver bullet”. In fact, when we are start developing a web application we can’t explore any points like performance, loading time of website etc. and we just start developing using traditional style while today there are lots of technique has introduce in the market. Here I am trying to explore few new technique of dotnet.
Here I am explaining about Bundling and Minification.
- Bundling – combining multiple scripts or style resources together into a single resource. To minimize the browser requests.
- Minification – is a technique which remove unnecessary characters for example newline, white space, and tab etc.)
When we start developing any web application we added few lines under the head section and before or after the body part. See below example
<link href="~/Content/S***e.css" rel="stylesheet"/>
<link href="~/Content/co****t.css" rel="stylesheet"/>
But technically where we are not focusing exactly i.e. every browser has some limitation of simultaneous persistent connectivity. It vary browser to browser, most of the major browsers have limited the number of simultaneous persistent connections per each server/proxy. It is up to six/eight number of connection at a time. It means while six/eight requests are processed, additional requests from there server will be in queue by the browser. Let me explain it with few examples, when we press F12 from IE browser, a developer tools are open, just clicked on Network Tabs. A below image will be shown.
In the above image you are seen few colors like gray, yellow and blue.
The gray bars show the time of request is in queued by the browser, which are waiting on the sixth or on limit. The yellow bar is showing the request time of first byte, i.e. the time taken sends the first response from server or first request from the server. The blue bars are showing taken response from the server.
You will also show at above images it is showing all 34 number of items with complete address and there loading time.
It all happens when we are not using bundling. But when we used bundling what happen let’s see below
Below are the steps how to create a bundling.
1. By using a single line
2. By using a wildcard symbol
Wildcard character is used to combines the files that are in the same directory and have same prefix or suffix with its name. for example you would like to add the scripts or CSS which are exists inside a particular folder of “~/Script” directory.
After creating a bundling we need to register it, for registering it, we have to following the below steps.
Open the Global.ascx file and click the Event Application_Start(), like below line
protected void Application_Start()
// Other Code is removed for clarity
After implementing the bundling we can test it, once you application is browsing, press function key F12, a below image will be visible under the network tabs.
Disclaimer: Developer’s corner section of ISHIR blog is contributed and maintained by independent developers. The content herein is not necessarily validated by ISHIR.
- Microsoft Windows Server
- Open Source
- Managed Security Services
- Artificial Intelligence
- PSD Slicing
- Developers Corner
- Pay Per Click (PPC)
- Mobile Application Development
- Managed Hosting
- Microsoft .NET Custom Development
- Software Testing
- Microsoft SharePoint Development
- Microsoft Windows Azure
- Offshore Development
- Outsourcing Software Development
- Microsoft Office 365
- Non-Profit IT
- Application Virtualization & Packaging
- Digital Marketing
- Search Engine Optimization (SEO)
- Social Media
- Website Development
- Cloud Computing