Accelerate the future! Summary and follow-up prospect of Autohome App application performance optimization

background

As an important carrier for Autohome to connect 500 million users around the world, the Autohome App is one of the core businesses of Autohome. In the fierce market competition, it is our core competitiveness to provide high-quality products and services to our customers. Facing the ever-increasing user needs and technical challenges, and satisfying users' pursuit of excellent experience, the Client R&D Department has formulated the basic direction of "creating high-quality products, releasing production capacity, and inspiring the future". "Casting high-quality goods" emphasizes improving product quality and user experience. "Release capacity" means making full use of existing resources and capabilities to improve the efficiency of R&D and delivery. The goal of "Enlightening the Future" is to actively pay attention to industry trends and innovative technologies, and constantly explore the frontier fields, and actively introduce new technologies and solutions. The theme of this sharing is our efforts in the direction of "casting high-quality goods", and a detailed summary of our optimization work. At the same time, we also look forward to the future development direction and continue to work on improving the performance and user experience of the client.

Summary of special performance optimization

1 App client performance optimization summary

In today's digital age, apps have become an integral part of people's lives and work. Client performance optimization has become one of the important tasks of App development. In order to improve the user experience, it is necessary to continuously pay attention to and improve various performance indicators, such as startup speed, page response speed, fluency, etc. For these indicators, we have formulated a comprehensive improvement direction, including tool and platform construction, special indicator experience optimization, process specification, etc. Committed to improving the stability, fluency and response speed of the App, and bringing a better experience to users.

1.1 Tools and Platform Construction

In order to better monitor and optimize client performance, it is necessary to build and improve App performance testing tools and technical operation platforms
. Withdraw the SDK to collect comprehensive and accurate performance data.
Data processing: We will uniformly process the data reported by the collection SDK, including log reception, log analysis, data calculation and storage, etc., to improve the readability and effectiveness of the data.
Data viewing: Provide detailed on-site logs and multi-dimensional data viewing to better understand performance issues. Users can easily view various performance indicators, such as CPU, memory, network, abnormal location, etc.
Problem Analysis: Automatically helps users quickly locate the cause of the problem. Users can also use various analysis tools to assist in locating problems.
Trend analysis: view data indicators globally, analyze indicator trends and business trends, so as to better formulate optimization strategies.
Abnormal alarm: Provide various dimensions of automation and intelligent abnormal alarm function to detect and solve problems in time. Users can set their own alarm conditions, and receive alarm information in time when an abnormality occurs, so as to solve the problem quickly.

1.2 Experience optimization of special indicators

Continuously optimize the platform structure and formulate a systematic optimization and improvement plan to achieve the Autohome App flashback rate <=0.08%, App page second opening rate >=98%, App startup 2s compliance rate >=98%, H5 1.5s Opening rate>=70%, main part freezing rate<=1%, serious freezing rate<=0.01% target. The specific measures are as follows:
Flashback problem: go deep into the system source code to solve the system flashback problem, formulate a systematic memory optimization plan, solve the memory OOM crash, overcome the bottom-level crash of Native, and specialize in solving difficult problems in various departments.
Second-open improvement: Improve the network layer technology upgrade, upgrade the page rendering engine, optimize the business-side logic collection, implement strategies such as distributed loading, use preloading and caching, and improve user browsing experience.
Caton optimization: Improve the fluency of the main app by reducing the time-consuming of the main thread, optimizing the page level, and optimizing the algorithm.
Startup acceleration: optimize startup time, and increase the speed of opening the App through delayed initialization, asynchronous loading, lazy loading, business sorting, etc.

1.3 Process specification

Develop a complete internal communication and collaboration launch process specification, and comprehensively improve the quality and efficiency of App launch by implementing process specifications and measures. Launch process specification: formulate a clear launch process specification, including demand
review, design review, development review, test review and launch Review and other links to ensure that each link has been fully confirmed and accepted to reduce the risk of going online.
Internal communication and collaboration: establish a cross-departmental collaboration mechanism, clarify the responsibilities and communication channels of each department, and strengthen communication and collaboration in order to solve problems in a timely manner and improve the efficiency and quality of online.
Automated detection: Use the automatic detection function of the App performance detection platform to monitor and evaluate various performance indicators of the App, discover and solve potential problems in time, and ensure that the quality of the App is up to standard before it goes online.
Quality assessment: Establish a sound quality assessment mechanism to conduct a comprehensive assessment of the launch of each version, including performance indicators, functional integrity, stability and security, to ensure that the quality of the launch version meets the requirements.
Problem feedback and resolution: establish a complete problem feedback and resolution mechanism, and deal with user feedback problems in a timely manner. For problems found after going online, follow up and solve them in a timely manner, and feed back to the corresponding departments to discuss the root cause of the problem and formulate a system solutions to avoid recurrence of similar problems.

2 Optimization effect display

2.1 The 6 overall indicators of the three major apps all meet the standards

1. App flashback rate reduced by 79.71%
2. The opening rate of H5 in 1.5 seconds increased by 75.71%
3. App freeze rate reduced by 73.68%
4. App severe freeze rate reduced by 98.16%

2.2 In terms of the number of quality problems reported by UEC users, after special performance optimization, the overall quality problem feedback is reduced by 90%

3 H5 end performance optimization summary

In view of the current situation that most of the front-end H5 pages are CSR applications, the core goals of the H5 second open rate optimization measures are two:

1. The content appeared at the first time (waiting on the white screen will make users anxious), we added a skeleton screen at the right time and position;
2. Advance the time when business content appears (skeleton screen can only slightly ease the mood of users);

In order to achieve the above two goals, we have selected four directions including "Infrastructure", "App Integration", "Rendering Strategy" and "Advanced Refinement", and implemented a number of technical optimization methods: infrastructure optimization and
improvement
" Front-end acceleration service", so that the HTML and static resources it hosts can enjoy Nginx-level optimization, including:

• The original site and CDN spit out the best image format WebP that the user's browser can accept, without the need for developers to pay attention;
• Support refresh CDN cache, resource CDN preheating;
• Supports basic JS image cropping, effectively reducing the image size while ensuring the display effect;
• Developers can finely control the cache time of various resources by themselves, and at the same time provide developers with a "development mode" to achieve no cache for static resources;
• CDN hit rule upgrade, ignore unnecessary URL parameters, improve CDN cache hit rate;
• Resource cache time >= 3600 seconds;

App Fusion Optimization

• Cooperate with the client team to realize the front-end key JS Lib preloading: In the App WebView, the
  resources related to the three common frameworks of React, Vue, and Zepto and Polyfill are preloaded, and specific resource addresses are referenced in the project to achieve unimpeded Plugged resource loading;
• Adjustment of calling timing of native "Loading Dinosaur" Banner;
• Wider promotion of App bridging protocol JS library ahApp 3.0 to improve interactive performance;

Rendering strategy optimization
In order to ensure user experience and completely avoid the appearance of white screens, we have issued a general skeleton screen solution (reference), which immediately displays the skeleton screen during the page loading process, giving users a feeling that the page is loading and reducing the number of pages The waiting time for loading improves the user experience. At the same time, it is required that no network requests occur before the skeleton image is rendered. Before that, the HTML content should not exceed 4KB
.
Too much development time to see results.
In order to maximize the effect, we have also developed a set of refined quantitative standards to guide specific optimization operations. As long as the following indicators are met, the effect of the "H5 second opening rate" will go further, but specific development students need to fine-tune the code item by item, which is an advanced operation. The details are as follows:

• CSS/JS resources are merged, currently all H5 domain names are supported (reducing one request and reducing the time to create a request);
• Lazy loading is added to pictures outside the first screen (giving priority to network resources to the first screen);
• Control HTML page size <= 32KB;
• The total number of requests for the first screen <= 50 (before LCP is triggered);
• Ordinary image resources <= 30KB, large image resources <= 100KB;
• First screen consumption traffic <= 500KB (including HTML / CSS / JS / IMG / etc…);
• Manual JPEG/PNG compression, for example: https://tinypng.com/;
• Manual GIF compression, for example: https://docsmall.com/gif-compress;

The optimization effect shows that
the overall H5 second opening rate of the App has increased from 60% in October to 89%+ in December and has remained at a high level, as shown in the figure below:

Prospects for subsequent quality improvement

In the governance of the key indicators of [Special Performance Optimization], we have made some achievements, which are the result of the joint efforts of multiple departments and many employees.
The R&D Department of the Autohome client will continue to focus on user needs, strengthen technological innovation, promote technological change, and strive to create an excellent product experience, with the goal of meeting users' needs for high-quality products. At the same time, we will continue to optimize the workflow, improve development efficiency, explore new development models, and actively apply new technologies to bring more surprises and convenience to users. We will always adhere to the concept of "customer first, technology driven", and continue to strive to achieve the company's strategic goals. Continue to work hard in the following three directions: "Good UV Governance Project", "Building Quality Closed Loop", and "H5 Performance Optimization"

1 Good UV treatment special project

The goal is to formulate experience standards for core pages, promote the improvement of relevant indicators, and ultimately improve users' experience on core pages. The project goals are divided into: the overall good UV rate of the app is up to the standard, the good UV rate of the core pages of the business is up to the standard, and the special optimization project: the performance data improvement of the player, pictures and interfaces

1.1 Indicator Definition

1. Core pages: TOP5 pages of each business line in the main App, or pages with UV>10W, or other key pages (such as capital retention, 3D auto show) 2. Good UV on the App side: Good
UV on the App side reflects the smoothness of a user And stable experience. Within a day, if the user does not experience the four situations of flashback, freezing, slow opening, and error, then this user is a good UV user.
3. Divide four types of problems from the technical dimension:
general problems (flashback, severe freeze, slow page opening),
interface problems (slow interface, interface error),
picture problems (slow picture opening, wrong picture),
playback problems (slow start , playback error, playback freeze)
4. Core page good UV rate: within a day, on a core page, the number of good UV users/the total number of page UVs.

1.2 Index Calculation Method

Calculation formula for core page good UV rate:
core page good UV rate = 1 - core page bad UV / core page UV
core page bad UV = distinct (general problem UV | interface problem UV | image problem UV | playback problem UV)

1.3 Index Assessment Dimensions

The performance of the client is closely related to the hardware environment of the user's device. In many cases, the substandard performance is affected by hardware factors (the speed of the user network is limited, the frequency of the CPU is reduced, the memory is insufficient, etc.), in order to better improve the user experience , To break through the performance bottleneck caused by our own problems, we will give priority to improving the performance experience of high-quality users, and better improve the experience of most users.
The evaluation of good UV rate is divided into two dimensions: high-quality users and all users. High-quality user definition: good network! Good equipment! Users. (Good network: refers to a user who has not encountered a weak network within a day; good equipment: refers to high-end equipment)

1.4 Player, picture and interface good UV special project

In order to further improve the user experience, especially the video playback experience, picture loading speed and page response speed, we have set up a special project for players, pictures and interfaces, aiming at in-depth research on important functions, targeted optimization performance, and improved user experience .
Player performance improvement: Establish a data query platform to monitor and evaluate indicators such as time-consuming first frame, stuttering, and playback errors, and evaluate optimization effects based on data. On the playback side, optimize for different scenarios, including video preloading, player preloading, DNS pre-analysis, sending media information in advance, using live LAS protocol, etc. At the same time, optimize the use logic of the player, reasonably adjust the definition according to the scene, and perform transcoding optimization at the same time to improve the user's playback experience.
Image performance improvement: image request strategy optimization, loading image support for automatic cropping, using appropriate compression algorithms and formats to reduce image file size, and optimizing the image network request protocol, in-depth docking with CDN manufacturers, and customizing the alarm process for common errors , automated problem solving.
Interface performance improvement: Aiming at the problems of low link reuse rate and many DNS resolution errors caused by many domain names in the Autohome business, a unified domain name convergence scheme was developed to reduce the domain name resolution time and connection establishment time of network requests. Secondly, in order to solve the problem of high connection error rate, strategies such as mobile/Wi-Fi multi-channel, composite link and H3 protocol were developed to reduce the interface error rate and improve the speed of the interface, so as to ensure the smooth experience of users during use.

2 Create a quality closed loop

2.1 R&D period

During the R&D period, establish a R&D quality evaluation system and improve automated performance testing. Specific measures mainly include code testing and performance acceptance platform.

2.2 Before going live

In order to ensure the quality and stability of the product after it goes online. We will connect the code release system and various business configuration platforms to the performance acceptance platform, so as to realize no dead-end performance testing before going online, and ensure the stable operation of the product. Secondly, we will optimize platform performance indicators to find problems more accurately to improve user experience.

2.3 After going online

Create an online problem analysis assistant to quickly analyze, locate, and solve problems
Create an intelligent online problem analysis assistant, use automation technology to quickly obtain and analyze application running logs, automatically detect abnormalities and diagnose problems, and then report the results back to developers to quickly resolve issues and optimize application performance.

Establish a business value evaluation matrix and an on-line and off-line process to solve the problem of 'no one manages, poor quality, and can't drop off. Establish
a comprehensive business value evaluation matrix and an on-line and off-line process. Through business value evaluation, technical value evaluation, resource use evaluation and The four major indicators of functional value evaluation are used to continuously monitor the business. Evaluate the low-value business and formulate the basis for offline, so as to reduce the increase of package submission and optimize the function and quality of the application.

3 H5 performance optimization

3.1 Improve the front-end acceleration service

• Common development tools and methods are packaged into container images to accelerate front-end performance and optimize configuration
• S3 images are automatically WebP directly connected to DIS, with shorter links and faster speed upgrades

3.2 Picture Quality

current problem	solution
User traffic loss is high	DIS dynamic WebP format
Big picture grabs network resources	DIS dynamic WebP format
Large images are difficult to manually check	Big picture traffic monitoring
UI map does not support WebP	Dynamic optimization of front-end pictures

3.3 Image Quality Improvement Tool

• Development tools: detect whether the image size is too large or the traffic loss is too much;
• Static resource service supports automatic WebP and DIS cutting;
• CDN resource preheating is supported in the public "front-end acceleration service" of Autohome;

3.4 Formulate front-end project standard specifications

In the past, the front-end projects of each BU team were more differentiated and had their own standards. Some of the projects had a weak foundation, and there were many difficulties in project optimization and newcomer access after business handover. To this end, we try to organize each team to unify their front-end public projects, template projects, and public services:
public project Git warehouse unification:
front-end personnel of each team participate and discuss together in order to form a meaningful solution. Adjust the specification according to the specific situation, ensure that the specification meets the organizational structure and technical requirements, and regard the standardization as a continuous process. Collect valuable feedback, continuously update, and integrate knowledge into the original specification, so as to maintain the validity and integrity of the specification at all times.
Application templating:
The front-end application creation and release process is "simplified from complex to simplified", providing standardized front-end templates, creating an operating environment and publishing pipeline with one click, simplifying complex configurations at each stage and learning costs; providing optimized container images, more The small image size and the integration of common debugging tools in the environment reduce the time-consuming operation of releasing new projects. Improve front-end R&D efficiency and development experience, allowing technicians to focus more on the business itself.
Further improvement of user experience:
Last year, we made a series of optimizations to increase the display speed of the first screen. Although certain results have been achieved, the experience beyond the first screen is still very important. This year, we plan to further optimize the two aspects of H5 "fluency" and "stability" through two tests on the rendering end and the server, by building monitoring tools and embedding key links, so as to break through the user experience:

fluency

• Slow image: image request takes longer than 2 seconds
• Slow interface: the interface that affects the user takes more than 1 second

Build stability monitoring
H5 page error: abnormalities that affect business logic such as: 404, 500
image error: failure after retry, more than three failures count as a bad experience
interface error: failure after automatic retry

Summarize

The above is a summary of the work of our Autohome client R&D team in [Summary of Special Performance Optimization] and [Prospect of Subsequent Quality Improvement]. In general, the core value of "Casting Boutique" is to improve the fluency, stability and richness of functions of the Autohome App through careful design, performance optimization and continuous improvement. In addition, we also achieve the following core values ​​through systematic quality optimization and building platforms and tools:

1. App performance can be quantified: Accurately measure and gain insight into real user experience and abnormal events, and digitally display key experience indicators. Through data analysis and evaluation, gain a deep understanding of the user's actual experience, and make improvements and optimizations for performance issues.
2. Efficiency improvement: We provide complete full-link logs and snapshot information of problem occurrences, and support multi-dimensional monitoring and alarming. Be able to discover problems at the first time, analyze and locate them, and solve them quickly, improving R&D efficiency and delivery speed.
3. As a starting point for user experience improvement, it is reproducible. Through the practice and experience accumulated in the client R&D department, we can apply optimization solutions and tools to other products and businesses throughout the company, thereby improving user experience and overall product quality.

Due to business and technology constraints, the perspective may not be comprehensive enough. I hope that the audience can participate in discussions and research together after reading this article. If you have any questions or suggestions about our work, we are very happy to listen and accept your advice. thank you all!