Accelerate the future! Summary and future prospects of Autohome App application performance optimization

background

As an important carrier tool for Autohome to connect with 500 million users around the world, Autohome App is one of Autohome's core businesses. In the fierce market competition, providing high-quality products and services to the majority of users is our core competitiveness. In the face of growing user needs and technical challenges, to meet users' pursuit of excellent experience, the client R&D department has formulated the basic direction of "creating quality products, releasing production capacity, and opening up the future". "Creating quality products" emphasizes improving product quality and user experience, "releasing production capacity" means making full use of existing resources and capabilities to improve the efficiency of R&D and delivery, and "opening up the future" aims to actively pay attention to industry trends and innovative technologies, constantly explore cutting-edge fields, and actively introduce new technologies and solutions. The theme of this sharing is our efforts in the direction of "creating quality products", and a detailed summary of our optimization work is given. At the same time, we also look forward to the future development direction and continue to be committed to improving the performance and user experience of the client.

Summary of Special Performance Optimization

Summary of App Client Performance Optimization

In today's digital age, apps have become an indispensable 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 continue to 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. We are committed to improving the stability, fluency and response speed of the app to bring users a better user experience.

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. The specific measures are as follows:

Data collection : Improve the four major collection SDKs, including the time-consuming SDK, the second-opening SDK, the lagging SDK, and the crash 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, to improve the readability and effectiveness of the data.

Data View : Provides 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 a variety of analysis tools to assist in locating the problem.

Trend analysis : View data indicators globally and analyze indicator trends and business trends to better formulate optimization strategies.

Abnormal alarm : Provides various dimensions of automated and intelligent abnormal alarm functions to timely discover and solve problems. Users can set their own alarm conditions and receive alarm information in time when abnormalities occur, so as to quickly solve the problem.

2. Optimization of special indicator experience

We will continue to optimize the platform architecture and formulate systematic optimization and improvement plans to achieve the goals of Autohome App crash rate <= 0.08%, App page opening rate within seconds >= 98%, App startup 2s compliance rate >= 98%, H5 1.5s opening rate >= 70%, main component freeze rate <= 1%, and severe freeze rate <= 0.01%. The specific measures are as follows:

Crash problem : Go deep into the system source code to solve the system crash problem, formulate a systematic memory optimization plan, solve memory OOM crash, overcome Native bottom-level crash, and specially solve difficult problems in various departments.

Improvement of opening the page within seconds : Improve the network layer technology upgrade, upgrade the page rendering engine, optimize the business side logic set, perform distributed loading, use preloading and caching strategies, and improve the user's browsing experience.

Jam optimization : Improve the fluency of the main App by reducing the main thread time consumption, optimizing page hierarchy, and optimizing algorithms.

Startup acceleration : Optimize startup time and increase the speed of opening the App through delayed initialization, asynchronous loading, lazy loading, business combing, etc.

3. Process Specification

Formulate a complete internal communication and collaboration process specification, and comprehensively improve the quality and efficiency of App launch by implementing process specifications and measures

Online process specifications : Establish clear online process specifications, including requirements review, design review, development review, test review and online review, to ensure that each link is fully confirmed and accepted to reduce the risk of online launch.

Internal communication and collaboration : Establish a cross-departmental collaboration mechanism, clarify the responsibilities and communication channels of each department, and strengthen communication and collaboration to solve problems in a timely manner and improve online efficiency and quality.

Automated testing : Use the automated testing function of the App performance testing platform to monitor and evaluate the various performance indicators of the App, discover and solve potential problems in a timely manner, and ensure that the quality of the App meets the standards before it goes online.

Quality assessment : Establish a sound quality assessment mechanism to conduct a comprehensive assessment of each version launched, including performance indicators, functional completeness, stability and security, to ensure that the quality of the online version meets the requirements.

Problem feedback and resolution : Establish a complete problem feedback and resolution mechanism to promptly handle user feedback. Problems discovered after going online should be followed up and resolved in a timely manner, and feedback should be given to the relevant departments to discuss the root causes of the problems and develop systematic solutions to avoid similar problems from occurring again.

Optimization effect display

1. All six overall indicators of the three major apps have met the standards

• App crash rate reduced by 79.71%
• H5 1.5-second opening rate increased by 75.71%
• App freeze rate reduced by 73.68%
• App severe freeze rate reduced by 98.16%

2. From the perspective of the number of quality issues reported by UEC users, after the special performance optimization, the overall quality issue feedback was reduced by 90%

Summary of H5 performance optimization

In view of the fact that most front-end H5 pages are CSR applications, the core goals of the H5 second opening rate optimization measures are:

• In order to make the content appear as soon as possible (waiting on a white screen will make users anxious), we added a skeleton screen at the appropriate time and location.
• Advance the time when business content appears (skeleton screen can only slightly ease the user's mood).

To achieve the above two goals, we selected four directions including "infrastructure", "app integration", "rendering strategy" and "advanced refinement", and applied a number of technical optimization methods:

Infrastructure Optimization

Improve the "front-end acceleration service" so that the HTML and static resources it carries can enjoy Nginx-level optimization, including:

• The original site and CDN automatically spit out the best image format WebP that the user's browser can accept, without the developer's attention.
• Supports refreshing CDN cache and preheating CDN resources.
• Supports basic JS image cropping, effectively reducing the image size while ensuring the display effect.
• Developers can fine-tune the caching time of various resources by themselves, and provide developers with a "development mode" to achieve non-caching of static resources.
• The CDN hit rule is upgraded to ignore unnecessary URL parameters and improve the CDN cache hit rate.
• Resource cache time >= 3600 seconds.

App integration optimization

• Cooperated with the client team to implement front-end key JS Lib preloading: preloaded the related resources and Polyfill of the three commonly used frameworks React, Vue, and Zepto in the App WebView, and referenced specific resource addresses in the project to achieve non-blocking resource loading.
• Optimize the timing of calling the native "Loading Dinosaur" Banner.
• Promote the App bridging protocol JS library ahApp 3.0 on a wider scale to improve interactive performance.

Rendering strategy optimization

In order to ensure user experience and completely avoid the appearance of a white screen, we have issued a general skeleton screen solution ( reference ). The skeleton screen is displayed immediately during the page loading process, giving users a feeling that the page is loading, reducing the waiting time for page loading and improving the user experience. At the same time, it is required that no network requests should appear before the skeleton image is rendered, and the HTML content should not exceed 4KB before that.

Advanced refinement optimization

The above aspects are all strategies that can be easily implemented and do not require 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 achieved, the effect of "H5 second opening rate" will be further improved, but specific developers need to fine-tune the code item by item, which is an advanced operation. The details are as follows:

• CSS/JS resources are merged, and currently all H5 domain names support it (reducing one request and reducing the time to establish a request).
• Add lazy loading for images other than the first screen (give priority to network resources for the first screen).
• Control HTML page size <= 32KB.
• The total number of requests for the first screen is <= 50 (before LCP is triggered).
• Ordinary image resources <= 30KB, large image resources <= 100KB.
• The first screen traffic consumption is <= 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.

Optimization effect display:

The overall H5 app opening rate increased from 60% in October to 89%+ in December and continued to remain high, as shown in the following figure:

Outlook for subsequent quality improvement

We have made some achievements in the management of key indicators of [special performance optimization], which is the result of the joint efforts of multiple departments and many employees.

The Autohome Client R&D Department 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 user needs for high-quality products. At the same time, we will continue to optimize work processes, 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 "user first, technology driven" and continue to work hard to achieve the company's strategic goals. We will continue to work hard in the following three directions: "Good UV Governance Special Project", "Building a Quality Closed Loop", and "H5 Performance Optimization".

1. Special UV treatment project

The goal is to develop experience standards for core pages, promote the improvement of related indicators, and ultimately improve the user experience on core pages. The project goals are divided into: the overall App UV rate reaches the standard, the core page UV rate reaches the standard in business, and the optimization project: performance data improvement of players, pictures and interfaces.

Indicator Definition

Core pages: the top 5 pages of each business line in the main App, or pages with UV>100,000, or other key pages (such as retention information, 3D auto show)

Good UV on the App: A good UV on the App reflects a user's smooth and stable experience. If the user does not experience any crashes, freezes, slow opening, or errors within a day, then the user is a good UV user.

There are four types of problems from a technical perspective:

• General issues (crash, severe freeze, slow page opening)
• Interface problems (interface slow opening, interface errors)
• Image problems (image slow to open, image error)
• Playback issues (slow start, playback errors, playback freezes)

Core page good UV rate: within one day, on a core page, the number of good UV users / total number of page UV.

Indicator calculation method

The core page good UV rate calculation formula:

• 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).

Indicator Assessment Dimensions

The performance of the client is closely related to the hardware environment of the user's device. In many cases, the performance that does not meet the standard is affected by hardware factors (user network speed is limited, CPU is downclocked, insufficient memory, etc.). In order to better improve the user experience and 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 user experience of the majority.

The assessment of good UV rate is divided into two dimensions: high-quality users and all users. The definition of high-quality users: users with good network and good equipment. (Good network: refers to a user who has not encountered a weak network in a day; good equipment: refers to high-end equipment).

Player, picture and interface good UV special

In order to further improve the user experience, especially the video playback experience, image loading speed and page response speed, we have established special projects for players, images and interfaces, aiming to conduct in-depth research on important functions, optimize performance in a targeted manner, and improve user experience.

Improve player performance: Establish a data query platform to monitor and evaluate indicators such as first frame time consumption, freezes, and playback errors, and evaluate the optimization effect based on data. Optimize different scenarios on the playback side, including video preloading, player preloading, DNS pre-resolution, early media information delivery, and use of live broadcast LAS protocol. At the same time, optimize the player's usage logic, reasonably adjust the clarity according to the scene, and perform transcoding optimization to improve the user's playback experience.

Image performance improvement: image request strategy tuning, automatic cropping of loaded images, use of appropriate compression algorithms and formats to reduce image file size, optimization of image network request protocols, deep integration with CDN vendors, customized alarm processes for common errors, and automated problem solving.

Interface performance improvement: In view of the low link reuse rate and many DNS resolution errors caused by the large number of business domain names of Autohome, a unified domain name convergence plan was formulated to reduce the domain name resolution time and connection establishment time during network requests. Secondly, in view of the high proportion of link error rates, strategies such as mobile/Wi-Fi multi-channel, composite links and H3 protocols were developed to reduce the interface error rate and increase the interface speed to ensure a smooth user experience during use.

2. Create a closed loop of quality

1. R&D stage

During the R&D phase, a R&D quality assessment system is established and automated performance testing is improved. Specific measures mainly include code testing and performance acceptance platform.

2. Before going online

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 to achieve full performance testing before going online and ensure that the product can run stably. Secondly, we will optimize the platform performance indicators to more accurately identify problems and improve the user experience.

3. After going online

Create an online problem analysis assistant to quickly analyze, locate and solve problems:

Build an intelligent online problem analysis assistant that uses automation technology to quickly obtain and analyze application operation logs, automatically detect anomalies and diagnose problems, and then feed back the results to developers to quickly resolve problems and optimize application performance.

Establish a business value assessment matrix and an on-line and off-line process to solve the problem of "no one in charge, poor quality, and inability to be offline":

Establish a comprehensive business value assessment matrix and on- and off-line process, and continuously monitor the business through four indicators: business value assessment, technical value assessment, resource use assessment, and functional value assessment. Evaluate low-value businesses and formulate off-line basis to reduce the growth of package submissions and optimize the functions and quality of applications.

3. H5 performance optimization

Improve front-end acceleration services

• Common development tools and methods are packaged into container images to accelerate front-end performance optimization configuration.
• S3 images are automatically converted to WebP and directly connected to DIS, which improves image quality with shorter links and faster speeds.

Improved image quality

Image quality improvement tools

• Development tools: Detect whether the image size is too large or the traffic loss is too high
• Static resource service supports automatic WebP and DIS cropping
• CDN resource preheating is supported in Autohome's public "front-end acceleration service"

Formulate front-end project standards and specifications

In the past, the front-end projects of various BU teams were quite different and had their own standards. Some of these projects had weak foundations, which made it difficult for newcomers to join the project after project optimization and business handover. To this end, we tried to organize each team to unify their front-end public projects, template projects, and public services:

Public project Git repository unification:

Front-end personnel from all teams participate and discuss together to form meaningful solutions. Adjust the specifications according to specific circumstances to ensure that the specifications meet organizational structure and technical requirements, and regard standardization as an ongoing process. Collect valuable feedback, continuously update, and incorporate knowledge into the original specifications to maintain the effectiveness and integrity of the specifications at all times.

Application templating:

The front-end application creation and release process is simplified by providing standardized front-end templates, creating a running environment and release pipeline with one click, simplifying the complex configuration and learning costs of each stage; providing optimized container images with smaller image volumes, and integrating general debugging tools and methods in the environment to reduce the time consumption of new project release operations. It improves the front-end R&D efficiency and development experience, allowing technical personnel to focus more on the business itself.

Improved user experience:

Last year, we made a series of optimizations to improve the speed of the first screen display. Although we have achieved certain results, the experience outside the first screen is still very important. This year, we plan to further optimize the "fluency" and "stability" of H5 by testing on the rendering end and the server, building monitoring tools, and tracking key links, so as to break through the user experience:

Fluency

• Slow image: The image request takes more than 2 seconds.
• Slow interface: The interface that affects users takes more than 1 second.

Building stability monitoring

• H5 page error: exceptions that affect business logic, such as 404 and 500.
• Image error: If the image fails after retrying, three or more failures will be considered a bad experience.
• Interface error: The situation where the system still fails after automatic retries.

Summarize

The above is the work summary of our Autohome client R&D team in [Special Performance Optimization Summary] and [Subsequent Quality Improvement Outlook]. In general, the core value of "creating quality products" lies in improving the fluency, stability and richness of Autohome App through careful design, performance optimization and continuous improvement. In addition, we also achieve the following core values ​​through systematic quality optimization and platform and tool construction:

• 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, we can gain a deep understanding of the user's actual experience and make improvements and optimizations for performance issues.
• Improve efficiency: We provide complete full-link logs and snapshot information of problems, and support multi-dimensional monitoring and alarms. We can find problems immediately, analyze and locate them, and solve them quickly, thus improving R&D efficiency and delivery speed.
• As a tool for improving user experience, it is replicable. Through the practice and experience accumulation 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 technical limitations, the perspective may not be comprehensive enough. We hope that the audience can participate in the discussion and joint research 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!