Web site Performance Guide (i): overview

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Overview】

What makes our site slow?

Http protocol

Save money and make money with better performance

Performance rules

"What makes a website slow"

For most modern web sites, only 10%-20% response times are used to generate and load HTML document.

So what's the other time to load? Exactly, as follows:

css

JavaScript (Jquery,plugin, etc.)

Images

Let's use a tool to see-fiddler (http://www.fiddler2.com/fiddler2/)

First open fiddler and then use the browser to access www.microsoft.com

At this point we can see the fiddler monitor the interaction between the client and the Microsoft Web server as follows:

Note the tab on the right of the fiddler, there is a timeline. It takes about 1s to load the default.asp. Let's select all of these lines. Take a look at timeline, as shown below.

At this time, we can prove the point of view according to the data, for a website, 80% is used to load css/js/image.

The Http protocol

Understanding the HTTP protocol is important because it defines how the Web browser interacts with the Web server.

Hypertext transmits Kyoto

For this, the most important is text, which is not based on binary protocol, but on text.

The agreement was January 1997 in RFC (Http1.1) defined.

Request/corresponding mode. The client browser sends a specific request, and the server returns response

Header and body. Each request/response has header and body

The following is the content of the HTTP protocol. I highly recommend that you read it: HTTP://TINYURL.COM/8395LQ

HttpRequest

We use Fiddler to observe our visit to Microsoft's HttpRequest.

Select the first record. Right tab in turn->inspecotrs->raw

We simply analyze,

Get indicates the URL and HTTP version.

Host indicates the host's address.

Accept-language indicates the language used by the browser

Accept-encoding indicates whether data from the browser to the server can be compressed using.

HttpResponse

Let's take a look at the response we just requested.

I selected the 12th row of data in the Fiddler, select the Right tab->inspecotrs->raw

HTTP/1/1 OK. is to tell everyone that everything is working well. 200 is a state, if you encounter problems may be 404,500.

Other details, you can check your own information.

"Save money and make money with better performance"

Everyone can understand. Improve the performance of the site, you can make users more satisfied. And that can save us money and make money.

Ways to save money:

Use smaller bandwidth

Fewer servers

Ways to make money:

Increased sales and traffic

-Loading amzon.com per 100 milliseconds will reduce sales 1%.web

-When Google Maps's home page size is reduced from 100KB to 70-80k, traffic will increase by 10% in the first week, up to 25% in the next 3 weeks.

Google has helped determine search rankings based on the performance of your site.

For the impact of Web site performance on traffic and sales see related articles "Web Performance Psychology" http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Performance rules

Reduce HTTP request

How do I reduce HTTP requests? According to the above mentioned fiddler to hear the HTTP request to know, many times the request is to get css,javascript, and image.

First, let's take a look at a website:

It's a regular site. He can use jquery to pop up the picture, and we'll try it with fiddler.

We can see that. He contains some CSS files and also uses jquery.

Let's look at another version of this site.

It looks exactly the same, and I don't show the map.

Let's see what Fiddler's Got for us:

JS and CSS files have become 1. We have the top JS file merged into 1 JS files. So we reduce the number of HttpRequest.

2. Send as little data as possible

We go back to fiddler. View the jquery file for the first site, "Jquery-1.6.2.js."

Its normal version is 236k.

The first site needs to load the total size of JS is 279k.

The second site needs to load JS size is 50.8k.

What have we done? Just the JS file in the white space removed, is the JS file compression.

The same is true for CSS files. On the final product version, we can reduce the number of HttpRequest by using merged files. Of course, we have to keep the blank lines in debug to increase the readability of the code.

About Compression JS Tools we can find a lot on the internet, do not enumerate.

3. Reduce the number of interactions (use caching appropriately)

Let's refresh the second website and watch fiddler. We can find that the second load to the server fetched the Default.aspx.

JS, CSS, and pictures are not reloaded. Because browsers have cached those files for us.

Original: http://www.cnblogs.com/techborther/archive/2012/08/01/2618506.html