DIE OPTIMIERUNG DER SCHÄRFE IN ALLEN BROWSERN

By Flemming Ravn | Jan 03 2017 | Insights | Technology

Ein ePaper zu liefern mag auf den ersten Blick einfach erscheinen. Eine PDF hochladen, die PDF seinen Lesern servieren, fertig. Obwohl es im Grunde nah dran an der Wahrheit ist, ist es bei weitem nicht so leicht, ein gutes Leseerlebnis zu erschaffen. Es ist ein ständiger Kampf zwischen Leistung und Qualität.

Vor kurzem haben wir unseren Desktop-Web-Reader umstrukturiert, um dafür ein makelloses Erlebnis für alle Leser zu sichern. Da jedoch nicht alle Browser gleich sind, war dies weit davon entfernt eine einfache Aufgabe zu sein.

Hintergrund

Einer der wichtigsten Aspekte bei Visiolinks Lösungen, Plattformen übergreifend, ist die Fähigkeit, Publikationen mit hoher Qualität und Genauigkeit zu entwerfen. Es wird eine Menge Zeit und Mühe verwendet bei der Erstellung dieser Publikationen, wir arbeiten engagiert daran, eine Benutzererlebnis zu schaffen, das dem entspricht.

Vor nicht allzu langer Zeit war Flash, sowie das eingebettete SWF-Format, unsere primäre Technologie für die Desktop Apps. Damit waren wir in der Lage, Seiten mit großer Qualität in modernen und älteren Browsern zu präsentieren.

Irgendwann begann Flash jedoch nicht mehr favorisiert zu sein, unter Browser-Herstellern und Anwendern. Es war deshalb die optimale Gelegenheit auf eine HTML5-basierte Plattform zu wechseln.

HTML5 ist für viele Dinge ideal, aber der Cross-Browser-Support ist bei weitem nicht vollständig verbreitet und integriert. Wahrscheinlich gibt es noch immer Web-Entwickler die von Zeit zu Zeit anfangen zu schreien vor Frustration.

Die erste Implementierung

Eines unserer wichtigsten Anliegen, bei der Umstellung auf die neue Plattform, war es sicherzustellen, dass der Text scharf ist und die Seite schnell genug ladet. Wir haben hier beschlossen SVG für Vector-Rendering zu verwenden. Es gab uns die Möglichkeit, die Seiten relativ schnell zu erstellen, dazu gibt die Technologie der Seite eine automatische schärfe, auch wenn gezoomt wird. Leider kämpfen die meisten Computer und Browser mit dem Volumen der Elemente einer Seite, sobald diese aus mehr als 30.000 Einzelformen besteht.

Obwohl das Lesen ziemlich schnell in den meisten Browsern beginnen kann, macht eine zufügen von SVG die Seite langsamer und in vielen Fällen wird das Erlebnis abgehackt und unerträglich.

Um unseren Nutzern das bestmögliche Erlebnis zu bieten, mussten wir einen Kompromiss eingehen. Die Schärfe wurde gegen Leistung getauscht. Dies könnte erreicht werden, durch die Umstellung auf ein Bildformat mit schneller Ladezeit und Wiedergabe, aber dafür mit ansatzweise verschwommenen Text.

Anschließend wird ein Leistungstest der Computerspezifikationen des Benutzers und Browser-Anbieter dann bestimmen, ob der Benutzer das SVG-Format geladen haben sollte, oder ob das System zurück in der Bildanzeige fallen sollte.

Nach dem Start, haben wir einen Blick auf die demografische Entwicklung unserer Browser geworfen und erkannt, dass eine beträchtliche Menge an Benutzern zurück auf die Bildanzeige fällt und somit nicht den Vorteil von scharfen Texten nutzen können. Wir beschlossen daraufhin, für das optimieren des Rendering und die suche nach alternativen Lösungen, Zeit abzusetzen.

Prozess

Um eine fundierte Entscheidung bei der Wahl der Lösung treffen zu können, war die erste Aufgabe festzustellen, was "gute Leistung" wirklich bedeutet. Alle akzeptablen Lösungen musste klar und scharf in der Qualität sein. Vor diesem Hintergrund konzentrierten sich unsere Tests auf zwei Hauptbereiche:

  • Ladezeit
  • On-Screen-Leistung nach dem Laden

Der erste Test zeigt, wie lange es dauert eine Seite zu laden und auf dem Bildschirm anzuzeigen. Der zweite Test konzentriert sich dann auf die Leistung auf dem Bildschirm, wenn die Seite geladen wurde. Der erste ist ein einfacher Timing-Test, der zweite jedoch war ein wenig schwieriger zu quantifizieren.

Die zweite Aufgabe war es, eine Testumgebung zu etablieren, die validen und klaren Ergebnisse, in den Fokusbereichen, bieten würde, während es eine realistische Umgebung widerspiegelt.

In laufe einigen Wochen haben wir verschiedene Tests und Prototypen durchlaufen, um den Betrag der Technologien zur Optimierung zu verringern. Wir identifizierten drei vielversprechende Ansätze:

  • SVG
  • Bild mit SVG als Daten-URI
  • HTML5 Canvas

Wirft man einen Blick auf unsere aktuellen Benutzer Demographie, stellt man fest, dass fünf Browser für den eigentlichen Test relevant sind, und alle sollten am besten den Anforderungen gerecht werden:

  • Internet Explorer 11
  • Edge
  • Chrome
  • Firefox
  • Safari

 

Ergebnisse

Zwei Testrunden wurden durchgeführt, eine für jeden Fokusbereich den wir zuvor ermittelt haben.

Bei der ersten Testrunde war der Fokus auf der Zeitspanne die es dauern würde eine Beispielseite zu laden. In allen Browsern stoppten wir die Zeit die es dauerte die Seite zu laden, vom Zeitpunkt an dem die Seite anfing zu laden, bis die Seite vollständig auf dem Bildschirm war.

 optimize_for_web_Load_Times.png

Abgesehen von ein paar extremen, haben alle Browser sehr gut auf das laden von SVG und Canvas reagiert. Zu unserer Überraschung hat der alternde Internet Explorer 11 sehr gut mit allen 3 Technologien funktioniert. Auf der anderen Seite haben Firefox, Safari und Edge einige ernsthafte Verzögerungen, durch die Verwendung der Image-basierte, gezeigte.

Dies führte dazu, dass die Image-basierte Lösung einen schwierigen Start hatte.

Der Fokus bei der zweiten Testrunde lag darauf zu untersuchen, wie gut jeder Browser funktionierte, nachdem die Seite fertig geladen war. Wir haben getestet, wie gut die Browser die Seite wiedergegeben konnte und ob dabei erhebliche Verzögerungen oder "stottern" vorkam.

Die Bewertung wurde in drei aufgeteilt es wurde gute (100), mittelmäßige (66) und schlechte (33) Leistung vergeben.

 optimize_for_web_Performance.png

Der zweite Test zeigte ein paar wirklich interessante Punkte gezeigt: Canvas hat z.B. sehr gut funktioniert auf den meisten Browsern und Safari dagegen hat konstant niedrige Punktzahlen bekommen.

Ein weiterer interessanter Punkt war, dass der Internet Explorer 11 einige der besten Ergebnisse beim laden von SVG-Dateien hatte, aber dafür eine der schlechtesten wiedergaben auf dem Bildschirm.

Fazit

Letztendlich standen wir mit drei unterschiedlichen Ansätzen, jeweils mit Stärken und Schwächen und mit extremen Unterschieden in der Leistung von Browser zu Browser. Einige Browser zeigte gute Testergebnisse, aber waren schlecht, wenn sie in das Endprodukt integriert wurden. Andere Browser hatte gute Ladezeiten, aber arbeitete langsam auf dem Bildschirm.

Insgesamt machte Canvas den besten Eindruck, sowohl was die Ladezeit, wie auch die on-Screen-Leistung betrifft, so dass die Wahl am Ende relativ einfach war. Unsere Lösung muss eine Kombination von direkten SVG-Rendering in Safari bei Mac, und Canvas- Rendering bei allen anderen Browsern sein.

Die Verbesserung der Leistung ist eine Reise, die niemals endet. In Takt mit den ständigen Verbesserungen von Browsern, Systemen und Technologien, wird es immer etwas zu holen geben. Wir sind einen Schritt näher gekommen, unseren Nutzern das bestmögliche Leseerlebnis zu geben. Hoffentlich wird es eines Tages möglich sein scharfes Text-Rendering und reibungslose Leistung in allen Browsern zu gewährleisten.


Flemming Ravn

Author

Flemming Ravn

Software Developer, Visiolink Technology