Optimize Website Design (4): Enable compression for resources

ArticleDirectory

•  
• Which resources are suitable for compression?
• Which resources are not suitable for compression?
• How to compress
• Grouping HTTP compression in IIS 7

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see

Best practices for speeding up your web site Http://developer.yahoo.com/performance/rules.html

At the same time, they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects.

In the next period, I will combine ASP. NET development platform, aiming at these Principles, provides some explanations and interpretations in the form of a series of articles to help you better understand these principles and use them better.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      Technorati tags: performance, web design, ASP. NET
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

This article is about how to enable compression for resources. We know that there is a fact that we cannot avoid not only how to reduce the number of requests, but also how to use CDN and cache: content must always be transmitted from the server to the client, the number of times is less. If we want this transmission process to be as fast as possible, we should naturally think about whether the volume of transmitted content can be reduced?

To answer this question, we usually use the compression technology. For the theory and concept of this principle, please refer to the http://developer.yahoo.com/performance/rules.html#gzip

Compression is not that simple. In fact, it contains a pair of operations: compression and decompression. In other words, using compression technology in the website optimization we are discussing today requires not only the server side to compress the content, but also the client (browser) to decompress the content. This is also true. Therefore, there is a problem here. We must use the compression that most browsers can accept.Algorithm. Because of the diversity of browsers, it is usually when the browser initiates a request, explicitly indicating that it accepts those compression algorithms, and then the server checks these settings, then confirm whether you can use these algorithms to compress (or decompress). If not, you would rather not compress the data and directly return the original content.

Therefore, it is stipulated in HTTP 1.1 that when a browser initiates a request, the following request header can be used to indicate the compression algorithms supported by the browser (multiple compression algorithms may be supported)

 
Accept-encoding: gzip, deflate
 

 
Then, when the server sends a response, it can also use the following response header to indicate whether the response uses a certain algorithm (there must be only one)
 

 
Content-encoding: Gzip
 

 
AsProgramWe know there are many other algorithms, but Gzip is the most commonly used algorithm. Deflate is also comparable to deflate, but Gzip is the most used.
 

Which resources are suitable for compression?

1. Static webpage (HTML, htm)
2. Text Files (text, XML, etc)
3. Script File (JavaScript)
4. Style File (CSS)

 

Which resources are not suitable for compression?

1. Image (JPG, GIF, PNG)
2. Special components (flash, xap)

 

How to compress

 
It is not difficult to implement the compression function. Some modern Web servers have built-in support for this feature. For Microsoft's IIS 7.0 or later, you can configure it by referring to the following article.
 

Grouping HTTP compression in IIS 7

 
Http://technet.microsoft.com/en-us/library/cc771003 (V = ws.10). aspx
 

 
Let me summarize and demonstrate it.
 

IIS 7.0 has built-in support for gzip compression, which can be selected during IIS Installation

 
After correct installation, You can see such a function in the management tool.
 

 

IIS 7.0 supports Static Compression and dynamic compression. Static Compression is a relatively large amount of content. IIS 7.0 will compress them into a new file, and cached on the disk (you can use the following interface to configure the size of files to be static compressed and put in which directory), and dynamic compression is for some small content to be submitted, directly perform dynamic compression during running and do not cache data on the disk (this method will cause extra CPU burden)

The cached directory automatically creates a sub-directory for each application pool to save the static compressed files.

How much is the benefit of this compression? Let's take a look at the following:

In one of my testing websites, It compresses two JavaScript files. The size after compression is 33kb and 51kb, respectively, the size of the original two files is actually 65% kb and 74% KB. We can see that the compression ratio is as high as and. This is a considerable benefit, and you only need to enable compression.

 

 
In fact, this file has been compressed into the following (no more plain text scripts)
 

 
It is undeniable that compression and decompression will certainly bring some extra burden to the CPU, but usually this cost is very small, especially compared with the benefits.
 

 
Wait! We seem to have missed a very important topic: on the Interface above, we know how to enable compression, but we do not see
 

1. How to Set which files should be compressed (static or dynamic ).
2. What algorithm is used for compression?

 

The details are hidden in the following configuration file.

C: \ windows \ system32 \ inetsrv \ config \ applicationhost. config
 

 
Open this file and search for httpcompression. You can find the following configuration information. Of course, you can make some modifications on this basis, provided that you understand them first. Actually, it's not hard, right?
 

Technorati tags: performance optimization, performance, ASP. NET, web design