Why do performance optimizations

With the rapid development of the Internet, now the website content is more and more rich, users are more and more high performance requirements of the website, it can be said that performance is the backbone of web sites and applications, we should pay attention to user traffic, SEO, conversion rate, user experience and a series of problems.

The biggest challenges of performance optimization today are mobile:

  1. Affected by hardware devices, the loading speed is slow, the network environment is poor, the screen size is small, and the interaction mode is complex
  2. Users are even less patient, with >3 seconds of loading leading to a 53% jump rate
  3. Continued growth in mobile subscribers and e-commerce business

Performance optimization system

In practical work, front-end performance optimization is often complicated, such as anti-layout jitter, HTML optimization, CSS optimization, image loading optimization and so on, many details need to be taken into account. There are many difficulties in learning and mastering front-end performance optimization. For example, systematic performance optimization data are seriously missing; Performance monitoring early warning platform is not open source, need to develop their own; There are many holes in practice that others do not make public; Performance optimization project approval communication and sharing, etc.

So I’ve been reading a lot of tutorials lately, and I’ve finally come up with a comprehensive map of performance optimization.

I. Performance optimization process

1. Set performance indicators

The first step is to determine what indicators we want to choose. For example, if the page opens slowly and we want to optimize it, where should we start and how will we know the problem is solved after optimization? These need clear indicators to measure.

  1. The industry standard
  2. The optimization model
  3. Performance Measurement APIs

2. Determine performance standards

What are our performance optimization goals and to what extent is appropriate. For example, we want to optimize the opening speed of THE H5 page in the App. The determined index is the opening rate in seconds, and the proportion of requests that can be opened in that second is its performance standard. The main measurement tools are as follows:

  1. WebPageTest
  2. LightHouse
  3. Chrome DevTools

3. Revenue assessment

It would be fine if we only judged whether the performance indicators were optimized or not, but most of the time, in order to make the product students feel that we are serving the product rather than building the wheel, we also need to conduct revenue evaluation related to the product goals. For example, can the conversion rate from list pages to details pages be improved? Can the user bounce rate be reduced?

4. Diagnostic checklist

Connect the business code to the performance monitoring and early warning platform and give the diagnostic list according to the performance criteria.

5. Optimize your approach

If a performance problem is diagnosed, we can combine the performance criteria with the diagnostic checklist to determine the appropriate optimization measures.

What are the aspects of performance optimization?
  1. Transport load optimization: Gzip, KeepAlive, HTTP cache, Service Worker, HTTP/2, SSR, Nginx
  2. Resource optimization
    • Compress & Merge
    • Image format
    • Image to load
    • The font to optimize
  3. Rendering optimization
    • Modern browser rendering principles
    • Visual rendering links and methods
  4. Build optimization
    • Webpack optimizes configuration
    • Resolution of the code
    • Code compression
    • Persistent cache
    • Monitoring and analysis
    • According to the need to load
  5. Code optimization
    • JS optimization
    • HTML optimization
    • CSS optimization
What are the common performance tuning tools?
  1. SVG optimized ICONS
  2. FlexBox layout
  3. preload
  4. pre-rendered
  5. Windowing improves list performance
  6. Skeleton components

6. Performance project approval

Win the support of product manager and back-end colleagues to make the optimization go on smoothly

Performance practices

After optimization, initiate the project to go online, track and evaluate the effect, and deposit the project results in the form of documents or codes in combination with the scene for reference.

2. Collecting and reporting performance indicators

The main content is to decompose the performance indicators mentioned above in the form of codes to ensure that they can be collected, and then collect statistics of buried points after SDK encapsulation. Finally, report strategies are formulated according to the actual situation. Before reporting, discard dirty data (that is, abnormal data) to avoid occupying user network bandwidth.

Performance monitoring and early warning platform

The performance data collected in the previous step is analyzed and monitored by comparing performance standards. When a performance indicator exceeds a certain monitoring threshold, the performance monitoring warning platform sends an alarm message to us by email or SMS.

In terms of structure, the performance monitoring and early warning platform includes two parts: performance data processing background and performance visualization foreground.

Performance data processing background

After the performance data is reported to the performance platform, the data is preprocessed, cleaned, and calculated to generate the data required for foreground visualization.

Performance visualization foreground

Performance display and performance monitoring warning visualizes core data indicators, monitors performance data fluctuations, and sends alarms by SMS or email when data exceeds the threshold.

Finally, to be sure, do a performance specific test before you go live to check that your actions are in line with your performance optimization expectations. For example, whether the request is made correctly, whether the request is processed correctly, whether the performance platform data is presented correctly. If not, you need to optimize.

The above is the optimization process and core content of the whole performance system.

summary

  1. The performance optimization system is composed of performance optimization process, performance index collection and reporting, and performance monitoring and early warning platform
  2. In the process of performance optimization, attention should be paid to the combination of product revenue assessment, diagnosis list, determination of means and project approval.
  3. Performance acquisition and early warning platform is a monitoring model for performance optimization in the field of front-end monitoring, enabling us to find problems in the first time.

The last

Learning performance tuning is not just about mastering some tuning techniques. In particular, we should pay attention to the performance optimization, the index is one of our grasp, first of all, you have to determine its index, and then according to the index to take measures, otherwise it will be like a headless fly, there is no implementation of the target.

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it.

Read more high-quality articles, you can follow my wechat public number [Sister Yang talks about the front end], push high-quality articles every day, we communicate and grow together.