WeChat Mini Program wx.reportPerformance Library

Github link: https://github.com/tealtadpole/tt-wechat-report-performance

Tencent’s WeChat Mini Program has a very robust native performance report tool. But I can’t find any library/util functions that utilize this tool. So, I decided to make one for my own usage, and as well make a tutorial on how to implement it in your projects. You can start by download the code from my repository here. The code should run out of the box in the WeChat Devtool. Make sure you’re using the latest version of WeChat devtool.

About wx.reportPerformance

wx.reportPerformance function can send performance data from client’s device, which means the data provided will reflecting your actual mini program performance from your users/audiences point of view. Tencent also provides a user friendly back office interface to view the data. You can access this back office from your WeChat mini program back office admin page.

To begin using wx.reportPerformance, you need to enable this feature in the back office admin page via 开发管理 》 运维中心 》小程序测速. After you enabled this feature, you can start to create parameters that you want to measure. There are two types of performance that you can measure, 1) network performance or 2) device performance. Each parameter will have a four digit number as an ID. Network performance ID will start with ‘1‘, while device performance ID will start with ‘2‘. Here are my network performance settings that I use.

• ‘NAVIGATION_ONLAUNCH’: 2001,
• ‘NAVIGATION_NAVIGATE’: 2002
• ‘RENDER’: 2002
• ‘SCRIPT’: 2003,
• ‘NETWORK_APICALL’: 1004

After you configured it in the Mini Program back office, you can set the parameters in the performanceConfig.js file. The config file has cleanUrl and debug configuration. I will explain about it more later. Here is my performanceConfig.js file example:

After you configure the performance config, do some configurations in the app.js to enable the performance monitoring. I did this by calling the enablePerformanceMonitoring function in the app.onShow method, and disablePerformanceMonitoring function in the app.onHide method. Make sure to pass this argument when calling the function.

One last configuration that you need to do, is to measure your API calls, I did this by using some local variables in my global request function. The variables store time before and after API call. Then, pass the duration into the reportApiPerformance function.

Note that you need to pass the correct code for API performance. Here I use environment from the config file, you need to modify this accordingly. If you have configured your mini program appId, and you have access to your own mini program back office, you can navigate to mp.weixin.qq.com, and see your data. It should looked like this:

The report itself is quite complete, you can see the user’s client information, such as iOS/Android phone, or high/mid/low-end phone. While for API performance, you can view the geographical data based on user’s province. Which really depends on your API server location, server performance, and user’s internet connection speed. Personally I noticed that west part of China (such as Xinjiang or Tibet) has the slowest API performance compared with other regions. The data I got is pretty much similar to this article about China’s internet connection speed. Shanghai’s internet speed is ranked #1 in the article 🙂