Comprehensive Performance Optimization Summary for AutoHome App and H5 Frontend
This article presents a detailed summary of the AutoHome client team's performance optimization efforts for both the native mobile app and the H5 web frontend, covering background, specific tool and platform enhancements, metric‑driven improvements, process standardization, and future quality‑boosting initiatives.
Background – AutoHome App serves over 500 million users and is a core business component; to stay competitive, the client development team set the direction “Craft Excellence, Release Capacity, Enable Future” focusing on product quality, resource utilization, and technological innovation.
1. Specialized Performance Optimization Summary
1.1 App Client Performance Optimization
To improve user experience, the team built a comprehensive performance monitoring platform, enhanced data collection SDKs (startup, instant‑open, freeze, crash), unified data processing, detailed log viewing, automated problem analysis, trend analysis, and intelligent anomaly alerts.
Key metric goals included crash rate ≤ 0.08 %, instant‑open rate ≥ 98 %, startup 2 s pass rate ≥ 98 %, H5 1.5 s open rate ≥ 70 %, main‑thread freeze ≤ 1 %, severe freeze ≤ 0.01 %.
Specific actions:
Resolved system‑level crashes and OOM issues.
Upgraded network layer, rendering engine, and business logic to achieve distributed loading, pre‑loading, and caching, boosting instant‑open performance.
Reduced main‑thread time and optimized page hierarchy to lower freeze rates.
Accelerated startup via delayed initialization, asynchronous loading, and lazy loading.
Resulting improvements: crash rate reduced by 79.71 %, H5 1.5 s open rate increased by 75.71 %, app freeze rate lowered by 73.68 %, severe freeze rate dropped by 98.16 %.
1.2 H5 Frontend Performance Optimization
Given the CSR nature of most H5 pages, the team targeted two core goals: immediate content display (skeleton screens) and earlier business‑content appearance. Optimization directions included infrastructure, app‑bridge integration, rendering strategy, and advanced fine‑tuning.
Key measures:
Enhanced front‑end acceleration service with Nginx‑level optimizations, WebP image delivery, CDN cache warm‑up, and static resource compression.
Implemented pre‑loading of major JS libraries (React, Vue, Zepto) in the app WebView.
Deployed skeleton‑screen solution with HTML ≤ 4 KB before any network request.
Set quantitative standards: CSS/JS merge, image lazy‑load, HTML ≤ 32 KB, ≤ 50 requests before LCP, image size limits, and ≤ 500 KB total first‑screen traffic.
Effect: H5 instant‑open rate rose from 60 % in October to over 89 % in December and remained high.
2. Future Quality Improvement Outlook
2.1 Good‑UV Governance – Define core pages (top‑5, UV > 100 k, etc.), establish good‑UV metrics (no crash, freeze, slow‑open, error), and calculate core‑page good‑UV rate = 1 – (bad‑UV / total UV). Prioritize high‑quality users (good network & device) for performance gains.
2.2 Building a Quality Closed‑Loop – Create a quality assessment system, automate performance acceptance, integrate code release with performance checks, and establish business‑value evaluation matrices to guide deprecation of low‑value features.
2.3 H5 Performance Optimization Continuation – Further refine front‑end acceleration, image quality tools, standardize project templates, and monitor stability (error rates, image‑load failures, interface errors) with automated alerts.
3. Summary
The AutoHome client team’s “Craft Excellence” initiative quantitatively improved app stability, responsiveness, and user experience, provided full‑chain logging and rapid issue resolution, and created reusable optimization practices that can be propagated across the company’s product portfolio.
HomeTech
HomeTech tech sharing
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.