Shulou(Shulou.com)06/02 Report--

This article mainly explains the "web website performance example analysis", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "web website performance example analysis" bar!

[Overview]

What slows down our website? Http protocol? Save money and make money through better performance? Performance rules

[what slows down the website]

For most modern websites, only 10% of the response time is spent on generating and loading html document.

So what do you spend the rest of your time loading? Specifically, it is as follows:

Css;javascript (jquery,plugin, etc.); images

Let's use a tool to see-Fiddler

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

At this point, we can see that fiddler monitors the interaction between the client and the Microsoft website server as shown below:

Notice the tab on the right side of fiddler, where there is a timeline. It took about 1 second to load the default.asp call. Let's choose all these lines. Take a look at timeline again, as shown below

At this time, we can prove the previous point based on the data. For a website, 80% of the time is spent loading css/JS/image.

[Http protocol]

An understanding of the http protocol is important because it defines how web browsers and web servers interact.

Hypertext Transfer Protocol

The most important thing at this point is text, which is not based on binary protocols, but on text.

The protocol was defined in RFC (Http1.1) in January 1997. Request / corresponding mode. The client browser sends a specific request, and the server returns responseHeader and body. Each request/response has header and body

HttpRequest

Let's use fiddler to observe our visit to Microsoft's httprequest.

Select * records. Tabs on the right-> Inspecotrs- > Raw

Let's make a simple analysis

Get indicates the versions of url and http. Host indicates the address of the host. Accept-language indicates the language used by the browser. Accept-Encoding indicates whether you can use to compress data from browser to server.

HttpResponse

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

What I select in fiddler is the 12th row of data, select the tab on the right-> Inspecotrs- > Raw

Http/1/1 200 OK . Is to tell everyone that everything is working well. 200 is a state, if there is a problem, it may be 404500, etc. For other details, you can check the information yourself.

[save money and make money through better performance]

Everyone can understand. Improve the performance of the website, can make users more satisfied. And it also allows us to save money and make money.

Ways to save money: use less bandwidth; fewer servers

Ways to make money: growing sales and traffic

Every additional 100ms loaded into Amzon.com reduces sales of 1%.web

-when the home page size of google maps is reduced from 100KB to 70-80k, the traffic will increase by 10% in * week and 25% in the following 3 weeks.

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

[performance rules]

Reduce http request

How to reduce http request? We learned from the http request overheard by fiddler mentioned above that many requests were made to get css,javascript and image.

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

It's an ordinary website where he can use jquery to pop up pictures, and let's try it with fiddler.

We can see. He includes some css files and also uses jquery.

Let's take a look at another version of this website.

It looks exactly the same, so I won't show the diagram.

Let's see what fiddler has caught for us:

Both the js and css files have become one. We merge the above js file into one js file. In this way, we reduce the number of httprequest.

Send as little data as possible

Let's go back to fiddler. View the jquery file "jquery-1.6.2.js" of * websites.

Its normal version is 236k.

The total size of js for * websites is 279k. The size of the second site that needs to load js is 50.8k. What have we done? Just remove the white space in the js file, which is the compression of the js file.

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

We can find a lot of tools for compressing js on the Internet, without enumerating them.

Reduce the number of interactions (appropriate use of caching)

Let's refresh the second website and watch fiddler. We can see that the second load fetches the default.aspx from the server.

Js, css, and pictures are not reloaded. Because the browser has cached those files for us.

Thank you for your reading, the above is the "web website performance example analysis" content, after the study of this article, I believe you have a deeper understanding of the web website performance example analysis of this problem, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.