Combres to Improve Website Performance

What is Combres and why do we need it? I will explain that a little bit later. Let us have a small discussion of our clients for some time.

Clients are always concerned about website performance and they want the webpage to load quickly. That is what most of the client’s expectations are. As a web developer, it is our responsibility to increase the performance and optimize the website as much as possible. There are many factors that should be taken care of to increase the performance of a website.

To increase a website performance, we need to reduce the number of HTTP requests to the web server.

Combres is a .Net open-source library that you can use to reduce the number of requests. What does Combres do for us?

• Combination
• Minification
• Compression
• Caching

Let us have a practical look at how our website is rendering the CSS and JavaScript files. I have created a simple ASP.NET website with a couple of CSS and JavaScript files. Since we are web developers, we are accustomed to dealing with third-party plugins and library files. Here is my application structure.



Let us have a look at how page renders and the number of HTTP requests.



Please have a look at the following things before applying Combres in the application.

• Number of HTTP requests
• Total time taken to load
• Size of each file

After integrating Combres in our application.



Now compare the screenshot with the previous one. The following changes have taken place after integrating the Combres in our application.

• The number of HTTP requests has been reduced.
• File size has been reduced.
• The total time taken to load the page has been reduced.

Combres is doing magic behind the scenes. Let me tell you the procedure for integrating Combres into your application.

1. Download Nuget package for Combres.
2. Go to App_Data/Combres.xml.Declare all your JavaScript and styles resources.
3. Add a single line of code to the Global.asax code-behind file.
4. Call the resource files in the aspx file.

Step 1

Download Nuget package for Combres as in the following:



Step 2

Go to App_Data/Combres.xml. Declare all your JavaScript and styles resources.

Note: Once the Nuget package is installed, I will add the reference files to the bin folder and make a few changes in web.config. Please take a backup of the web.config file.



The Combres.xml file will be automatically created in the app_code after Nuget package installation. You just need to add your CSS and JavaScript files here. I have created 2 resources, the first one is a CSS style and the other one is JavaScript. Remember the name of the resourceset.

Step 3

Add a single line of code to the Global.asax code-behind file.



Step 4

Call the resource files in the aspx file.



Just call the resourceset with its name in the header. That’s it. You have learned how to integrate Combres into a web application.

Combres is an open-source project you can find in the following link. It can be integrated with webforms and MVC. Here's the link to get a clear picture of it.

Link

• Github
• Demo Project