1. The background

When a page has performance problems, such as slow loading and page lag, it is mostly the subjective feeling of users. In order to truly objectively evaluate the Performance and locate the cause of the problem, professional front-end students usually need to check the Performance and other tools in DevTools (as shown in Figure 1), which undoubtedly increases the cost of objectively viewing the problem.

Of course, there are some good tools for profiling pages, but they all have their problems. PageSpeed Insights, Lighthouse.

1.1. PageSpeed Insights (Lighthouse)

PageSpeed Insights and Lighthouse are very similar, so I’ll do it together. These two tools are quite powerful and do a good job of analyzing the page, but they have the following problems:

  • Passive. Users are required to actively execute the tool to see the results of the analysis.
  • Unable to preserve the scene. All tools need to reload the page to evaluate the page, so when the page has some occasional problems, the site is lost, increasing the cost of troubleshooting.
  • The tools are online versions. Intranet products cannot be evaluated.
  • The plug-in version needs to be used in Devtools. Increase the cost of use.

So can there be a tool that can proactively obtain page information, and at almost zero cost, can let users see objective page performance indicators and complete field data, which can be used to trace problems and provide solutions?

2. Solve problems

After discussion, five dimensions are divided to judge page performance, as follows:

  • Page load time: time temporarily positioned as load.
  • Number of loaded resources: Information about all resources loaded during the load process.
  • Large number of resources: resources that exceed 1MB.
  • Number of slow resources: resources that exceed 500ms.
  • Average frame rate: frame rate during loading.

Through these indicators, you can roughly explain the performance of the page and the cause of the problem.

3. The implementation

At present, the Chrome plug-in is used for implementation. The Chrome plug-in has the following advantages:

  • ContentScript Content injection. Analysis scripts can be injected without reinventing the web site. Can also achieve some dynamic notification effect.
  • Action Badge eye-catching reminder. The performance indicators can be written in the Badge to achieve eye-catching reminder effect.
  • Popup details. You can place detailed analysis reports in Popup for easy viewing.
  • Option Indicates the indicator configuration. You can customize indicators and their thresholds.
  • Code reusability. The collection and analysis code in the plug-in can be reused.

3.1. Implementation process

The process is as follows: Collect data divide by age, analyze data divide by age, and generate a report. The plug-in process is shown in Figure 2 below:

4. The plugin

PageStatus App Store: Plugin address

After the page is loaded, the plug-in will automatically display the loading time of the page in the browser toolbar, and the background color is marked with “red”, “yellow” and “green” according to the loading time, reflecting the real-time health status of the page, as shown in Figure 3:

Function of 4.1.

The detailed functions are described below.

4.1.1. Page load time

Page loading time represents the time when the page triggers load, which will be synchronized to the browser toolbar. Click the plug-in icon to display more detailed page loading information, as shown in FIG. 4:

4.1.2. Loading the number of resources

During page loading, all resource requests are represented in this section. Resources that exceed 1S are highlighted in red, and those that are read directly from the cache are highlighted in light color and deleted, as shown in Figure 5:

4.1.3. Large number of resources

During page loading, resources exceeding 1MB are defined as large resources by default. As shown in Figure 6:

4.1.4. Number of slow resources

During page loading, resources whose value exceeds 500ms are defined as slow resources by default. As shown in Figure 7:

4.1.5. Average frame rate

The average frame rate during page loading is calculated, as shown in Figure 8:

4.1.6. Page message notification

The function of in-page notification for projects exceeding standards is enabled by default, as shown in Figure 9:

Configuration of 4.1.7.

All parameters in the plugin can be configured by clicking on the lower right corner of the extension iconpinionClick to enter the configuration page, or right-click the extension icon to chooseoptionsEnter, as shown in Figure 10:

Github Repo