Modified HTTP Debugging Tools: Fiddler Introduction II

Learn how to build a faster web site through fiddler. In this article, we'll use Fiddler to explore HTTP performance, caching, and compression.

If you have not installed and configured Fiddler, please start with the first article.

Overview of HTTP performance

There is no doubt that users like to visit fast Web sites. The user is very impatient, unless your site is not a competitor, in other words is in a monopolistic position. If your visitors are from all over the world, you have to make sure that your site is very efficient and even more standard in its execution. As an internationalized network connection point, it is usually subject to pressure from two aspects: high traffic and low bandwidth.

In the first critical visit, users must download every piece of content to generate pages, including js,css,images,html, if your page is too difficult to load (including IIS receiving requests to execute and return to the client HTML), the visitor may leave your page.

By exposing all HTTP traffic, it's easy for Fiddler to show you which files are often used to generate a page,

Shift+click can calculate the total page weight of those selected sessions by selecting more than one session in the conversation list in the Fiddler left border. The number of those that are converted into bytes.

If you want your client to be impressed on the first visit, the best and only way to do that is to return to the client with fewer files (and, more personally, an aspect of ~_~).

1 use fewer (or smaller) drawings

2 Compress all CSS into a CSS file

3 Compress all the scripts into a JS file

4 Optimize your page time (the time here is probably referring to the server processing response time)

5 using HTTP Compression (gzip)

If you've optimized the performance of your first visit, you can use the advantages of HTTP caching to make your site visit faster.

Introduction to HTTP caching

2 ways to increase the speed of your Web application:

Reduce the number of round-trip requests and responses

Reduce the round-trip byte size of requests and responses.

HTTP caching is the best way to reduce the number of round-trip trips to the client server. Caching provides a mechanism to ensure that a client or agent can store something that will be used in a later HTTP response. (That is, the first time the request, to the client, the cache, the next time if the page also want this JS file or CSS file, do not go to the server to take down, but still want to go to the server to visit once, because the request to compare ETag value (Note: HTTP protocol specification definition ETag as " The entity value of the requested variable. Alternatively, ETag is a token (token) that can be associated with a Web resource. A typical web resource can be a Web page, but it may also be a JSON or XML document. Anyway, my understanding is to determine whether your cache and the resources on the server are consistent values.

Cache-related request headers

To improve performance, Microsoft's IE and other Web clients always try to maintain a local cache that is downloaded from the remote server.

When the client needs a resource (html,css.js ...). ), they have 3 possible actions:

1 sends a general HTTP request to the remote server side, requesting this resource.

2 sends a conditional HTTP request to the server, provided that it is different from the local cached version.

3 If the cached copy is available, the local cache resource is used.

When a request is sent, the customer may use several headers as follows

Table 1. Client Cache Headers

Pragma:no-cache	The client is unwilling to accept any cached responses from caches along the route and the origin server must For a fresh copy of the resource.
If-modified-since:datetime	The server should return the requested resource only if the resource has been modified since the date-time provided by the Client.
If-none-match:etagvalue	The server should return the requested resource if the ETAG of the resource was different than the value provided by the CL Ient. A ETAG is a unique identifier representing a particular version of a file.

1 Pragma:no-cache indicates that the client is unwilling to accept a cache request, and it needs the most immediate resources.

2 If-modified-since:datetime indicates that if the resource has been modified since it was last requested by the client, the server will return to the client for the latest.

3 If-none-match:etagvalue If the ETag value of the client resource is inconsistent with the server side, then the server side returns the most recent resource. ETag is a unique ID used to represent a specific version of a file.

If these conditional requests, that is, the request containing the if-modified-since or If-none-matchheader headers, the server will respond with a http/304 not Modified. Then the client knows that it can use the client's cache. Otherwise, the server will return a new response and the client discards the expired cache resource.

You can observe 2 consecutive requests, to request the same picture, you will find in Fiddler: In the first local cache version, the server returns a file containing ETag, and a file containing the last modified date, in this first request session, a local cached version already available. As a result, a conditional request is created. Then you request the picture again, he will respond to a locally cached file, of course, if the first cached picture of the ETag value or If-modified-since value to match the server, the server responds to a 304 to the client.

Session #1

Get/images/banner.jpg http/1.1

Host:www.bayden.com

http/1.1 OK

Date:tue, Mar 2006 00:32:46 GMT

content-length:6171

Content-type:image/jpeg

ETag: "40c7f76e8d30c31:2fe20"

Last-modified:thu, June 2003 02:50:50 GMT

Session #2

Get/images/banner.jpg http/1.1

If-modified-since:thu, June 2003 02:50:50 GMT

If-none-match: "40c7f76e8d30c31:2fe20"

Host:www.bayden.com

http/1.1 304 Not Modified

Because a HTTP304 response consists of only a head, no body, and all of it travels faster than the resources it carries when it crosses the Internet, the http/304 response requires a round-trip of the server, but the Web programmer can eliminate this by carefully setting the response header, Even a conditional request. Cache-related response headers

Usually the caching mechanism is controlled by the response header. The HTTP specification describes the header control cache, the optional cache-control,expires (expired).

The Expires header contains an absolute date, and when this date is exceeded, it will not be considered for updating.

Table 2. Common Cache-control Headers

Value	Meaning
Public	The response may is stored in any cache, including caches shared among many users.
Private	The response may is stored in a private cache used by a single user.
No-cache	The response should is reused to satisfy future requests.
No-store	The response should not is reused to satisfy future requests, and should to disk. This is primarily used as a security measure for sensitive responses.
Max-age= #seconds	The response may is reused to satisfy future requests within a certain number of seconds.
Must-revalidate	The response may is reused to satisfy future requests, but the origin server should the I-contacted to verify Response is still fresh.

Parameter settings for Cache-control headers:

The public response is cached and shared among multiple users.

Private responses can only be used as a private cache and cannot be shared among users.

No-cache responses are not cached

No-store responses are not cached and are not written to the client's disk, which is also a sensitive response based on security considerations that is used.

Max-age= #seconds response will be cached for a specified number of seconds, and will not be cached once time has passed.

The must-revalidate response is reused to satisfy the next request, but it must go to the server side to verify that it is still up to date.

Attention:

If you want to configure caching in IIS, refer to the soft technical article:

· How to Modify the Cache-control HTTP Header if you use IIS.

You can learn more about the use of caching in asp.net articles:

· How to Cache in asp.net by Using Visual C #. NET.

If you find that you often update files on your site, but do not change the file name, then you have to be very careful about setting your cache lifetime. For example: If you want a thisyear.gif picture file to display the current year on the site, you need to make sure that the cache expires in no more than one day, otherwise a user will not be able to display the correct date on January 1 when they visit your site on December 31.

For some reason, the server may be set: Progma:no-cache headers, Cache-control:no-cache

Parameters in header: Vary is a cache signal, vary:user-agent indicates that the current response is cached, but only when sending the same user-agent header. Instruction vary:* is equivalent to Cache-control:no-cache.

Vary is equivalent to the cached parameter in asp.net, which means caching according to what, if you know how the asp.net cache is used, it is easy to understand the meaning of this parameter.

Using the HTTP session list, Fiddler users can see the HTTP cache headers included in the page.

Fiddler Session List

If the response does not contain expires or Cache-control, the client is forced to make a conditional request to ensure that all resources are up to date.

Conditional requests and Wininetcache

IE uses Microsoft Windows Internet Services to maximize the use of caching services. WinInet allows the user to configure the size and behavior of the cache, and set the cache to do the following:

1 Open IE

2 tool options, select the Inrernet option, in the General sub option, in the temporary folder, click Set

The following figure is the four kinds of settings for the village selection:

Tag Performance issues:

You can use fiddler custom rules to mark something you need, such as if a response is greater than 25KB, you can mark the current session as red and be more visible. The following code is in the Onbeforeresponse event:

Flag files over 25KB

if (OSession.responseBodyBytes.length > 25000) {

osession["Ui-color"] = "red";

osession["Ui-bold"] = "true";

osession["Ui-customcolumn"] = "Large file";

}

Similarly, you can also mark the response without indicating the cached information.

Mark files which do not have caching information

if (!osession.oresponse.headers.exists ("Expires") &&

!osession.oresponse.headers.exists ("Cache-control")) {

osession["Ui-color"] = "purple";

osession["Ui-bold"] = "true";

}

Introducing HTTP Compression

All the current popular Web servers and browsers offer HTTP compression support. HTTP compression can significantly reduce the amount of traffic on both the client and server side. Save more than 50% of Html,xml,css,js and other documents. A browser sends a signal to the server, who can introduce HTTP-compressed content and place the compression type supported by the client in the header of the request, for example: Consider the following request:

get/http/1.1

Accept: */*

Accept-language:en-us

Accept-encoding:gzip, deflate

user-agent:mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1. NET CLR 1.1.4322)

Host:search.msn.com

This accept-encoding header indicates that IE will be willing to accept the gzip-formatted and DEFLATE-formatted compression response.

The corresponding response is as follows:

http/1.1 OK

content-type:text/html; Charset=utf-8

server:microsoft-iis/6.0--microsoft-httpapi/1.0

X-powered-by:asp.net

Vary:accept-encoding

Content-encoding:gzip

Date:tue, Feb 2006 09:14:36 GMT

content-length:1277

Connection:close

Cache-control:private, max-age=3600

You can use Fiddler to decompress the data. Experiments show that the use of HTTP compression can reduce data round-trip, a common CSS file can be reduced by 80%. Of course, compression is at the expense of CPU performance. In particular, compressed dynamic files, but the general expedient is to compress static files such as JS,CSS, because they will be stored on the server after the first compression, if you want to compress the ASP. NET dynamic file, there must be a trade-off.

If you're still not satisfied with your program optimization, you can also refer to this article,

Ten Tips for writing high-performance WEB applications

Note: This article reproduced and made a number of changes