Analysis of Web page performance testing tools

http://www.cnblogs.com/fo0ol/p/3297054.htmldo web development, it is inevitable to develop their own page performance testing, self-written tool detection, too much work. Online there are several more mature testing tools, the following to introduce, and share with you.

Based on web analytics tools:

1. Ali Test

2. Baidu Application Performance Testing Center

2. Web Pagetest

3. PingDom Tools

4. Gtmetrix

Browser-based Profiling Tools:

1. Chrome comes with tool F12

2. Firefox plugin: YSlow (yahoo tools)

3. Page Speed (Google)

(The following is an example of the blog Park website www.cnblogs.com)

Ali Test:

Http://www.alibench.com

Home:

first, performance scoring

A) First byte time

Indicator Explanation: when the browser starts receiving server response data (background processing time + redirect time)
Evaluation method: meet time =dns resolution time + Create connection time +SSL authentication time +100ms. 10ms minus 1 points per slower than the standard time.

b) using long connections (keep alive)

Indicator Explanation: multiple page elements for the same domain name will be reused for the same download connection (socket) after the server has opened a long connection
Evaluation method: Whether the server returned a "connection:keep-alive" HTTP response header, or if the browser downloaded multiple objects through the same connection

c) Turn on gzip compression

Indicator Interpretation: Check only text type ("text/*", "*javascript*")
Evaluation method: Whether the server returned a "Transfer-encoding:gzip" response header. If all compression is perfect, otherwise: score = out of X (100%-percent of all gzip saved%)

d) Image compression

Evaluation method:
For GIF-skip over
For PNG-must be 8 bits or less
For JPEG-Compare with Photoshop quality selection 50 after the picture, size exceeds 10% pass, 10%-50% warning, above 50% substandard
Score = x (100%-The percentage of the picture that can be saved after re-compression)

e) Set the static content cache time

indicator Explanation:css,js, the picture resource should specify a cache time explicitly
Evaluation criteria: If there is a static file expiration time set less than 30 days, you will get a warning

f) Merging CSS and JS files

Indicator Explanation: merging JS and CSS files can reduce the number of connections
Evaluation method: each more than one CSS file minus 5 points, each more than one JS file minus 10 points

g) Compression JS

Indicator Interpretation: In addition to open gzip, use the JS compression tool can be code-level compression
Evaluation method:JS file will be compressed by jsmin. If the original file was gzip-jsmin, the files processed by the file will be gzip-checked and then compared. If you can save >5kb or%10 size, the evaluation fails. If you can save > 1KB will also receive a warning.

h) reasonable use of cookies

Indicator Explanation:the smaller the better the cookie, and the need to avoid setting cookies for static files
Evaluation method: The evaluation fails as long as a cookie is set on the static file domain. For other requests, the cookie size is too large for the General Assembly to be warned.

Second, detailed analysis

i) first detection (the first probe empties the DNS cache and the browser cache), repeated probing (preserving the cache for the first probe, and re-probing).

j) Page load time: The time from page load to page onload event firing.

k) First byte time: The time from the start of the load to the first byte of the received server's return data.

L) Start rendering time: The time from the start of loading to the beginning of the browser to render the first HTML element.

m) Speed index:

n) Number of elements: the number of all DOM nodes contained in the page

o) page load (including load time, number of requests, download totals): Loading from the page to the OnLoad event triggers this period of statistical data, in general, the OnLoad trigger represents the CSS,JS directly through the HTML reference, the picture resource has been fully loaded.

p) Full load: With the popularity of AJAX applications, many resources will be asynchronously loaded through JS footsteps, so the onload event does not mean that the full load, after the onload JS may still be asynchronously loaded resources. The full load is defined as: the page onload no longer has a network request time within 2 seconds.

Q) Element Waterfall diagram: The following information can be intuitively obtained through the element waterfall diagram.

I. The order in which the resources are loaded.

Ii. queue delay for each resource, loading process.

Iii. the change curve of CPU and loan during loading.

Iv. statistics of error requests, large picture requests, requests after onload, requests before starting rendering, slow first-byte requests, and the number of slow DNS resolution requests.

R) The connection view shows the (keep-alive) connection created during page loading and the resources loaded through each connection.

iii. Distribution of elements

s) resource type statistics: Css,html,image,js,other (number of requests, size)

T) resource Domain name statistics: number of requests and number of domain names

Four, view analysis

The process of generating the entire Web page is presented in film view, video, screenshot, and provides a detailed status bar loading log.

YSlow:

Firefox plugin (self-installing)

score Level Indicator:

1. Ensure a small number of HTTP requests (merge Js,css pictures, etc.)

2. Use content distribution CDN

3. Set the outdated HTTP header. Set the Expires header to cache scripts, stylesheets, pictures, Flash, and so on in the browser's caches.

4. Using gzip compression

5. Place CSS in the HTML header

6. Place JavaScript at the bottom

7. Avoid CSS Expressions

8. Using external reference JavaScript and CSS

9. Reduce DNS resolution

10. Compressing JavaScript and CSS

11. Avoid URL redirection. URL redirects is made using HTTP status Codes 301 and 302. They tell the browser to go to another location.

12. Remove duplicate JavaScript and CSS

13. Set Etags

The above is only a rough introduction, more detailed indicators, small partners to find it yourself!

Analysis of Web page performance testing tools