iQiyi H5-Sonderseite zur Erstellung nativer Erfahrungsoptimierungspraktiken

Wuhan Yuan Chuanghui kehrt zurück, sprechen wir am 20. April über große Models.“

Hintergrund des Projekts

H5-Sonderthemen und Eventseiten waren schon immer ein wichtiges Mittel, um die Dramen des Unternehmens zu bewerben und neue Nutzer für die App zu gewinnen. Sie spielen in verschiedenen Geschäftsfeldern eine wichtige Rolle. Gleichzeitig gibt es aber auch einige Mängel, die vielfach kritisiert werden. Beispielsweise öffnet sich die Seite langsam, das Phänomen des weißen Bildschirms tritt auf, die Titelleiste oben im H5-Terminal ist vom Seiteninhalt getrennt usw. Wir haben in diesen Fragen intensiv mit dem Webview-Team zusammengearbeitet, kommuniziert und verschiedene Lösungen ausprobiert, wobei wir uns auf die Optimierung der Benutzererfahrung und der Seitenleistung konzentrieren. Wir haben bisher einige Fortschritte gemacht und geben nun einige praktische Erfahrungen als Referenz an alle weiter.

Leistungsoptimierung

Der Lade- und Rendervorgang der lustigen H5-Sonderseite ist ungefähr wie folgt:

Wir haben jeden Link untersucht und optimiert und einige davon haben gute Ergebnisse erzielt.

1. Offline-Caching öffentlicher Ressourcen

Ein Benutzer kann H5-Seiten besuchen, die von mehreren unterhaltsamen Plattformen erstellt wurden. Es gibt viele identische Codes auf Seiten mit unterschiedlichem Inhalt. Viele davon sind statische Ressourcen mit hoher Wiederverwendbarkeit, geringer Änderungshäufigkeit und kontrollierbarem Gesamtvolumen. Wie JSSDK, React, Vue, unsere Laufzeit und sogar einige hoch wiederverwendbare Komponenten. Dieser Teil des Spaßes ist fast 500.000 (vor gzip). Diese Codes eignen sich ideal für die langfristige Speicherung auf dem Telefon des Benutzers, um ein wiederholtes Laden zu vermeiden.

Wir haben die vom Webview-Team bereitgestellte Offline-Caching-Lösung übernommen, die viele Vorteile bietet:

Unterstützt die Vorabzustellung. Benutzer können den lokalen Cache verwenden, wenn sie zum ersten Mal auf H5 zugreifen, anstatt den Cache herkömmlicherweise ein zweites Mal aufrufen zu müssen.
Es gibt vollständige Update-Mechanismen und -Tools sowie komfortable Bedienung und Wartung.
Es hat eine große Anzahl von Online-Projektüberprüfungen durchlaufen und weist eine hohe Zuverlässigkeit auf.

Vergleich vor der Optimierung (links) und nach der Optimierung (rechts):

Es wurde nachgewiesen, dass die Leistung nach der Optimierung erheblich verbessert wird. Je schlechter das Netzwerk, desto offensichtlicher ist die Geschwindigkeit auf dem ersten Bildschirm.

Diagramm zum Offline-Caching-Prinzip von Webview

Hintergrund zur Offline-Cache- Verwaltung

2. Vorrendern der Vorlage

Das Vorrendern von Vorlagen ist ein Durchbruch in unserer Zusammenarbeit mit dem Webview-Team . Die unterhaltsame H5-Spezialseite wird in die Form von Seitenvorlage + Datenpaket abstrahiert. Nach dem Start der App wird die Webansicht initialisiert, um die Vorlage zu laden Es wird ein spezieller Domänenname + ein bestimmtes Logo (pr=1) verwendet. Es wird der Pre-Rendering-Modus der Vorlage verwendet, bei dem die Seitendaten bundle.js gemäß bestimmten Regeln angefordert werden, der js ausgeführt wird, um die Daten in die Vorlage zu integrieren, und dann die Seite gerendert wird. Wenn keine spezifischen Parameter vorhanden sind, wird die normale Offline-Lösung übernommen.

Derzeit wurde diese Lösung an beiden Enden eingesetzt und die Gesamtleistung wurde um etwa 60 % verbessert, und der Optimierungseffekt ist offensichtlich.

	Trefferquote vor dem Rendern	Die erste Bildschirmzeit wird verkürzt
Iphone	55 %	57 %
Telefon	51 %	60 %

Diese Lösung wird noch optimiert, beispielsweise durch eine weitere Verbesserung der Trefferquote vor dem Rendern.

3.H5 eingebetteter nativer Player

Dies ist ein weiterer wichtiger Durchbruch in unserer Zusammenarbeit mit dem Webview-Team. Durch Technologien wie Same-Layer-Rendering wird der native Player von iQiyi in die H5-Seite eingebettet, wodurch unser Wiedergabeerlebnis an das native angepasst wird und gleichzeitig sichergestellt wird, dass sich der native Player innerhalb des H5 befindet Die reibungslose Verschiebung und das Wechseln von Inhalten unterstützen auch mehr Bildqualitätserlebnisse wie 4K- und Bildqualitätsfilme. Es ist jetzt an beiden Enden online.

4. Geteilter Bildschirm wird geladen

Das unterhaltsame H5-Thema ist eine operative Seite, die aus Geschäftskomponenten besteht. Im Allgemeinen sind die über dem Falz angezeigten Komponenten die wichtigsten.

Aus diesem Grund haben wir eine Split-Screen-Ladelösung implementiert. Die Laufzeit beginnt mit dem Laden anderer Komponenten, nachdem die Komponenten des ersten Bildschirms geladen wurden. In gewisser Weise wird dadurch die Internetgeschwindigkeit künstlich für qualitativ hochwertige Inhalte aufgegeben.

Optimierungseffekt:

Basierend auf den obigen Statistiken können wir unter der Annahme, dass es keinen großen Unterschied in der Menge der Ressourcen jeder Komponente gibt, grob schlussfolgern, dass das Laden mit geteiltem Bildschirm das Laden der Komponenten auf dem ersten Bildschirm um etwa 60 % reduziert.

5. Vorabvereinfachung der Geschäftsschnittstelle

Neben der Reduzierung der Anzahl der geladenen Komponenten müssen auch die Add-Ons innerhalb der Komponenten optimiert werden. Die Abhängigkeitsverteilung der statistischen Spaßkomponenten ist wie folgt:

Nach der Verfolgung und Analyse weisen die von der Geschäftsschnittstelle zurückgegebenen Daten auch Optimierungspunkte auf. Für die am häufigsten verwendeten Ressourcenbits betragen die von einer Schnittstelle zurückgegebenen Daten beispielsweise etwa 30 KB, das Frontend benötigt jedoch nur 5 KB davon. Nicht nur die Ressourcenbitschnittstelle, sondern auch eine große Anzahl allgemeiner Schnittstellen befinden sich in einer ähnlichen Situation.

Aus diesem Grund haben wir die Schnittstelle auf Knotenebene optimiert und Felder eliminiert, die vom Client nicht verwendet werden, und gleichzeitig die Vielseitigkeit gewährleistet.

Hier ist eine Liste der komprimierten Funktionen, die Teil davon sind.

Wirkung: Nach der Optimierung kann die Größe einer einzelnen Komponente um 25 KB reduziert werden. Basierend auf 10 Komponenten auf einer normalen Seite wird die Gesamtseitengröße um etwa 250 KB reduziert.

6. WebP optimiert Bilder

Die Penetrationsrate von WebP ist bereits recht hoch und der Optimierungseffekt ist ebenfalls offensichtlich. Allerdings unterscheiden sich betriebliche H5-Seiten von traditionell manuell entwickelten Seiten. Die meisten dieser Bilder werden von betrieblichen Studierenden selbst hochgeladen und können nicht vorab im Projekt komprimiert werden. Wir können nicht verlangen, dass sie Bilder vor dem Hochladen komprimieren, und es ist auch nicht geeignet, Bilder beim Hochladen automatisch in WebP zu komprimieren. Weil einige alte Modelle WebP nicht unterstützen. Daher legen wir im Browser dynamisch fest, dass diejenigen, die WebP unterstützen, zur vom CDN angeforderten WebP-Version wechseln.

Beispiel für die Anforderung einer WebP-Version eines Bildes (caplist=webp nach der URL hinzufügen):

Codebeispiel:

Wirkung: Im Vergleich kostet ein im Betrieb häufig verwendetes 500K-Bild für WebP bei gleicher Qualität nur 130K. Selbst bei einem schnellen Netzwerk ist die Geschwindigkeit beim Rendern von Bildern auf dem ersten Bildschirm immer noch sehr offensichtlich.

Erlebnisoptimierung

1. Legen Sie die Titelleiste fest

Wenn Sie eine herkömmliche In-End-H5-Seite öffnen, sehen Sie oben eine weiße oder schwarze native Titelleiste. Dies scheint mit der Designfarbe der H5-Seite nicht kompatibel zu sein und wirkt stark fragmentiert. Wir verwenden die von Webview bereitgestellte setToolColor-Methode, um die Text- und Hintergrundfarbe der Titelleiste im Terminal festzulegen. So erreichen Sie ein vollständiges visuelles Erscheinungsbild.

Darstellung:

Wenn im Bild links die Titelleiste nicht festgelegt ist, ist die Oberseite des iOS weiß, auf der Android-Seite ist sie jedoch schwarz und wird im Bild rechts nach dem Festlegen von der Seite getrennt In der Titelleiste wird die gesamte Seite noch eindringlicher.

Titelleiste ausblenden:

Wenn das Unternehmen eine personalisierte Titelnavigation erstellen muss oder bei der Implementierung einer H5-Seite keine Titelleiste benötigt, kann die Titelleiste direkt ausgeblendet werden, indem der Parameter qyc-title-hide=1 oder hideNav=1 an die URL angehängt wird die H5-Seite Implementieren Sie Ihre eigene Titelleiste. Gestalten Sie die Seitenpräsentation stärker integriert.

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

Darstellung:

Auf der rechten Seite ist die in H5 implementierte obere Navigation zu sehen, nachdem die native Titelleiste entfernt wurde, wodurch die Seite dreidimensionaler und vollständiger wird.

2. Unterstützt den Pulldown-Aktualisierungseffekt

Wenn unsere H5-Seite in der Vergangenheit die Seitendaten im Terminal aktualisieren wollte, konnten wir der Seite normalerweise nur Schaltflächen hinzufügen oder zurückgehen und die Seite erneut aufrufen. Jetzt können wir den Parameter qyc-support-refresh=1 nach der Seiten-URL hinzufügen, um den Pulldown-Aktualisierungseffekt zu erzielen. Der Benutzer muss die Seite nicht verlassen und erreicht so ein natives interaktives Pulldown-Erlebnis.

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

3. Legen Sie die Hintergrundfarbe für das Seiten-Dropdown fest

Die herkömmliche Webview-Seite hat nach dem Herunterziehen einen weißen Hintergrund, der ein schlechtes Aussehen und Gefühl hat. Wir können die Hintergrundfarbe der Seite über die von Webview bereitgestellte Methode update_titlebar_style festlegen. Wenn der Benutzer die Seite herunterzieht, ist dies nicht der Fall angezeigt. Die Seite ist immersiver.

Darstellung:

Nach dem Herunterziehen auf der linken Seite scheinen Seite und Navigation stark voneinander getrennt zu sein. Nach dem Festlegen der Hintergrundfarbe für die Webansicht auf der rechten Seite wird die Seite nach dem Herunterziehen vollständiger.

4. Legen Sie die Standardhintergrundfarbe der Webansicht fest

Der weiße Bildschirm war schon immer einer der Hauptgründe, warum Produktbetreiber H5 ablehnen. Er ermöglicht es Benutzern, auf einen Blick vom nativen Erlebnis abzuweichen. In der Vergangenheit war es zu spät, die Hintergrundfarbe nach dem Öffnen der Seite festzulegen Um dieses Problem zu lösen, können wir durch Anhängen des Parameters qyc-body-bgc nach der H5url und Anpassen des Werts für die Hintergrundfarbe der Seite Folgendes erreichen: qyc-body-bgc=5671c8 ; Webview startet. Dadurch wird die weiße Bildschirmanzeige eliminiert und das Seitenerlebnis weiter verbessert.

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

Darstellung:

Sie können sehen, dass beim ersten Scannen des QR-Codes zum Aufrufen der Seite auf der rechten Seite ein weißer Bildschirm angezeigt wird, während die Hintergrundfarbe auf der linken Seite voreingestellt wurde, um das Benutzererlebnis zu verbessern.

5. Optimierung vor der Belegung

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

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

示例：

6.图片加载体验

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

效果图：

最终效果展示

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

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

总结

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