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

The following contents are selected from the book "Crazy handouts for Xiaoqiang Software testing"

1. Test purpose

Through the front-end performance test of the main functional pages, analyze the reasons for the slow response of the page from the front-end, and optimize it according to the optimization recommendations to improve the front-end performance, so as to achieve the purpose of improving the overall performance of the system.

two。 Test range

Mainly test the pages commonly used by users, including at least: home page, classification page, search results page and so on. Here we only take the home page as an example for testing and analysis.

3. Testing method

Use YSlow, PageSpeed and other tools for testing, because the site is a third party and not our own, so we can not carry out embedded point testing. You can practice other test methods by yourself.

4. Analysis of test results on WEB side

After passing the test of YSlow, PageSpeed and other tools, the comprehensive result is not good and belongs to a poor situation, in which the rating given by YSlow is F (the worst). The specific results are analyzed as follows:

L there are more HTTP requests. There are 16 external Javascript scripts,7, external stylesheets,18 and external background p_w_picpaths, all of which can be attempted to merge.

L CDN is not used.

L No expiration time specified. Some static resources such as CSS, JS and pictures do not specify an expiration time, especially infrequently changing images like logo should specify Expires headers to instruct the browser to load previously downloaded resources from the local disk rather than over the network.

L Compression is not enabled. Some static resources such as CSS, JS, and pictures do not enable compression, and enabling compression for these resources can reduce their transfer size by 135.2 KiB (68%).

L the picture is not optimized. Properly formatting and compressing the picture can save a lot of data byte space. Especially for pictures like customer service phone .jpg. After optimizing these image resources, their size can be reduced by 282.1 KiB (47%).

L do not zoom the picture in HTML. There are 11 images on this site that have been scaled. YSlow's advice is: the size of the original image should be as big as you want to show, and the image should not be smaller than expected or larger than needed.

For example, if we ask for the reality of a 200x200 picture, and our original picture is only 100x100, the browser needs to wait for the picture to be downloaded completely before knowing the actual size of the picture, and then it will judge whether the picture meets the predetermined size, if it is large, it should be scaled down, and if it is small, it should be enlarged. In other words: the browser cannot make a correct judgment before the picture is downloaded, and the sharpness of the picture may be affected.

5. Analysis of test results of mobile terminal

The problems found on the mobile and the resources that need to be optimized are the same as those in the analysis of the test results on the 4.WEB. In addition, the following contents need to be optimized:

L the font size is not adaptive and is not clear on the mobile side.

L the page on the mobile side is not adaptive, causing the user to scroll horizontally, as shown in figure 8.32.

The viewport is not set on the l page. The page will be rendered in the same size on the mobile device as in the desktop browser, so the system will shrink it to a size suitable for display on the mobile screen. You can add code similar to the following in the Header area:

In practical application, we should also pay attention to the priority order, when there is plenty of time, we can optimize all the content; when the time is urgent, we can shorten the response time of the front-end page by optimizing the elements with high priority and belonging to common resources.

As for the URL that needs specific optimization, it is not listed here because of the limited space.

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.