未来を加速する！Autohome App アプリケーションのパフォーマンス最適化の概要と今後の見通し

バックグラウンド

Autohome にとって、世界中の 5 億人のユーザーを接続する重要な通信事業者として、Autohome アプリは Autohome の中核事業の 1 つです。熾烈な市場競争の中で、お客様に高品質の製品とサービスを提供することが当社の競争力の核となります。増え続けるユーザーニーズと技術的課題に直面し、優れたエクスペリエンスを求めるユーザーに応えるため、クライアント研究開発部門は「高品質の製品を作成し、生産能力を解放し、未来にインスピレーションを与える」という基本方向を策定しました。「高品質の鋳造」は製品の品​​質とユーザーエクスペリエンスの向上を重視し、「解放能力」は既存のリソースと能力を最大限に活用し、研究開発と納品の効率を向上させることを意味し、「未来を照らす」の目標は積極的に注目することです業界のトレンドや革新的な技術を敏感に察知し、常にフロンティア分野を開拓し、新しい技術やソリューションを積極的に導入します。この共有のテーマは、「高品質の製品を鋳造する」という方向での当社の取り組みと、最適化作業の詳細な概要です。同時に、私たちは将来の開発の方向性にも期待しており、クライアントのパフォーマンスとユーザーエクスペリエンスの向上に取り組み続けます。

特殊なパフォーマンス最適化の概要

1 アプリクライアントのパフォーマンス最適化の概要

今日のデジタル時代において、アプリは人々の生活や仕事に不可欠な部分となっています。クライアントのパフォーマンスの最適化は、アプリ開発の重要なタスクの 1 つになっています。ユーザーエクスペリエンスを向上させるためには、起動速度、ページの応答速度、流暢さなどのさまざまなパフォーマンス指標に継続的に注意を払い、改善する必要があります。これらの指標については、ツールとプラットフォームの構築、特別な指標エクスペリエンスの最適化、プロセス仕様などを含む包括的な改善の方向性を策定しました。アプリの安定性、流暢性、応答速度を向上させ、ユーザーにより良いエクスペリエンスを提供することに尽力します。

1.1 ツールとプラットフォームの構築

クライアントのパフォーマンスをより適切に監視および最適化するには、アプリのパフォーマンス テスト ツールと技術的な運用プラットフォームを構築および改善する必要があります。包括的で
正確なパフォーマンス データを収集するには、SDK を取り消します。
データ処理: データの可読性と有効性を向上させるために、ログの受信、ログ分析、データの計算と保存など、収集 SDK によって報告されたデータを均一に処理します。
データ表示: パフォーマンスの問題をより深く理解するために、詳細なオンサイト ログと多次元データ表示を提供します。CPU、メモリ、ネットワーク、異常箇所などのさまざまなパフォーマンス指標を簡単に表示できます。
問題分析: ユーザーが問題の原因を迅速に特定できるように自動的に支援します。ユーザーは、問題の特定に役立つさまざまな分析ツールを使用することもできます。
傾向分析: データ指標をグローバルに表示し、指標の傾向とビジネスの傾向を分析して、最適化戦略をより適切に策定します。
異常アラーム: さまざまな次元の自動化とインテリジェントな異常アラーム機能を提供し、問題を時間内に検出して解決します。ユーザーは独自のアラーム条件を設定し、異常が発生したときにアラーム情報をタイムリーに受け取ることができるため、問題を迅速に解決できます。

1.2 特別なインジケーターのエクスペリエンスの最適化

プラットフォーム構造を継続的に最適化し、Autohome アプリのフラッシュバック率 <=0.08%、アプリ ページの 2 番目の開封率 >=98%、アプリ起動 2 秒の順守率 >=98%、H5 1.5 秒の開封率を達成するための体系的な最適化お​​よび改善計画を策定します。 >=70%、本体凍結率<=1%、重大凍結率<=0.01%が目標。具体的な対策は次のとおりです。
フラッシュバック問題: システムのソース コードを深く掘り下げてシステムのフラッシュバック問題を解決し、体系的なメモリ最適化計画を策定し、メモリ OOM クラッシュを解決し、ネイティブのボトムレベル クラッシュを克服し、特に困難な問題を解決します。さまざまな部署での問題。
セカンドオープンの改善: ネットワーク層テクノロジーのアップグレードを改善し、ページレンダリングエンジンをアップグレードし、ビジネス側のロジックコレクションを最適化し、分散読み込みなどの戦略を実装し、プリロードとキャッシュを使用し、ユーザーのブラウジングエクスペリエンスを向上させます。
Caton の最適化: メイン スレッドの時間を削減し、ページ レベルを最適化し、アルゴリズムを最適化することで、メイン アプリの流暢性を向上させます。
起動の高速化: 起動時間を最適化し、遅延初期化、非同期読み込み、遅延読み込み、ビジネスの並べ替えなどを通じてアプリを開く速度を向上させます。

1.3 プロセス仕様

完全な内部コミュニケーションとコラボレーションの起動プロセス仕様を作成し、プロセス仕様と対策を実装することで、アプリ起動の品質と効率を包括的に向上させます 起動プロセス仕様: デマンドレビュー、設計レビュー、開発レビュー、テストを含む明確な起動プロセス仕様を策定し
ますレビューと起動 オンラインになるリスクを軽減するために、各リンクが完全に確認され、受け入れられていることを確認するために、その他のリンクをレビューします。
内部コミュニケーションとコラボレーション：問題をタイムリーに解決し、オンラインの効率と品質を向上させるために、部門を超えたコラボレーションメカニズムを確立し、各部門の責任とコミュニケーションチャネルを明確にし、コミュニケーションとコラボレーションを強化します。
自動検出: アプリのパフォーマンス検出プラットフォームの自動検出機能を使用して、アプリのさまざまなパフォーマンス指標を監視および評価し、潜在的な問題を適時に検出して解決し、オンラインになる前にアプリの品質が標準に達していることを確認します。
品質評価: 音質評価メカニズムを確立し、パフォーマンス指標、機能の完全性、安定性、セキュリティなど、各バージョンの発売に関する包括的な評価を実施し、発売バージョンの品質が要件を満たしていることを確認します。
問題のフィードバックと解決: 完全な問題のフィードバックと解決メカニズムを確立し、ユーザーからのフィードバックの問題にタイムリーに対処します。オンライン化後に見つかった問題については、タイムリーにフォローアップして解決し、対応する部門にフィードバックして、問題の根本原因を検討し、同様の問題の再発を避けるためのシステム解決策を策定します。

2 最適化効果表示

2.1 3大アプリの6つの総合指標はすべて基準を満たしている

1. アプリのフラッシュバック率が 79.71% 減少
2. 1.5秒でのH5の開口率が75.71%増加
3. アプリのフリーズ率が 73.68% 減少
4. アプリの深刻なフリーズ率が 98.16% 減少

2.2 UEC ユーザーによって報告された品質問題の数に関して、特別なパフォーマンスの最適化後、全体的な品質問題のフィードバックは 90% 減少しました

3 H5 エンドパフォーマンス最適化の概要

フロントエンドの H5 ページのほとんどが CSR アプリケーションであるという現状を考慮して、H5 の第 2 開封率最適化対策の中核となる目標は次の 2 つです。

1. コンテンツは最初に表示されますが（白い画面で待機するとユーザーが不安になります）、適切なタイミングと位置にスケルトン画面を追加しました。
2. ビジネスコンテンツが表示される時間を早めます（スケルトン画面ではユーザーの気分をほんの少し和らげることができます）。

上記 2 つの目標を達成するために、「インフラストラクチャ」、「アプリ統合」、「レンダリング戦略」、「高度な洗練」の 4 つの方向性を選択し、多くの技術的最適化手法を実装しました。「インフラストラクチャの最適化と
改善
」アクセラレーション サービスの終了」により、ホストされる HTML および静的リソースは、次のような Nginx レベルの最適化を享受できます。

• 元のサイトと CDN は、開発者が注意を払う必要なく、ユーザーのブラウザーが受け入れられる最適な画像形式の WebP を吐き出します。
• CDN キャッシュのリフレッシュ、リソース CDN の予熱をサポートします。
• 基本的な JS 画像のトリミングをサポートし、表示効果を確保しながら画像サイズを効果的に削減します。
• 開発者はさまざまなリソースのキャッシュ時間を自分で細かく制御でき、同時に静的リソースのキャッシュを不要にする「開発モード」を開発者に提供できます。
• CDN ヒット ルールのアップグレード、不要な URL パラメータの無視、CDN キャッシュ ヒット率の向上。
• リソース キャッシュ時間 >= 3600 秒。

アプリの融合の最適化

• クライアント チームと協力してフロントエンド キーの JS Lib プリロードを実現します。アプリ WebView では、
  React、Vue、Zepto と Polyfill の 3 つの共通フレームワークに関連するリソースがプリロードされ、プロジェクト内で特定のリソース アドレスが参照されます。妨げられないプラグド リソースの読み込みを実現します。
• ネイティブ「Loading Dinosaur」バナーの呼び出しタイミングを調整;
• インタラクティブなパフォーマンスを向上させるためのアプリ ブリッジング プロトコル JS ライブラリ ahApp 3.0 の広範なプロモーション。

レンダリング戦略の最適化
ユーザーエクスペリエンスを確保し、白い画面の出現を完全に回避するために、ページの読み込みプロセス中にすぐにスケルトン画面を表示し、ページが表示されているという感覚をユーザーに与える一般的なスケルトン画面ソリューション (参考) を発行しました。読み込みとページ数の削減 読み込みの待ち時間によりユーザー エクスペリエンスが向上します。同時に、スケルトン イメージがレンダリングされる前にネットワーク リクエストが発生しないようにする必要があります。その前に、HTML コンテンツは 4KB を超えてはなりません。多すぎます
。
結果が出るまでの開発時間。
効果を最大化するために、特定の最適化操作をガイドする一連の洗練された定量的基準も開発しました。以下の指標を満たしていれば「H5秒開口率」の効果はさらに高まりますが、特定の開発学生はコードを項目ごとに微調整するという高度な作業が必要となります。

• CSS/JS リソースがマージされ、現在すべての H5 ドメイン名がサポートされています (リクエストが 1 つ減り、リクエストの作成時間が短縮されます)。
• 最初の画面以外の画像に遅延読み込みが追加されます (最初の画面のネットワーク リソースが優先されます)。
• HTML ページのサイズを 32KB 以下に制御します。
• 最初の画面のリクエストの総数 <= 50 (LCP がトリガーされる前)。
• 通常の画像リソース <= 30KB、大きな画像リソース <= 100KB;
• 最初の画面の消費トラフィック <= 500KB (HTML / CSS / JS / IMG / などを含む)。
• 手動 JPEG/PNG 圧縮、例: https://tinypng.com/;
• 手動 GIF 圧縮、例: https://docsmall.com/gif-compress;

最適化の効果により、
以下の図に示すように、アプリ全体の H5 秒開封率が 10 月の 60% から 12 月には 89% 以上に増加し、高水準を維持していることがわかります。

今後の品質向上の見通し

「特別なパフォーマンスの最適化」という主要指標のガバナンスにおいては、複数の部門と多くの従業員の共同努力の結果として、いくつかの成果を上げています。
Autohomeクライアントの研究開発部門は、高品質の製品に対するユーザーのニーズを満たすことを目標に、ユーザーのニーズに引き続き焦点を当て、技術革新を強化し、技術変化を促進し、優れた製品体験の創造に努めていきます。同時に、ワークフローの最適化、開発効率の向上、新しい開発モデルの模索、新技術の積極的な適用を継続し、ユーザーにさらなる驚きと利便性を提供していきます。当社は常に「顧客第一、技術主導」の概念を堅持し、会社の戦略目標の達成に向けて努力を続けます。「Good UV Governance Project」、「Building Quality Closed Loop」、「H5 Performance Optimization」の 3 つの方向に引き続き努力します。

1 グッドUVトリートメント特別企画

目標は、コアページのエクスペリエンス基準を策定し、関連する指標の改善を促進し、最終的にはコアページでのユーザーエクスペリエンスを向上させることです。プロジェクトの目標は、アプリ全体の良好な UV レートが標準に達すること、ビジネスのコア ページの良好な UV レートが標準に達すること、および特別な最適化プロジェクト: アプリケーションのパフォーマンス データの改善に分かれています。プレーヤー、画像、インターフェイス

1.1 インジケーターの定義

1. コアページ: メインアプリの各ビジネスラインの TOP5 ページ、または UV>10W のページ、またはその他の重要なページ (資本保持、3D オートショーなど) 2. アプリ側の良好な UV: アプリ側の良好な
UVアプリ側はユーザーのスムーズさと安定したエクスペリエンスを反映します。1 日以内に、ユーザーがフラッシュバック、フリーズ、開くのが遅い、エラーの 4 つの状況を経験しなければ、このユーザーは優れた UV ユーザーです。
3. 技術的な側面から 4 つのタイプの問題を分類します。
一般的な問題 (フラッシュバック、深刻なフリーズ、ページを開くのが遅い)、
インターフェイスの問題 (インターフェイスが遅い、インターフェイス エラー)、
画像の問題 (画像を開くのが遅い、画像エラー)、
再生の問題 (遅い)開始、再生エラー、再生フリーズ）
4. コア ページの良好な UV 率: 1 日以内のコア ページ上で、良好な UV ユーザーの数/ページ UV の総数。

1.2 指数の算出方法

コアページ良好 UV 率の計算式:
コアページ良好 UV 率 = 1 - コアページ不良 UV / コアページ UV
コアページ不良 UV = 個別 (一般問題 UV | インターフェース問題 UV | 画像問題 UV | 再生問題 UV)

1.3 指数評価の次元

クライアントのパフォーマンスはユーザーのデバイスのハードウェア環境と密接に関係しており、多くの場合、標準以下のパフォーマンスはハードウェア要因 (ユーザー ネットワークの速度の制限、CPU の周波数の低下、メモリの不足) の影響を受けます。不十分など）、ユーザーエクスペリエンスをより良く改善するために、私たち自身の問題によって引き起こされたパフォーマンスのボトルネックを打破するために、高品質のユーザーのパフォーマンスエクスペリエンスの向上を優先し、ほとんどのユーザーのエクスペリエンスをより良く改善します。 。
良好な UV 率の評価は、高品質ユーザーとすべてのユーザーの 2 つの側面に分かれています。高品質のユーザー定義: 優れたネットワーク、優れた機器、ユーザー。(良好なネットワーク: 1 日以内に弱いネットワークに遭遇しなかったユーザーを指します。良好な機器: ハイエンド機器を指します)

1.4 プレーヤー、画像、インターフェイスの優れた UV 特別プロジェクト

ユーザーエクスペリエンス、特にビデオの再生エクスペリエンス、画像の読み込み速度、ページの応答速度をさらに向上させるために、プレーヤー、画像、インターフェイスの特別プロジェクトを立ち上げ、重要な機能、目標とする最適化パフォーマンスに関する徹底的な研究を目指しています。ユーザーエクスペリエンスが向上しました。
プレーヤーのパフォーマンスの向上: データ クエリ プラットフォームを確立して、時間のかかる最初のフレーム、スタッタリング、再生エラーなどの指標を監視および評価し、データに基づいて最適化効果を評価します。再生側では、ビデオのプリロード、プレーヤーのプリロード、DNS 事前分析、メディア情報の事前送信、ライブ LAS プロトコルの使用など、さまざまなシナリオに合わせて最適化します。同時に、プレーヤーの使用ロジックを最適化し、シーンに応じて解像度を合理的に調整し、トランスコーディングの最適化を同時に実行して、ユーザーの再生エクスペリエンスを向上させます。
画像パフォーマンスの向上: 画像リクエスト戦略の最適化、自動トリミングのための画像サポートの読み込み、画像ファイル サイズを削減するための適切な圧縮アルゴリズムとフォーマットの使用、画像ネットワーク リクエスト プロトコルの最適化、CDN メーカーとの綿密なドッキング、およびアラーム プロセスのカスタマイズ一般的なエラー、自動化された問題解決。
インターフェイスのパフォーマンスの向上: オートホーム ビジネスにおけるリンク再利用率の低下と多数のドメイン名に起因する多数の DNS 解決エラーの問題に対処し、ドメイン名解決時間とネットワーク要求の接続確立時間を短縮するための統一ドメイン名コンバージェンス スキームを開発しました。 。第二に、高い接続エラー率の問題を解決するために、モバイル/Wi-Fi マルチチャネル、複合リンク、H3 プロトコルなどの戦略が開発され、インターフェースのエラー率を低減し、インターフェースの速度を向上させました。使用中のユーザーのスムーズな体験を保証します。

2 高品質の閉ループを作成する

2.1 研究開発期間

研究開発期間中は、研究開発品質評価システムを確立し、自動性能試験を改善します。具体的な対策としては、主にコードテストとパフォーマンス受け入れプラットフォームが挙げられます。

2.2 ライブを開始する前に

オンライン販売後の製品の品質と安定性を確保するため。コードリリースシステムや各種ビジネス構成プラットフォームを性能受入プラットフォームに接続することで、オンライン化前のデッドエンドな性能テストを実現し、製品の安定動作を確保します。次に、プラットフォームのパフォーマンス指標を最適化して問題をより正確に発見し、ユーザーエクスペリエンスを向上させます。

2.3 オンラインにした後

問題を迅速に分析、特定、解決するためのオンライン
問題分析アシスタントを作成する インテリジェントなオンライン問題分析アシスタントを作成し、自動化テクノロジを使用してアプリケーション実行ログを迅速に取得して分析し、自動的に異常を検出して問題を診断し、結果を開発者に報告します問題を迅速に解決し、アプリケーションのパフォーマンスを最適化します。

「誰も管理しない、品質が悪い、辞められない」という問題を解決するために、事業価値評価マトリックスとオンラインとオフラインのプロセスを確立する 包括的な事業価値評価マトリックスとオンラインとオフラインのプロセスを確立
するラインプロセスでは、事業価値評価、技術価値評価、資源利用評価、機能価値評価の4つの主要指標を用いて継続的に事業をモニタリングしています。価値の低いビジネスを評価し、オフラインの基盤を策定することで、パッケージの提出の増加を減らし、アプリケーションの機能と品質を最適化します。

3 H5 パフォーマンスの最適化

3.1 フロントエンドアクセラレーションサービスの改善

• 一般的な開発ツールとメソッドがコンテナ イメージにパッケージ化されているため、フロントエンドのパフォーマンスが向上し、構成が最適化されます。
• S3 イメージは自動的に WebP によって DIS に直接接続され、リンクが短くなり、アップグレードが高速化されます。

3.2 画質

現在の問題	解決
ユーザーのトラフィック損失が大きい	DIS 動的 WebP フォーマット
全体像がネットワーク リソースを取得します	DIS 動的 WebP フォーマット
大きな画像は手動で確認するのが困難	全体的なトラフィック監視
UIマップはWebPをサポートしていません	フロントエンド画像の動的最適化

3.3 画質改善ツール

• 開発ツール: 画像サイズが大きすぎるか、トラフィック損失が大きすぎるかを検出します。
• 静的リソース サービスは、WebP および DIS の自動カットをサポートします。
• CDN リソースの予熱は、Autohome のパブリック「フロントエンド アクセラレーション サービス」でサポートされています。

3.4 フロントエンドプロジェクトの標準仕様の策定

従来、各BUチームのフロントエンドプロジェクトは分化が進み、独自の基準を持っており、基盤が脆弱なプロジェクトもあり、プロジェクトの最適化や事業引き継ぎ後の新規参入に困難が多くありました。この目的を達成するために、私たちは各チームを編成してフロントエンドのパブリック プロジェクト、テンプレート プロジェクト、およびパブリック サービスを統合するよう努めています。 パブリック プロジェクト
Git ウェアハウスの統合:
各チームのフロントエンド担当者が参加し、有意義なソリューションを形成するために一緒に議論します。 。特定の状況に応じて仕様を調整し、仕様が組織構造と技術要件を満たしていることを確認し、標準化を継続的なプロセスとみなします。貴重なフィードバックを収集し、継続的に更新し、知識を元の仕様に統合して、仕様の有効性と整合性を常に維持します。
アプリケーションのテンプレート化:
フロントエンド アプリケーションの作成とリリースのプロセスは「複雑から単純化」され、標準化されたフロントエンド テンプレートを提供し、操作環境を作成してパイプラインをワンクリックで公開し、各段階での複雑な構成と学習コストを簡素化します。最適化されたコンテナー イメージなど、イメージ サイズが小さく、環境内に共通のデバッグ ツールが統合されているため、新しいプロジェクトのリリースにかかる時間のかかる操作が削減されます。フロントエンドの研究開発効率と開発エクスペリエンスを向上させ、技術者がビジネスそのものに集中できるようにします。
ユーザーエクスペリエンスのさらなる向上：
昨年、最初の画面の表示速度を上げる一連の最適化を実施し、一定の成果は得られましたが、最初の画面以降のエクスペリエンスは依然として非常に重要です。今年は、ユーザー エクスペリエンスを突破するために、モニタリング ツールを構築し、主要なリンクを埋め込むことで、レンダリング側とサーバーの 2 つのテストを通じて、H5 の「流暢性」と「安定性」の 2 つの側面をさらに最適化する予定です。

流暢さ

• 画像が遅い: 画像リクエストに 2 秒以上かかります
• インターフェイスが遅い: ユーザーに影響を与えるインターフェイスには 1 秒以上かかります

ビルドの安定性の監視
H5 ページ エラー: ビジネス ロジックに影響する次のような異常: 404、500
イメージ エラー: 再試行後の失敗、3 回以上の失敗は不良エクスペリエンスとしてカウントされる
インターフェイス エラー: 自動再試行後の失敗

要約する

上記は、[特別なパフォーマンス最適化の概要] と [その後の品質向上の見通し] における Autohome クライアント R&D チームの作業の概要です。一般に、「Casting Boutique」の中核となる価値は、慎重な設計、パフォーマンスの最適化、継続的な改善を通じて Autohome アプリの機能の流暢さ、安定性、豊富さを向上させることです。さらに、体系的な品質の最適化とプラットフォームとツールの構築を通じて、次の核となる価値も達成します。

1. アプリのパフォーマンスは定量化できます。実際のユーザー エクスペリエンスと異常なイベントを正確に測定して洞察し、主要なエクスペリエンス指標をデジタル表示します。データの分析と評価を通じて、ユーザーの実際のエクスペリエンスを深く理解し、パフォーマンスの問題を改善および最適化します。
2. 効率の向上: 問題発生の完全なフルリンク ログとスナップショット情報を提供し、多次元の監視と警報をサポートします。問題を最初に発見し、分析して特定し、迅速に解決できるため、研究開発の効率と納品速度が向上します。
3. ユーザー エクスペリエンス向上の出発点として、再現可能です。クライアントの研究開発部門で蓄積された実践と経験を通じて、最適化ソリューションとツールを社内全体の他の製品やビジネスに適用することで、ユーザーエクスペリエンスと製品全体の品質を向上させることができます。

ビジネスとテクノロジーの制約により、この視点は十分に包括的ではない可能性があります。この記事を読んだ後、読者の皆様も一緒にディスカッションや研究に参加していただければ幸いです。私たちの仕事についてご質問やご提案がございましたら、喜んで耳を傾け、ご意見をお待ちしております。あなたのアドバイスを受け入れてください。皆さん、ありがとうございました！