Responsive Webdesign lernen (3) - So verbessern Sie die Leistung von Webseiten auf Mobilgeräten

Vorwort

Aufgrund von Bandbreitenbeschränkungen und Prozessorgeschwindigkeit stellen mobile Geräte höhere Anforderungen an die Leistung von Webseiten. Welche Elemente einer Webseite verlangsamen die Ladegeschwindigkeit der Webseite auf Mobilgeräten? Was sollte mit diesen Elementen getan werden, um die Gesamtleistung der Seite auf Mobilgeräten zu verbessern? Gibt es ein Designmuster, das sowohl dem mobilen als auch dem Desktop-Seitendesign gerecht wird?

Inhalt dieses Artikels:

1. Leistungstest für Desktop-Webseiten

2. Leistungstests von Webseiten auf Mobilgeräten

3. Leistungsengpässe bei Webseiten für mobile Geräte

4. So verbessern Sie die Leistung von Webseiten auf Mobilgeräten

5. Was ist Mobile-First-Responsive-Webdesign und Progressive Enhancement?

Text

1. Leistungstest für Desktop-Webseiten

Von Desktop-Browsern verwendete Seiten können mit einem Plug-In namens Yslow erkannt werden. Dieses Plugin ist sowohl für Firefox als auch für Chrome verfügbar. Es handelt sich um ein von Yahoo geleitetes Projekt. Die Adresse lautet: https://github.com/marcelduran/yslow/wiki

Nachdem wir YSlow in Chrome installiert haben, öffnen wir zum Testen die Homepage von Sina:

( Webkomponenten werden geladen... )

Nach dem Laden wird ein Analyseergebnis angezeigt:

Sie können sehen, dass die vergebene Punktzahl D, 62 Punkte, ist.

YSlow verfügt über eine Reihe von Standards zum Testen der Seitenleistung. Es erkennt die Webseite gemäß jedem dieser Standards und gibt je nach Situation eine Bewertung und Vorschläge ab. Die Bewertungen und Empfehlungen auf Sinas Homepage lauten beispielsweise:

Sehen wir uns den ersten Punkt an, „Weniger HTTP-Anfragen stellen“, der konkrete Vorschläge enthält:

Diese Seite enthält 19 externe Javascript-Skripte. Versuchen Sie, sie zu einem zu kombinieren.
Diese Seite hat 33 externe Hintergrundbilder. Versuchen Sie, sie mit CSS-Sprites zu kombinieren.

Durch die Verringerung der Anzahl der Komponenten auf einer Seite verringert sich die Anzahl der zum Rendern der Seite erforderlichen HTTP-Anfragen, was zu schnelleren Seitenladezeiten führt. Einige Möglichkeiten zum Reduzieren der Anzahl der Komponenten sind: Kombinieren Sie Dateien, kombinieren Sie mehrere Skripts in einem Skript, kombinieren Sie mehrere CSS-Dateien in einem Stylesheet und verwenden Sie CSS-Sprites und Imagemaps.

Es ist ersichtlich, dass es auf der Sina-Homepage viele JS-Dateien mit externen Links gibt, was zu vielen HTTP-Anfragen führt. Zu viele HTTP-Anfragen verlangsamen die Ladegeschwindigkeit von Webseiten.

Schauen wir uns zum Beispiel die Punkte an, bei denen Sina die Note A bekam.   Verwenden Sie GET für AJAX-Anfragen . Die Komplimente lauten:

Bei Verwendung des XMLHttpRequest-Objekts implementiert der Browser POST in zwei Schritten: (1) Senden der Header und (2) Senden der Daten. Es ist besser, GET statt POST zu verwenden, da GET die Header und die Daten zusammen sendet (es sei denn, es gibt viele Cookies). Die maximale URL-Länge des IE beträgt 2 KB. Wenn Sie also mehr als diese Datenmenge senden, können Sie GET möglicherweise nicht verwenden.

Eigentlich macht Sina das in vielen Bereichen sehr gut. Es besteht jedoch noch Verbesserungsbedarf.

2. Leistungstests von Webseiten auf Mobilgeräten

Desktop-Browser können problemlos Plug-Ins installieren, um die Leistung von Webseiten zu ermitteln. Bei mobilen Browsern ist dies jedoch nicht möglich. Wenn Sie die Leistung einer mobilen Webseite analysieren möchten, gibt es nur eine Möglichkeit: Sie müssen die HTTP-Anforderung und die HTTP-Antwort während der Weiterleitung analysieren. Experten können versuchen, die Routenprotokollanalyse mithilfe eines Proxyservers zu lesen. Jetzt gibt es aber eine andere Möglichkeit, nämlich Blaze zu verwenden. Es handelt sich um einen kostenlosen Service zur Analyse der Leistung mobiler Seiten, der jedoch immer nur eine Anfrage gleichzeitig bearbeiten kann, sodass Sie möglicherweise eine Weile warten müssen und nicht so schnell ist wie YSlow. Dennoch ist die Leistungsanalyse gut.

Die Adresse von Blaze lautet http://mobitest.akamai.com/m/index.cgi

Für den Test verwenden wir 3G Sina:

Geben Sie die Adresse von 3g Sina in die Adressleiste ein und wählen Sie dann den Gerätetyp aus. Sowohl für Gerät als auch Standort gibt es jetzt nur noch zwei Optionen. Tatsächlich kann ein solcher Webdienst auch in China entwickelt werden.

Klicken Sie nach Eingabe der Parameter auf

Anschließend beginnt die Analyse. Dieser Vorgang kann mehrere Minuten dauern. Die Dauer der Wartezeit hängt davon ab, wie viele Analyseanforderungen vor Ihnen in der Warteschlange stehen ... Diese Site kann jeweils nur eine Seite analysieren.

Wenn die Ergebnisse vorliegen, wird eine Zusammenfassung der durchschnittlichen Ladezeit und Größe dieser Webseite angezeigt:

Es ist ersichtlich, dass die Ladegeschwindigkeit von 3G Sina auch außerhalb des Landes akzeptabel ist und die Seitengröße sehr klein ist.

Werfen wir einen Blick auf eine ausführlichere Leistungsanalyse (klicken Sie hier, um den HAR-Bericht anzuzeigen – HAR: HTTP-Archivbericht):

Sie können die Statistiken überprüfen

Bilder machen immer noch einen großen Teil des Seitenverkehrs aus. Darüber hinaus sind die Größe von JS und der Seitentext selbst nahezu gleich, was darauf hindeutet, dass 3g Sina immer noch stark auf JS angewiesen ist.

Probieren Sie nun damit aus, was passiert, wenn Sie die normale Sina-Homepage mit dem Browser eines Mobilgeräts öffnen:

Wie Sie sehen, wird auf der Seite eine Eingabeaufforderung angezeigt, die den Benutzern vorschlägt, die Touchscreen-Version von Sina auf ihren Mobiltelefonen zu verwenden.

Sehen wir uns die HAR-Datei an, um zu sehen, wie das funktioniert.

Es ist ersichtlich, dass die Seitenanforderung zuerst an einen PWS-Server ( einen von Microsoft gestarteten persönlichen Webserver ) gesendet wird und die Anforderung dann an eine andere Adresse ( http://sina.cn ) umgeleitet wird ( Statuscode 302 ). Dies sind nicht die wichtigsten Punkte. Im Request-Header unten gibt der User-Agent das Gerät an, von dem die Anfrage kommt, und den Typ des Betriebssystems, das auf dem Gerät läuft. Es ist anzunehmen, dass Sina diese Informationen genutzt hat, um sich ein Urteil zu bilden und die Benutzer zu veranlassen, auf die Touchscreen-Version von Sina umzusteigen.

3. Leistungsengpässe bei Webseiten für mobile Geräte

Nach der Analyse mehrerer Seitenstatistiken ähneln diese im Wesentlichen der folgenden Verteilung:

Die Performance von Webseiten auf mobilen Geräten wird offensichtlich durch Bilddateien beeinträchtigt (die Größe von HTML- und JS-Dateien sollte nicht unterschätzt werden). Wenn die Seite eingebetteten Code enthält, wie etwa Google Maps, werden darüber hinaus viele unerwartete Inhalte geladen, was zu einer Verlangsamung der Webseite führt.

4. So verbessern Sie die Leistung von Webseiten auf Mobilgeräten

Die Verbesserung der Webseitenleistung auf Mobilgeräten beginnt auch mit Bildern und eingebetteten Codeblöcken (Google Maps).

4.1 Wie kann die Größe von Bildern reduziert werden, um die Zugriffsgeschwindigkeit auf Mobilgeräten zu verbessern?

Es gibt zwei Situationen:

Fall 1: Das Bild ist in CSS und wird als Hintergrund verlinkt

Anschließend können Sie mithilfe einer Software wie PS die Bildqualität reduzieren und so die Bildgröße verringern.

Fall 2: Das Bild ist als img-Tag in der HTML-Datei angegeben

In diesem Fall kann die alternative Dateimethode nicht verwendet werden. Denn es kann sein, dass das Bild selbst nicht von Ihrem Server bereitgestellt wird, sondern ein externes Linkbild. In dieser Situation können Sie die folgenden Methoden zur Verbesserung nutzen:

Originaler HTML-Codeausschnitt:

Der Vorteil dabei ist, dass Webdesigner lediglich ein hochauflösendes Bild bereitstellen müssen und sich dann keine Gedanken darüber machen müssen, ob es an verschiedene Geräte angepasst werden kann, da Sencha die Größenanpassung für Sie übernimmt.

Der Nachteil dabei liegt auf der Hand: Das Bild läuft über einen Server eines Drittanbieters, was definitiv die Effizienz beeinträchtigt. Darüber hinaus handelt es sich hierbei um einen Auslandsdienst, der die meisten in China produzierten Mobiltelefone möglicherweise nicht unterstützt. Allerdings können Chinesen einen ähnlichen Webdienst entwickeln, um die Größe inländischer Bilder zu ändern.

4.2 Wie gehe ich mit Karten auf Seiten für Mobilgeräte um?

Auch das ist ganz einfach. Es geht darum, eine logische Entscheidung zu treffen, wie wir bereits erwähnt haben. Wenn der Bildschirm kleiner als eine bestimmte Größe ist, wird die Karte unsichtbar gemacht. wie:

5.1 Mobile-first Responsive Webdesign

Mobile-first Responsive Webdesign bedeutet „RWD-Techniken, die von einer mobilen Vorlage ausgehen“. Das heißt, der Entwurf von RWD sollte bei der mobilen Version beginnen und die Komplexität nach oben hin schrittweise steigern.

Sehr kleine Bildschirme ( frühe Nokia- und Blueberry-Telefone usw. ):

Verwenden Sie das einfachste HTML, das einfachste Layout, sehr kleine Bilder, begrenztes CSS und JS

Kleine Bildschirme ( Smartphones: iPhone etc. ):

Wenn das Telefon es unterstützt, können Sie HTML5-Funktionen, einfaches Layout, kleinere Bilder ( größer als sehr kleiner Bildschirm ), mehr CSS und js hinzufügen

Mittlere Bildschirme ( iPad, Tablet usw. )

Da Sie mehr Platz haben, können Sie optionalen Inhalt hinzufügen, beispielsweise eine Seitenleiste. Ein mehrspaltiges Layout ist verfügbar. Es können größere Bilder verwendet werden.

Große Bildschirme ( wie Desktop-Monitore, Fernseher usw. )

Sie können ein Breitbildlayout (z. B. drei oder vier Spalten usw.) verwenden und große Bilder verwenden. Bei Fernsehnutzern sollten Sie eine Optimierung der Navigation in Erwägung ziehen, da dieser möglicherweise 3 Meter entfernt steht und die Seite fernsteuert.

5.2 Progressive Verbesserung

Progressive Enhancement betrachtet Webdesign als verschiedene Ebenen.

Die erste Ebene ist der strukturelle Inhalt. Diese Ebene bestimmt die grundlegende Struktur und den Inhalt der Webseite. Wenn das Design auf dieser Ebene bleibt, können fast alle Geräte Ihre Seite öffnen.

Die zweite und dritte Ebene sind CSS und JS. Sie können nicht garantieren, dass alle Geräte diese Funktionen unterstützen, aber wenn dies der Fall ist, werden die Benutzer eine gute Erfahrung machen.

Viele Jahre lang haben Webentwickler Webanwendungen für hochmoderne Browser entwickelt und die Benutzer älterer Browser ignoriert. ( In China scheint die Situation nicht sehr ernst zu sein, und alle kümmern sich weiterhin gut um die Benutzer alter Browser .) Das Designkonzept von Progressive Enhancement ist das Gegenteil: Es konzentriert sich auf den Inhalt und verbessert dann das Benutzererlebnis. Falls das Endgerät dies nicht unterstützt, ist zumindest die Erreichbarkeit der Seiteninhalte gewährleistet.

5.3 Content-First-Design

Mobile-first Responsive Webdesign und Progressive Enhancement werden manchmal auch als Content-First-Design bezeichnet, da bei beiden der Inhalt eine große Bedeutung hat und im Design an erster Stelle steht. Auf einer guten Seite, bei der der Inhalt an erster Stelle steht, sollten die Informationen geordnet angeordnet sein, auch wenn die Webseite bloß eine Seite ist.

Zusammenfassen:

Um eine gute Performance mobiler Webseiten zu erreichen, müssen viele Aspekte verbessert werden. Zunächst sollte sich unsere Designphilosophie auf die Auswahl und Organisation von Inhalten konzentrieren. Zweitens sollten Faktoren, die die Seitenladegeschwindigkeit verlangsamen, so weit wie möglich vermieden werden (z. B. zu viele HTTP-Anfragen), und diejenigen, die nicht vermieden werden können, sollten so weit wie möglich optimiert werden (z. B. Bildverkleinerung und Ausblenden von Karten). Das Wichtigste ist schließlich das Bewusstsein des Designers. Das Streben nach schönem und schillerndem Design bringt den Benutzern nicht das beste Benutzererlebnis. Das beste Benutzererlebnis sollte auf der Reaktionsgeschwindigkeit basieren und nur wenn die Geschwindigkeit gewährleistet ist, kann von Verschönerung gesprochen werden.