[Website performance Guide] (1) Overview

Document directory

• [What slows down the website]
• [Http protocol]
• [Saving money and making money through better performance]
• [Performance rules]

[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%-20% of the response time is used to generate and load HTML document.

So what other time is used for loading? Specifically, it is as follows:

1. CSS
2. JavaScript (jquery, plugin, etc)
3. Images

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

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

At this time, we can see that Fiddler monitors the interaction between the client and the Microsoft website server, as shown in:

 

Note that the tab on the Right of fiddler has a timeline. Loading default. asp takes about 1 s. Let's select all these rows. Let's take a look at timeline, as shown in figure

 

At this time, we can prove our point of view based on the data. For a website, 80% of the time is used to load CSS/JS/image.

 

[Http protocol]

It is very important to understand the HTTP protocol because it defines how the web browser interacts with the Web server.

• Hypertext Transfer Protocol

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

• The Protocol was defined in RFC January 1997 (http1.1.
• Request/mode. The client browser sends a specific request, and the server returns response
• Header and body. Each request/response has the header and body

The following is the content of the HTTP protocol. I highly recommend you read it: http://tinyurl.com/8395lq

 

Httprequest

We use Fiddler to observe our access to Microsoft's httprequest.

Select the first record. On the right side of the tab, choose "inspecotrs"> "Raw ".

Simple analysis,

Get indicates the URL and HTTP Version.

Host specifies the host address.

Accept-language indicates the language used by the browser.

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

 

Httpresponse

Let's take a look at the response to our request.

In Fiddler, select 12th rows of data, and select the right tab-> inspecotrs-> raw

#	Result	Protocol	Host	URL	Body	Caching	Content-Type	Process	Comments	Custom
12	200	HTTP	Www.microsoft.com	/En-US/homepage/shared/CORE/2/JS. ashx? &	3	Private	Text/JavaScript; charset = UTF-8	Chrome: 1, 3856

 

HTTP/1/1 200 OK. Is to tell everyone that everything works well. 200 is a status, and may be 404,500 if there is a problem.
For other details, you can check the information yourself.

[Saving money and making money through better performance]

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

• Save money:

Use smaller bandwidth

Fewer servers

• Ways to make money:

Increased sales and traffic

• • -Loading amzon.com in every 100 MS Increase will reduce sales by 1%. Web
  • -When the size of the Google Maps homepage is reduced from 10% kb to 25% kb, the traffic increases by in the first week and increases to in the next three weeks.
  • -Google has determined the search ranking based on the performance of your website.

For the impact of website performance on traffic and sales, see related articles web performance psychology http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/.

 

[Performance rules]

1. Reduce HTTP Request

How can I reduce HTTP requests? According to the HTTP request that Fiddler listens to, we know that CSS, JavaScript, and image are obtained for many requests.

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

It is a common website that can use jquery to pop up images. We can use Fiddler to try it.

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

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

It looks exactly the same, so I will not show the figure.

Let's see what fiddler caught for us:

The JS and CSS files have all become one. We merge the above JS file into one JS file. This reduces the number of httprequest requests.

 

2. Send as little data as possible

Let's go back to Fiddler. View the jquery file jquery-1.6.2.js for the first website.

Its normal version is 236 K.

 

The total size of js to be loaded on the first website is 279 kb.

The size of js to be loaded on the second website is 50.8 kb.

What have we done? Only remove the white spaces in the JS file, that is, the compression of the JS file.

The same applies to CSS files. In the final product version, we can use merged files to reduce the number of httprequest requests. Of course, when debugging, we need to retain blank lines to increase the readability of the Code.

We can find many JS compression tools on the Internet without listing them.

3. Reduce interactions (use cache as appropriate)

Let's refresh the second website and watch Fiddler. We can find that the default. aspx is obtained from the server for the second loading.

JS, CSS, and images were not reloaded. Because the browser has cached those files for us.

 

Subsequent chapters are:

[Performance measurement]

[Basic implementation performance]

[Previous performance]

[Diverse performance]

Stay tuned