Front-end promotion defense - performance optimization paradigm

This article strives to provide you with a paradigm for discussing performance optimization-related work when you take part in your promotion defense. To put it simply, if you prepare and elaborate according to this paradigm, you can win the recognition and love of the promotion judges.

The front-end that is obsessed with writing page UI is the same, and the front-end that knows how to quantify revenue is one in a thousand.

It is no longer the primitive front-end era of slash-and-burn cultivation. Being able to implement page UI with high fidelity is a basic skill for every front-end. The phrase "no credit and hard work" is no longer applicable to front-end promotion. Your hard work may be seen in the eyes of your immediate leader, knowing that you stay up late and work overtime every day for business, which will make your year-end performance better, but in the promotion defense, especially the promotion of senior classmates, basically Department, or channel judges, they will not think that these repetitive labors, like assembly line work, have any important value.

How to make them realize the value of your work in a short period of time, this is a question you should think about before promotion!

Why choose performance optimization as a paradigm? Because this sounds great, every front-end student wants to mention it and will mention it when he is promoted, but I often see many students being brushed down because of this during their defense. What many students don't understand is that I have already done this work, the page effect is also very good, and the leader and users have positive feedback, but why are they still here?

The core point - how to quantify your work, quantify your benefits, and make your work visible and understandable .

The following will fully describe your hard work in performance optimization in five aspects, reflecting the value and thinking of your results.

The source of demand

First of all, it is necessary to understand that some needs are arranged, and some needs need to be proactive, which involves a subjective initiative and personal promotion and coordination ability.

As far as performance optimization is concerned, it may be that the user feedback experience is stuck, and the product or the boss arranges it. It can also be that you carefully observe the monitoring data, realize that there is room for improvement in performance, and then put the problem and solution in front of the boss.

During the promotion defense, you must take the initiative to discover the problem, propose a solution, promote the PM to be identified as a requirement, schedule, and develop the process of going online.
Whoever pushes it is the biggest beneficiary of this demand.

2. Indicator data and standard anchoring

 if (没有历史指标数据) {
  return false;
  // 后面的工作将无任何意义！
}

If you have no historical indicator data before performing performance optimization, please stop the performance optimization work immediately. Turning heads, the existing relevant performance indicator data is now collected.

When an experimental group has no control group, the experiment has no meaning. If your performance optimization work does not have clear reference data and determinable standards, please don't do it! It doesn't make any profit! Because there is no way to show it!

Selected business scenarios

When optimizing page performance, don't focus narrowly on the optimization of home page loading performance. Instead, you can choose a core business page according to the actual business scenario, which affects the key nodes of users, such as the Kanban page in the visualization system. (display various data charts), commodity search in e-commerce system, payment link, feed flow in information push, etc.

It only makes sense to optimize when there are business scenarios.

Historical indicator data collection:

The choice to collect historical indicator data is to compare with the performance-optimized data, so we must choose an authoritative way to collect this data.

1. The first company's internal performance monitoring platform

   The company is unified, and the definition, collection, and caliber of all data indicators are unified. When a piece of data takes 3 seconds to reduce to 2 seconds, all people in the company must admit that this optimization is effective.

2. Self-detected performance data from Lighthouse and Performance

   When we collect data from Lighthouse or Performance, it may not be able to form effective data support due to its own computer reasons or the small amount of sample data.

3. Third-party performance testing sites such as Pingdom , SpeedTracker , etc.

   Because of the "wall", some foreign websites have inaccurate data when we test, and when we test ourselves, the sample size data is small.

   Some business data cannot be passed outside the company due to its sensitivity, and these must be considered.

Therefore, if possible, you must use a performance monitoring platform, then choose Lighthouse/Performance, and then choose some third-party performance testing websites.

Performance optimization indicators:

There are two types of performance optimization indicators: one is the common core performance indicators in the front-end, and the other is business-defined indicators

Front-end common core performance indicators:

Indicator name	full name	describe
FP	First Paint	Browser first paint time, first pixel time
TTI	Time To Interactive	When the page is rendered and can respond to user input
FID	First Input Delay	The first time the user can interact with controls such as page input boxes
LCP	Largest Contentful Paint	Maximum content draw time
FMP	First Meaningful Paint	The first meaningful draw, the time when the main content of the page appears on the screen
FCP	First Contentful Paint	The first time the browser draws the content on the screen
CLS	Cumulative Layout Shift	Cumulative layout layout shift, page jitter, screen flicker

Custom indicators: According to actual business needs, the time of key business nodes for reporting statistics is customized, such as the time from data request to completion of drawing for a chart.

Standard Anchor:

On the basis of the existing historical performance index data, follow the excellent performance data in the industry, or proceed from the actual business, determine what time-consuming is in line with the standard and what is excellent.

This standard must be determined in advance and agreed upon. In this way, when doing performance optimization, there is a reference point to know which target direction is correct.

3. Earnings Expectation

Performance optimization is a matter of ROI (return on investment), here you must draw a cake to your boss, expressing that doing such work takes less time, high returns, and has a great impact on user experience. leap.

If there is no ROI, you can do what you can or can't do, and you must not do it.

You can’t say give me 2 months, I can reduce the current page loading time from 10s to 1s, let’s not say whether you can do it in 1s, the boss will basically not agree with only 2 months.

We must produce a clear target value here. For example, we want to reduce this indicator from 10s to 5s, and the performance will be doubled. This is also for future benefit comparisons.

There is also a routine here, which is to give a conservative target value, and then break through this value after completing it, which is also a surprise for the boss.

Reminder: bragging is risky, and you need to be cautious when installing B! I must have a spectrum in my heart. It is much more difficult to reduce the performance time from 2s to 1s than from 10s to 5s.

Four, performance optimization strategy

There are many strategies for performance optimization, and you need to prescribe the right medicine according to your actual business needs. Some conventional ones, such as lazy loading, sub-package strategy, rolling loading, Http2, Gzip compression, etc., are not the focus of this article and will not be described too much.

In the defense, it is enough to say this according to the facts.

5. Quantitative income

Here comes the point! ! ! After performance optimization, be sure to observe and count indicator data again, and do the finishing touches. Without this step, the previous work would be in vain.

Hard work, a meal, did the data meet the expectations?

If there is a performance monitoring platform, this is particularly easy to handle. Check the data in the corresponding day, week, and month dimensions, and observe whether the corresponding time-consuming curve decreases.

When defending, be sure to provide some charts, at least table data, to compare the key indicator data collected before and after, to highlight the effect made, so that the judges can intuitively see the changes in the data and feel you at a glance The performance optimizations done are very good.

If a heavyweight leader also affirms your achievement, remember to ask the judges to disclose it in a straightforward or euphemistic manner during the defense.

Overview

The focus of this article is to provide you with a promotion defense, discussing the paradigm of performance optimization to the judges, not the implementation of specific performance optimization strategies.

Through the sorting and presentation of the five links, the jury can see the results and value of your performance optimization in a very systematic and concrete way in a short period of time, as well as your technical vision and thinking.

If you plan to be promoted to the defense at the end of this year, you can do it now. Statistics of historical indicators, determination of optimization goals and expected benefits, development and launch of performance optimization strategies, and quantification of revenue results.

At the same time, you are very welcome to comment and share your promotion experience and experience for the benefit of front-end partners.

Quantify your work, quantify your benefits, and make your work visible and understandable .