ネイティブエクスペリエンス最適化の実践を作成するための iQiyi H5 特別ページ

プロジェクトの背景

H5 の特別トピックとイベントページは、企業のドラマを宣伝し、アプリに新規ユーザーを引き付けるための重要な方法であり、さまざまなビジネス分野で重要な役割を果たしています。同時に、広く批判されているいくつかの欠点もあります。たとえば、ページが開くのが遅い、白画面現象が発生する、H5 端末上部のタイトルバーがページのコンテンツから分離される、などです。私たちはこれらの問題について webview チームと緊密に協力し、ユーザーエクスペリエンスとページパフォーマンスの最適化に焦点を当ててさまざまな解決策を試し、これまでにある程度の進歩を遂げてきたので、参考として皆さんと実際の経験を共有します。

パフォーマンスの最適化

楽しい H5 スペシャルページの読み込みとレンダリングのプロセスは、大まかに次のとおりです。

私たちはすべてのリンクを調査して最適化しましたが、そのうちのいくつかは良好な結果を達成しました。

1. パブリックリソースのオフラインキャッシュ

ユーザーは、複数の楽しいプラットフォームによって構築された H5 ページにアクセスする場合があります。コンテンツが異なるページに同一のコードが多数存在します。それらの多くは、再利用性が高く、変更頻度が低く、総量を制御可能な静的リソースです。 JSSDK、React、Vue、ランタイム、さらには再利用性の高いコンポーネントなど、この部分は 500k (gzip 前) 近くかかります。これらのコードは、繰り返しの読み込みを避けるために、ユーザーの携帯電話に長期保存するのに最適です。

私たちは、webview チームが提供するオフラインキャッシュソリューションを採用しました。これには多くの利点があります。

事前配信をサポートしているため、ユーザーは初めて H5 にアクセスするときに、従来のように 2 回目にキャッシュにアクセスする必要がなく、ローカルキャッシュを使用できます。
完全な更新メカニズムとツールがあり、運用と保守が便利です。
数多くのオンラインプロジェクト検証実績があり、高い信頼性を誇ります。

最適化前 (左) と最適化後 (右) の比較:

最適化後はパフォーマンスが大幅に向上することが確認されており、ネットワークが悪くなるほど最初の画面の速度が顕著になります。

Webview オフラインキャッシュの原理図

オフラインキャッシュ管理の背景

2. テンプレートのプリレンダリング

テンプレートのプリレンダリングは、WebView チームとの協力による画期的な機能です。楽しい H5 特別ページは、アプリの起動後、テンプレートがロードされるように初期化されます。 fun 特定のドメイン名 + 特定のロゴ (pr=1) テンプレートのプリレンダリングモードが使用され、特定のルールに従ってページデータ Bundle.js をリクエストし、js を実行してデータをテンプレートと統合してから、ページをレンダリングします。特定のパラメータがない場合は、通常のオフラインソリューションが採用されます。

現在、このソリューションは両端で使用されており、全体のパフォーマンスが約 60% 向上しており、最適化効果は明らかです。

	プリレンダーのヒット率	最初のスクリーンタイムが短縮される
iPhone	55%	57%
Gフォン	51%	60%

このソリューションは、プリレンダリングのヒット率をさらに向上させるなど、現在も最適化が行われています。

3.H5 埋め込みネイティブプレーヤー

これは、Webview チームとの協力におけるもう 1 つの重要な進歩です。同層レンダリングなどのテクノロジーを通じて、iQiyi ネイティブプレーヤーが H5 ページに埋め込まれ、ネイティブプレーヤーが H5 内にあることを保証しながら、再生エクスペリエンスをネイティブと一致させます。スムーズな移動とコンテンツの切り替えにより、4K やフレーム品質の動画などのさらなる画質体験もサポートされます。現在、両端でオンラインになっています。

4. 分割画面ロード

H5 の楽しいトピックは、ビジネスコンポーネントで構成される運用ページです。一般に、スクロールせずに見える範囲に表示されるコンポーネントが最も重要です。

したがって、分割画面読み込みソリューションを実装しました。ランタイムは、最初の画面コンポーネントを読み込んだ後、他のコンポーネントの読み込みを開始します。これは、ある程度、高品質のコンテンツに対してインターネットの速度を人為的に放棄していることになります。

最適化効果:

上記の統計に基づいて、各コンポーネントのリソース量に大きな差がないと仮定すると、分割画面読み込みにより、最初の画面でのコンポーネントの読み込みが約 60% 削減されると大まかに結論付けることができます。

5. ビジネスインターフェースの事前簡素化

ロードされるコンポーネントの数を減らすことに加えて、コンポーネント内のアドオンも最適化する必要があります。統計的な楽しいコンポーネントの依存関係の分布は次のとおりです。

追跡と分析の後、ビジネスインターフェイスから返されるデータにも最適化ポイントが含まれます。たとえば、最も一般的に使用されるリソースビットの場合、インターフェイスによって返されるデータは約 30k ですが、フロントエンドが必要とするのはそのうちの 5k だけです。リソースビットインターフェースだけでなく、多くの一般インターフェースも同様の状況にある。

そこで、ノード層のインターフェースを合理化し、汎用性を確保しながらクライアントが使用しないフィールドを削除しました。

以下は、その一部である凝縮された関数のリストです。

効果: 最適化後、1 つのコンポーネントのサイズを 25k 削減できます。通常のページ上の 10 個のコンポーネントに基づいて、合計ページサイズは約 250k 削減されます。

6. webp による画像の最適化

webp の普及率はすでにかなり高く、最適化の効果も明らかです。ただし、運用 H5 ページは従来の手動で開発されたページとは異なります。これらの画像のほとんどは運用学生自身がアップロードするものであり、プロジェクト内で事前に圧縮することはできません。アップロード前に画像を圧縮するよう要求することはできません。また、アップロード時に画像を WebP に自動的に圧縮することも適切ではありません。古いモデルの中にはwebpをサポートしていないものがあるためです。したがって、WebP をサポートするブラウザーが CDN によって要求された WebP バージョンに移動するかどうかをブラウザーで動的に決定します。

画像の WebP バージョンをリクエストする例 (URL の後に caplist=webp を追加):

コード例:

効果: 比較すると、運用で一般的に使用される 500k の画像は、同じ品質の WebP では 130k しかかかりません。高速ネットワークの場合でも、最初の画面での画像のレンダリング速度は依然として非常に明白です。

エクスペリエンスの最適化

1. タイトルバーを設定する

従来のインエンド H5 ページを開くと、上部に白または黒のネイティブタイトルバーが表示されますが、これは H5 ページのテーマカラーと互換性がなく、断片化の印象が強いです。 webview が提供する setToolColor メソッドを使用して、ターミナルのタイトルバーのテキストと背景色を設定します。これは、完全な視覚的なルックアンドフィールを実現する方法です。

レンダリング：

左の図では、タイトルバーが設定されていない場合、iOS の上部は白ですが、Android 側では、右の図のページから分離された黒になります。タイトルバーを使用すると、ページ全体がより没入感のあるエクスペリエンスになります。

タイトルバーを非表示にする:

ビジネスパーティがパーソナライズされたタイトルナビゲーションを作成する必要がある場合、または H5 ページの実装時にタイトルバーが必要ない場合は、パラメータ qyc-title-hide=1 または HideNav=1 を URL 内に追加することで、タイトルバーを直接非表示にすることができます。 H5 ページ独自のタイトルバーを実装します。ページのプレゼンテーションをより統合的にします。

例: http://pages.iqiyi.com/m/qt/63x0bbnx.html?qyc-title-hide=1

レンダリング：

右側は、ネイティブのタイトルバーを削除した後に H5 内に実装されたトップナビゲーションで、ページがより立体的で完全なものになっています。

2.プルダウンリフレッシュ効果をサポート

以前は、H5 ページがターミナル内のページデータを更新したい場合、通常はページにボタンを追加するか、戻ってページに再入力することしかできませんでした。ページ URL の後にパラメーター qyc-support-refresh=1 を追加すると、ユーザーが離れる必要がなく、ネイティブのプルダウンの対話型エクスペリエンスを実現できます。

例: https://pages.iqiyi.com/m/zy/63x0bdru.html?qyc-pr=1&qyc-body-bgc=007bc2&qyc-support-refresh=1

3. ページのドロップダウンの背景色を設定します

従来の Web ビューページは、プルダウンすると背景が白になり、見た目が悪くなります。ユーザーがページをプルダウンすると、背景は白になりません。表示されます。ページはより没入感のあるものになります。

レンダリング：

左側をプルダウンした後、ページとナビゲーションが大きく分離されているように見えますが、右側で Web ビューの背景色を設定すると、プルダウン後のページがより完全になります。

4. Webビューのデフォルトの背景色を設定します

白い画面は常に、製品オペレーターが H5 を拒否する主な理由の 1 つでした。これにより、ユーザーは一目でネイティブエクスペリエンスから逃れることができます。これまでは、ページを開いてから js で背景色を設定するのは遅すぎました。この問題を解決するには、qyc-body-bgc=5671c8のように、H5url の後にqyc-body-bgcパラメータを追加し、ページの背景色の値を一致させることで、背景色の設定時間を進めることができます。ウェブビューが起動します。これにより、白い画面表示がなくなり、ページのエクスペリエンスがさらに向上します。

例: https://pages.iqiyi.com/m/xj/wswj.html?qyc-pr=1&qyc-body-bgc=7071a9

レンダリング：

最初に QR コードをスキャンしてページにアクセスすると、右側に白い画面が表示され、左側の背景色はユーザーエクスペリエンスを向上させるためにプリセットされていることがわかります。

5. 占有前の最適化

H5网页在加载过程中，会频发触发relayout。而传统APP进去时，页面结构布局已经确定，不会频繁变化。

对此，我们会提前保存图片宽高，从而避免后期图片加载时导致布局频繁变化。

示例：

6.图片加载体验

内容图片加载时增加背景色，同时封面图片增加淡入动画。这样能提高整个页面的品质感，和传统H5的印象区别开来。

效果图：

最终效果展示

经过性能和体验双重优化，H5页面最终效果如下：

右侧为优化后效果，初期没有白屏，整体呈现更流畅快速。

总结

我们通过一系列关键技术的研究与实践，包括资源离线化、模板预渲染、内嵌本地播放器，以及对原生控件，如标题栏的精细控制和H5控制webview背景等手段，持续进行深度优化。使得专题页不仅在感官体验上实现了显著的提升，同时在性能指标方面也取得了较好成果。同时，我们也认识到，仍然存在进一步优化的空间，以及更多新的方法等待我们不断探索。我们将持续与webview团队深度协作，积极尝试更多前沿可能性，以进一步提升用户体验并推动创新。

也许你还想看

爱奇艺客户端开播体验优化实践

奇巴布Feed流性能优化

爱奇艺智能内容中台｜无人值守的应用与实践

本文分享自微信公众号 - 爱奇艺技术产品团队（iQIYI-TP）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。