A guest post by Dean Hume, a software developer and techie living in London, is also the author of Fast ASP.NET Websites, a Manning book aimed at improving the performance of high transaction websites.
There are a few simple techniques, however, that you can apply to your website in order to improve the page load times of your web pages. You will be surprised to know that these simple techniques will drastically improve the performance of your web pages with just a few easy changes. In this post, I will show you how to apply a technique called HTTP compression to your website that reduces the overall size of the files without affecting their quality. For more techniques of this nature, take a look at Fast ASP.NET Websites.
What is HTTP Compression?
HTTP Compression is an algorithm that eliminates unwanted redundancy from a file in order to create a file that is smaller than the original representation. By configuring and enabling this feature, you can reduce the overall weight of your page by compressing the file contents, and improve the performance and page load times of your web pages. A Google Developer article claims that every day more than 99 human years are wasted because of uncompressed content. Such content wastes bandwidth and increases the amount of time that users spend waiting for a web page to load. Although support for compression is a standard feature of all modern browsers, there are still many cases in which users of these browsers do not receive compressed content. The reason that I like using compression is because it is extremely easy to implement, and it’s a quick win. In this post, you will learn how to add this feature to your website in a few easy steps using the Web.config of your ASP.NET application.
Why Should I Use Compression?
Compression is a feature that most modern browsers are capable of handling, and it can produce great results. In fact, there are very few reasons why you wouldn’t want to use compression on your website! In order to test the effectiveness of compression and the savings that it could have on different file types, I have a few common files that many of you will encounter and compressed them using Gzip.
|File Type||Size without Gzip||Size with Gzip||Savings|
|HTML||6.52 KB||2.43 KB||62.74%|
|CSS||91.57 KB||21.12 KB||76.93%|
|CSS||13.51 KB||3.89 KB||71.21%|
|Image||6.76 KB||6.51 KB||3.7%|
There are a number of different types of compression available, such as GZIP, Deflate, and SDCH for example. We won’t be diving into the details of these compression types in this post, but it is important to know that IIS (Internet Information Services) will handle and serve the appropriate type of compression to your users.
There is also a direct correlation between the size of the file and the amount of savings (compression) that takes place, and as a general rule the larger the file the greater the savings. This happens because the server is better able to compress larger files that contain more whitespace and character repetition. If you refer to the table above, in two of the files, there is a massive difference with savings of over 70%. Compression works by finding similar strings within a text file, and replacing those strings temporarily to make the overall file size smaller. This form of compression is particularly well suited for the web because HTML and CSS files usually contain plenty of repeated strings, such as whitespace, tags, and style definitions. You’ll notice that the biggest savings were made on text-based files and there were hardly any gains on the image file. Image files are already compressed, so applying compression to them doesn’t bring much reward.
You can often see the results of a compressed file using the developer tools in your favorite browser. In the figure below, I took a screenshot of the network downloads from the Amazon.com homepage using Google’s Chrome browser and it’s built in developer tools.
In the figure above, you will notice that the file size of the Amazon.com home page comes in at 304 KB, while after the file is compressed it comes in at around 64.3 KB. That is a significant reduction in the overall file size. It almost makes you wonder why some websites aren’t compressing their content!
How to Enable Compression on Your Website Using the Web.config File
Using the Web.config file, you can control and fine tune the compression settings for your website. In the figure below, you will see that the HTTP compression settings have been added to the Web.config file. The compression settings need to be added between the System.WebServer tags in the XML file.
In the figure above, you are also able to control the different file types that you would like to compress. Notice that there is a list of dynamic file types that are being compressed, as well as a list of static file types. In IIS, static compression caches compressed static content in the path that is specified by the directory attribute, which increases compression performance by eliminating the need to recompress content that has already been compressed. After IIS 7 has compressed a file, subsequent requests are given the compressed copy of the file from the cache directory. Dynamic compression is different because it compresses the file each time a client requests the content, but the compressed version is not cached to disk.
Once you save the Web.Config file and navigate to your website, you should notice that the files are being compressed. Use the developer tools of your favorite browser to view the results of the file compression. That’s it! Adding compression to your site is easy and can be achieved in just a few steps.
There are loads of other great settings that you can fine tune using the Web.Config file. For more information on HTTP compression using IIS, please take a look at the IIS website. In this article, we have briefly touched on one aspect of web performance, if you are interested in learning about this feature and other great performance improvements, please check out the Fast ASP.NET Websites book.
Be sure to look at resources on ASP.NET that you can find in Safari Books Online.
Not a subscriber? Sign up for a free trial.
Safari Books Online has the content you need
|Fast ASP.NET Websites delivers just what it promises—practical, hands-on guidance to create faster, more efficient ASP.NET sites and applications. This book offers step-by-step .NET-specific examples showing you how to apply classic page optimization tips, ASP.NET-specific techniques, and ways to leverage new HTML5 features.|
|Beginning ASP.NET MVC 4 shows that the beautiful simplicity of ASP.NET MVC is just as suitable for novice developers venturing into real-world application design for the first time. With the aid of a fully worked demo application, this book explains and demonstrates for you the three pillars of MVC in action.|
|Ultra-Fast ASP.NET 4.5 presents a practical approach to building fast and scalable web sites using ASP.NET and SQL Server. In addition to a wealth of tips, tricks and secrets, you’ll find advice and code examples for all tiers of your application, including the client, caching, IIS 7.5, ASP.NET 4.5, threads, session state, SQL Server 2012 (otherwise known as Denali), Analysis Services, infrastructure and operations.|
About the author
|Dean Hume is a software developer and techie living in London, and is also the author of Fast ASP.NET Websites, a Manning book aimed at improving the performance of high transaction websites. He created the ASP.NET HTML5 toolkit and blogs regularly about web performance at www.deanhume.com.|