Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML
Tip/Trick

Minify contents - Reduce page size

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
19 Jul 2012CPOL2 min read 30.6K   1.8K   12   14
A library to minify HTML and CSS content.

Introduction 

Minify content library is used to reduce the response content in ASP.NET. Response content can be in a form of HTML, CSS or JavaScript. When response is generated by server, it contains unnecessary text like tabs, spaces and new line characters. This library will remove all these unnecessary text with minifying in single line. It will reduce the page size as well. This library will minify the HTML and CSS content.

How to use it? 

It is easy to use this library. Download the MinifyContent library source project. Build the project in release mode. Add reference of MinifyContent.dll in the Asp.Net web application.

Image 1

Image 2

Once the dll has been added to the project, register the ContentCompresser module in web.config file. This HTTP Module is responsible to minify the content.

Register Module in Web Config

That’s all. It’s time to run the application now. Once the page has been loaded in browser, verify the HTML contents.

Verify HTML contents

Opps!!! The HTML contents are not minified, are we missing something?

As a developer we use to run application in debug mode and many times we debug the JavaScript at the time of development and hence we do not want to minify the HTML contents. So what to do to minify it? Simple, for now just change the execution mode of application from Debug to Release; from Standard toolbar or from Configuration Manager screen. Now run the application and verify the HTML contents once the page has been loaded in browser. 

Are the Contents minified this time?

No. What’s wrong now?

It should minify this time as the web application has been run in Release mode!!!

Check the web.config file. Under System.web section group, in Compilation Section; check the value of debug attribute. If it is true, change the value to false.

Change debug false in web.config

All is completed and run the application now. Observe that contents are minified.

Verify HTML contents

Some statistics of minified default.aspx page.

Content Type Size in Bytes
BeforeAfter
HTML 24201992
CSS 42583240
Total 66785232
Difference 1.42 KB
Difference in % 21.78%

Points of Interest 

History

  • 19th July, 2012: Initial post. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
Mehul Thakkar is having 8 yrs of experience in IT industry. He is having good command over Ms .Net and Ms Sql Server

Comments and Discussions

 
Questionminify code Pin
Member 1185757323-Jul-15 1:04
Member 1185757323-Jul-15 1:04 
AnswerRe: minify code Pin
Mehul M Thakkar5-Jan-16 21:40
Mehul M Thakkar5-Jan-16 21:40 
QuestionI can't seem to get this working. Can you please help Pin
Aubrey Moore14-Sep-14 23:45
Aubrey Moore14-Sep-14 23:45 
AnswerRe: I can't seem to get this working. Can you please help Pin
Dennis Baberich23-Oct-14 8:56
professionalDennis Baberich23-Oct-14 8:56 
GeneralRe: I can't seem to get this working. Can you please help Pin
Mehul M Thakkar11-Nov-14 18:10
Mehul M Thakkar11-Nov-14 18:10 
Generalmy vote: 5 Pin
Greyhound4-Sep-14 3:17
Greyhound4-Sep-14 3:17 
QuestionYour Bio Pin
eric paul14-Jul-14 3:45
eric paul14-Jul-14 3:45 
GeneralMy vote of 4 Pin
Moumit Mondal19-Jun-14 3:09
Moumit Mondal19-Jun-14 3:09 
BugThis is good one!!! .... Thanks for that ... but.... Pin
Moumit Mondal19-Jun-14 3:07
Moumit Mondal19-Jun-14 3:07 
GeneralMy vote of 5 Pin
Moumit Mondal18-Jun-14 21:15
Moumit Mondal18-Jun-14 21:15 
GeneralMy vote of 5 Pin
Pravin Patil, Mumbai19-Jul-12 4:29
Pravin Patil, Mumbai19-Jul-12 4:29 
GeneralRe: My vote of 5 Pin
Mehul M Thakkar19-Jul-12 18:35
Mehul M Thakkar19-Jul-12 18:35 
Questiongood,thanks Pin
Alenty19-Jul-12 3:26
Alenty19-Jul-12 3:26 
AnswerRe: good,thanks Pin
Mehul M Thakkar19-Jul-12 18:37
Mehul M Thakkar19-Jul-12 18:37 
I have not looked at this tool, but this library is very easy to use in any web application. But sure I will look in to the shared link.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.