"Turn" two Web front end performance testing tools

Some time ago took over a web front-end performance optimization of the task, do not know where to start, check a lot of information, found in fact is quite simple, simple to say.

I. What is the front-end performance test? Front-end performance test objects mainly include:

HTML, CSS, JS, AJAX and other front-end technology development of the WEB page

The main factors that affect the speed of users browsing the Web page are:

Service-side data return, network transmission, page rendering, etc.

Front End Performance testing purposes:

Calculate the load time index including page rendering, network transmission and server-side resolution, evaluate the performance of the page, identify the main factors and bottlenecks affecting performance, and on this basis, give some optimization suggestions and solutions to improve the user experience

Front-end performance optimization main tools:

page Structure analysis tool : Yslow/pagespeed

It is used for local development or local testing through static analysis of the number of pages js/css/image and the number of requests, request types, caches, etc.

Real User Browsing page analysis : OneAPM Browser Insight

Through the real browser access to the page, collect the page of the standard information, Ajax, network and other data terminal analysis, more for intranet multi-terminal system detection and Web site detection

Two. Static analysis--yslow (industry commonly known as: Yahoo Evaluation site performance of 23 military)

By installing the Yslow plugin to your browser and opening it, you will be given a scoring tip in the control Panel and suggestions for improvement.

YSlow's Grade (hierarchical view)

Yslow gives the site performance score from F~a,a Best, F worst, through the test blog, the site has 4 points lowest, for example, the minimum points in the tip: my blog HTTP request too much. There are 14 external JS, 3 CSS files (previously I have merged from 6 to 3), 14 CSS background images.

Yslow's advice is to let me merge these, as for the merge CSS reference picture I introduced in the "7 tips to improve the speed of Web site opening."

Yslow components (component view)

You can test the amount of space that each element of the page occupies. For example, I blog a page, there are 236 images (picture), occupy the 489.2 K, through a detailed view, found from the Gravatar portrait of the reference picture is very large, plus the blog itself comment volume is large, each avatar occupies a few K, hundreds of occupies the entire page 50% size, and the picture is quoted, and the load is slower.

So, the conclusion is: Gravatar, although enhanced interactivity and personality, but also a solid impact on the site speed.

Yslow Statistics (Statistical information view)

The chart on the left shows how the page elements are loaded in the empty cache, and the right side is the page load using cached pages. Can be intuitively seen (especially I marked the red box), this page has 263 HTTP requests, the size of the Web page reached 773.9K, means that every open a page almost need to download 1M of things, and by using the cache we can see the slice is basically cached, and the total size of the page compression to 43.2K.

Statistics This Statistics view tool is just as intuitive as the components (Third tab), and if you want to get performance tuning recommendations, see the Grade (Second tab) for detailed recommendations.

Three. Terminal analysis: OneAPM Browser insight/industry commonly known as-real user monitoring

Through the various language probe to the page automatically inserted JS code, in the browser when browsing to collect page load time and network information, more for the intranet multi-terminal system detection and Web site.

Main Performance Index: white screen time, first screen time, resource loading finish time, webpage loading finish time

OneAPM's Browser Insight does not simply window.performance data collected and then reported, they open from the Web page of the entire process to distinguish between four response time, the specific criteria for each page is labeled. In order to avoid the special circumstances of a particular visit slowing down the entire average time, users can also combine the following positioning analysis features.

View page performance from the overall trend--location analysis

In fact, most Internet companies optimize the front-end Web page, is concerned about the majority of open their own web pages is fluent, one or two cases are not within his consideration or is not a priority.

The location analysis function realizes the partition of user experience by response time, including Apdex index partition and Web page load time standard partition, which can clearly locate the user experience Group, and view the application performance range according to different groups, including network, server request queueing, the processing time of Internet application, Time-consuming, time-consuming, and multi-dimensional viewing of the impact range of user experience zones

Slow load tracking-waterfall flow graph

Page load slow everyone can feel it, but is the reason for the server? is the cause of the network? Is the reason for page resource loading? Which picture is slow to load? These problems are OneAPM by slow load tracking. A few dry pictures!

It has to be said that this is really good! The interface is very beautiful, but also very detailed, the Android 4.3 version of the browser can also be monitored!

All right, just say this today, and then we'll have a chance to talk.

Go to two Web front end performance testing tools