Front-end performance optimization Note (1) : Performance optimization system and key index setting

Writing in the front

After the development of websites or apps, we are most worried about performance problems such as page lag and blank screen when users visit, which seriously affects user experience. Big companies are now focusing on performance improvements and optimizations, setting front-end performance standards and developing early warning monitoring platforms. So front-end performance optimization is usually trivial, how should we systematize trivial work?

Performance Optimization Process

Before the performance optimization process, we should first know the related process of performance optimization, so that we can strictly follow the process. At the same time, the designation of optimization practice process is to ensure that trust can also be implemented, which is an important guarantee for long-term maintenance of optimization results, and also the motivation for our later maintenance.

The performance optimization process includes:

1. The index set
2. Performance criteria
3. Benefits evaluation
4. Diagnosis of listing
5. Optimization means
6. Performance of the project
7. Performance practices

Indicator setting and performance criteria: What indicators should we choose as weathervanes? Once you set the metrics, you define the performance criteria what are our performance optimization goals? How much performance optimization is appropriate?

Evaluation of benefits: When we make these performance optimizations, we need to evaluate the benefits in relation to the product goals, and there is little point in making these changes without the benefits. Performance optimization is to serve the product and improve user experience, not to repeat meaningless wheel building.

Diagnostic list: In fact, in our production process, there are many performance problems that can not be monitored immediately. For this, we need to connect the business code we wrote to the performance monitoring and warning platform, and provide a diagnostic list according to the performance standards, which is convenient for us to carry out subsequent improvement and optimization.

Optimization means: After the monitoring and early warning platform gives the diagnostic list of our code, we need to determine the corresponding optimization means based on the performance standard.

Performance project approval: When we carry out performance project approval, we need the support of products and back-end students, which is also an indispensable part of our performance optimization process.

Performance practice: Projects that have experienced performance optimization need to be launched online again, followed up for effect evaluation, and deposited in the form of documents or codes in combination with scenarios, so as to facilitate our subsequent learning and experience summary.

Collect and report performance indicators

We mentioned the basic process of performance optimization earlier, where important environments need to rely on the monitoring and warning platform, and need to visualize performance collection and reporting. Now we need to implement and implement the performance indicators mentioned above in the form of code, decompose and implement to ensure that the discovered performance problems can be collected, and then conduct SDK encapsulation to collect the buried points, and finally specify the reporting strategy according to the actual situation. Specific ones are:

1. Index decomposition
2. Metrics collected
3. The SDK package
4. Statistics buried point
5. Report the strategy
6. Data preprocessing

The performance monitoring and warning platform is mainly divided into three parts: performance data processing background, performance visualization foreground, and performance data storage.

• Performance data processing background: After the performance data is reported to the performance platform, it preprocesses, clarifies, and calculates the data, and then generates the data required for foreground visualization.
• Performance visualization foreground: Visualizes core data indicators and monitors performance data fluctuations. When indicators exceed a certain monitoring threshold, the performance monitoring and warning platform will send warning information to us through emails, short messages or other notification forms.
• Performance data store: Stores collected and reported performance data for subsequent data analysis and visualization.

Performance monitoring and early warning platform

After the development of our project, we must do a performance specific test before we are ready to go online to check whether the measures you take are consistent with the performance optimization expectations.

In the overall performance optimization system, what do you think is the first thing to do? For example, how can we optimize the performance of the APP activity page developed by your company when loading data is slow?

Of course, the first step is to determine its performance indicators and standards are what? Only when the performance metrics are set and the criteria are known can we learn how to optimize performance around them later on.

So what kind of indicators are worth paying attention to? Measurable data, of course, that revolves around serving and optimizing the experience of the user. Measurable is something that can be measured in code, focusing on key results and real experiences that are user-centric.

• Key takeaway: We know to focus on what users care about, but what do they care about? When the user enters the product details page, of course, he is concerned about how the product is, specific to the page is the product description, product head picture, product price, product sales and how to buy buttons and other key information.

• Real experience: Of course, real experience is the feeling of using the product. For example, when the user enters the list page, a popup window suddenly pops up when the page is loaded. Will he feel annoyed? For example, we have annual reports at the end of the year on all platforms. If the user swipes the page and the video, animation and music play is not smooth, it will greatly reduce the desired effect of the product.

Setting and standard of key indicators of performance optimization

In terms of key performance optimization indicators, the current industry mainly focuses on loading, especially the white screen time and first screen time of a page. In addition to manual collection and reporting of buried points, automatic collection and reporting can also be implemented. However, the industry is still exploring key indicators of interactivity and visual stability, and no unified measurement standard has been reached. Therefore, manual collection must be carried out at present.

Load: The loading process in which the page is loaded from the white page to the display when the page is entered. When you open the website page, you will find that some of the text and pictures on the front page of the website appear very slowly, but some load very quickly, and the process of the content appears is the loading process.

Visual stability indicator: CLS(Cumulative Layout Shift) is also the Layout offset, which refers to the deviation of unstable elements in the line of sight when the page changes from one frame to another frame. The current visual stability indicator CLS is relatively cutting-edge, and its acquisition method has no better processing scheme besides relying on Google Lighthouse for local acquisition. For example: you are about to click on the page to buy a link, the original location suddenly inserted a 9.9 free shipping purchase AD, so the user clicked into the product advertising page, you say awkward?

Interaction indicators: FID (First Input Delay) indicators must be less than 100ms, while PSI (Perceptual Speed Index) is less than 20%.

White screen time: the time when the first character appears on the page after the input content enters the press enter (including refreshing and skipping). The standard time is 300ms.

First screen time: The first screen time is calculated as “first screen time = white screen time + rendering time”. The first screen loading is the most discussed topic. On the one hand, the first screen loading performance of the Web front-end is generally poor. On the other hand, the first screen loading speed is very important.

• From the perspective of importance, the content that users see at first sight after opening the page is very important, such as the header of the e-commerce page, commodity price, purchase button, etc. This content should be accessible even in the worst of Internet environments.
• From the perspective of experience integrity, after entering the page, there is a blank screen. Only when the first character is loaded and the content on the first screen is displayed, can we consider that the loading is complete and the user can use it.

The standard of the first screen time was initially judged based on the sensitivity of the page to the time, and was mainly calculated based on the average first screen loading time of users, without distinguishing 2G/3G/4G/wifi network environments in detail.

The first screen time is less than 1s, the user will feel fast loading, more than 2.5s will feel slow. When the page opens in 1s, people are not sensitive enough to perceive the difference between 10ms and 50ms. When it comes to 2G/3G weak network environment or unstable network environment, the time for users to load the network will become extremely long, which seriously affects the overall index.

In this regard, people began to use median sit normal distribution, see quantile value statistics. P50 (50 quantile value), P90 (90 quantile value), and P99 (99 quantile value). Taking P99 as an example, the first screen time ranked 99th is obtained by sorting all the first screen time as an indicator, namely P99.

Later, an indicator is introduced: second open rate, that is, the proportion of users who open within 1s.

After all, the granularity of the first screen time is relatively coarse. If the first screen time is too long, the blank screen time, then what is the problem?

• First screen time: it can be divided into white screen time, data interface response time, image loading resource time, etc
• White screen time: The data interface response time can be obtained directly from the back-end cebu without the need for the front-end to re-calculate

Refer to the article

• Front-end Performance Optimization Methods and Practices

Write in the last

This article is just the beginning of the “Front-end performance optimization series” to guide readers to have a better understanding of the performance optimization system, understand the relevant indicators and indicators, because learning performance optimization is not just to master some optimization skills, but also to understand why to do so.