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

1 Overview of page performance testing

Page performance testing is a kind of performance test aimed at page performance optimization. The purpose is to test the pages of the Web system to confirm whether the pages of the system will affect the performance of the system and provide basis and suggestions for page optimization, and finally improve the overall performance of the system and improve the satisfaction of user experience. His focus is on the page, not on the back end. It's different from what we usually call performance testing.

Compared with the application system based on Cpact S architecture, all the data of Web application system needs to be downloaded from the server. Although the browser has a caching mechanism, customers still need to download a large amount of data each time they visit.

Many people think that if there are a large number of servers to support, there will be no performance problems, in fact, it is wrong, when the hardware reaches a certain level, it is no longer useful to upgrade the hardware. For example, when a page contains hundreds of requests, the size of unoptimized javaScript files, CSS files and images in the page reaches 10MB, even if only one user is currently accessing the system, the page access speed will be surprisingly slow, even if you add more servers will not necessarily have a significant performance improvement.

2 general methods to improve page performance

2.1 reduce the number of round trips between requests and responses

HTTP caching is the best way to reduce the number of client-server round trips. Caching provides a mechanism to ensure that clients or proxies can store something that will be used later in the HTTP response. (that is, when the request is made for the first time, it will be cached on the client side. Next time, if the page still needs this JS file or CSS file, don't go to the server to take it down, but you still have to go to the server to access it, because the request needs to compare the EAG value.

2.2 reduce the round-trip byte size of requests and responses

L use fewer pictures

L condenses all the CSS into one CSS file

L condenses all the scripts into one JS file

L simplify your page time

L use HTTP compression

PS: it seems too idealistic.

2.3 too many yahoo's 22 rules, value reference

3. Build the environment for page performance testing.

Environment: Yslow+ShowSlow+WAMP (VertrigoServ)

The steps are as follows:

N create a db as showslow

N Import tables.sql in downloaded ShowSlow

Put the downloaded ShowSlow into the www directory and modify the

$db = 'showslow'

$user = 'root'

$pass = '123456password; / / the password is changed according to your situation.

N Open ff configuration about:config

Filter: yslow

Modify the following three items:

Extensions.yslow.beaconUrl=

Http://localhost.com/showslow/beacon/yslow/

Extensions.yslow.beaconInfo = grade

Extensions.yslow.optinBeacon = true

N restart the browser: enter http://localhost/showslow/ in the browser

If there are no errors on the page, congratulations, you are so lucky.

N start ff, enter ShowSlow, and then start yslow on the page you want to test

4 Test range

Test some of the online pages as follows:

Www side: home page, item page, my order page

Seller side: order management

5 test results and analysis

5.1 www side: home page

Test time: 2011-9-30

Location: company

5.1.1 reduce http request

8 external js

4 external css

10 external background images

I wonder if you can use CSS Sprites to integrate pictures, merge CSS files, and merge JS files.

5.1.2 join CDN

Html.xxx.com

Www.xxx.com

Log.xxx.com

Img.xxx.com

5.1.3 set expired http header

Scripts, stylesheets, pictures, Flash and so on can be cached in the browser's Cache, but there is also a certain risk. After all, js and css have certain logic.

For a specific list, see the home page-there is no expired http header set .txt

5.1.4 gzip compression of page components

There are the following things on the home page. I wonder if they can be compressed.

Http://html.xxx.com/html/css/common0601.css

Http://html.xxx.com/html/css/header0811.css

Http://html.xxx.com/html/css/index0902.css

Http://www.xxx.com/css/jquery.autocomplete.css

Http://html.xxx.com/html/js/specl2.0.5.js

Http://html.xxx.com/html/js/ajax.js

Http://html.xxx.com/html/js/specl-utils.js

Http://html.xxx.com/html/js/jquery.autocomplete.js

PS: this is an online compression tool, personal feeling is good, can give better compression information and parameters, easy to debug, address: http://tool.lanrentuku.com/csszip/

5.1.5 location of js

In order to achieve maximum download parallelism, the best thing to do at the initial stage of page loading is only HTML download, CSS download, JS download, etc., and then realize page rendering, JS script running and so on. So the general solution is to introduce the JS link at the head of the page and execute the JS script at the bottom of the page.

I tried the following link, except for the first one, the rest can be put at the bottom.

Http://www.xx.com/js/jquery.js

Http://html.xx.com/html/js/specl2.0.5.js

Http://html.xxx.com/html/js/ajax.js

Http://html.xxx.com/html/js/specl-utils.js

5.1.6 set ajax cache

Although ajax is asynchronous, there is no guarantee that it will not wait for this period of time, but to avoid repeated ajax requests, plus caching is also a good thing.

When testing the home page, there is only one address, as follows

Http://www.xxx.com/ajax/loginInfoAjax.jhtml?jsoncallback=jsonp1317353338559

I think this seems to be some information about members, including the number of items in the shopping cart, user name, status, etc.

5.1.7 reduce the number of DOM elements

There are almost 1584 DOM elements on the home page.

Whether you can optimize the structure of the home page, after all, the home page is the door curtain, user experience is also very important!

5.1.8 try to use domain name-independent cookie

The so-called cookie-free domains is the domain name that does not send cookies when the browser sends a request for static content. The home page is as follows:

Http://www.xxx.com/js/100023.js

Http://html.xxx.com/html/images/header0811/bor.gif

Http://html.xxx.com/html/images/header0811/menu.png

Http://html.xxx.com/html/index0601/indexbg.png

Http://html.xxx.com/html/index0601/boder.gif

Http://html.xxx.com/html/index0601/h3bg.gif

Http://html.xxx.com/html/index0601/floorico.png

Http://html.xxx.com/html/index0601/botdy.gif

I think some of the pictures will not be changed. Should we consider putting them on a static server to reduce the impact of repeated transmission of cookie on the primary domain name?

5.1.9 simple statistics

5.2 www side: item page

The test item page is:

Http://www.xxx.com/goods/3B2BDB2CF26A4641_453v4563.html

Test time: 2011-9-30

Location: company

5.2.1 reduce http request

There are 21 external js

6 external css

12 external background images

I wonder if you can use CSS Sprites to integrate pictures, merge CSS files, merge JS files. I wonder if you can use CSS Sprites to integrate pictures, merge CSS files, merge JS files.

5.2.2 set expired http header

You can cache scripts, stylesheets, pictures, Flash, etc., in the browser's Cache, but there is also a certain risk, after all, js and css have a certain logic.

For detailed URL, please see the item page-no expired http header.txt is set

5.2.3 gzip compression of page components

There are the following items in the item page. I wonder if it can be compressed.

Http://www.xxx.com/css/jquery.autocomplete.css

Http://html.xxx.com/html/css/common0601.css

Http://html.xxx.com/html/css/header0811.css

Http://html.xxx.com/html/css/details0629.css

Http://html.xxx.com/im/css/webIM.css

Http://html.xxx.com/html/js/jquery.autocomplete.js

Http://html.xxx.com/html/js/search.js

Http://html.xxx.com/html/js/specl2.0.js

Http://html.xxx.com/im/cdjs/jquery.easydrag.js

Http://html.xxx.com/im/cdjs/jquery.bgiframe.js

Http://html.xxx.com/im/cdjs/plus-utility.js

Http://html.xxx.com/im/js/chat.js

Http://html.xxx.com/html/js/ajax.js

Http://im.xxx.com:9090/cdmocsc/commons/connection.jsp?...

Http://html.xxx.com/im/cdjs/jquery-1.4.2.min.js

PS: this is an online compression tool, personal feeling is good, can give better compression information and parameters, easy to debug, address: http://tool.lanrentuku.com/csszip/

5.2.4 location of js

Too much js in the item page is put in the header.

Http://www.xxx.com/js/jquery.js

Http://www.xxx.com/js/jquery.cookie.js

Http://html.xxx.com/html/js/jquery.autocomplete.js

Http://html.xxx.com/html/js/search.js

Http://html.xxx.com/html/js/specl2.0.js

Http://www.xxx.com/js/qt.js?...

Http://www.xxx.com/js/pageutil_20110706.js

Http://www.xxx.com/js/goodsdetail_20110705.js

Http://www.xxx.com/js/jquery.countdown.1.0.js

Http://www.xxx.com/js/jquery.lazyload.mini.js

Http://html.xxx.com/im/cdjs/jquery.easydrag.js

Http://html.xxx.com/im/cdjs/jquery.bgiframe.js

Http://html.xxx.com/im/cdjs/plus-utility.js

Http://html.xxx.com/im/js/chat.js

Most js can be placed at the bottom, especially some directly written function

5.2.5 avoid css expressions

Http://html.xxx.com/html/css/details0629.css

Just this one, sometimes I have to use it, but it's better to use less. Haha, this thing is powerful and dangerous.

5.2.6 reduce DNS lookups

Www.xxx.com: 21 components, 285.7K (88.5k GZip)

Html.xxx.com: 31 components, 428.6K

Log.xxx.com: 1 component, 12.4K (4.1k GZip)

Img.xxx.com: 51 components, 409.2K

Space.feixin.10086.cn: 1 component, 0.0K

Wpa.qq.com: 1 component, 0.0K

Im.xxx.com: 1 component, 2.7K

No way, this can not be controlled very well, even Taobao is the same, just float by for a while.

5.2.7 reduce the number of DOM elements

There are 1243 DOM elements in this item page, er. It's almost as good as the home page.

5.2.8 simple statistics

The chart on the left shows the loading of the page elements in the empty cache, and on the right shows the page loading after the page elements use the cache.

Uh... The number of requests seems to be quite large. I caught up with the home page. Hey.

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.