Einleitung
Das Wichtigste, was Sie für Ihre Website tun können, ist heutzutage eine gute Leistung, wenn sie auf einem Smartphone oder Tablet aufgerufen wird. Hier erfährst du, wie du deine Website mit den Chrome-Entwicklertools und einem Android-Gerät für mobile Browser optimieren kannst.
Warum ist Optimierung für das mobile Web so wichtig?
Leistung
Mit der Umstellung von 2G und 3G auf 4G erhalten Mobilgeräte schnellere CPUs, mehr RAM, schnellere GPUs und einen schnelleren Netzwerkzugriff. Trotz des schlagartigen Fortschritts sind Mobilgeräte im Vergleich zu unseren Computern unzureichend. Konkret bedeutet das: Das Laden von Netzwerkressourcen dauert länger, das Entpacken von Bildern dauert länger, das Rendern der Seite dauert länger und das Ausführen von Skripts dauert länger. Sie können davon ausgehen, dass Ihre Seite auf Mobilgeräten fünf- bis zehnmal langsamer ausgeführt wird.
Akku
Mobilgeräte sind ausschließlich akkubetrieben. Nutzende von Mobilgeräten möchten, dass der Akku so lange wie möglich hält. Ein ungeeigneter Standort entlädt einen Akku viel schneller als nötig. Minimieren Sie den Netzwerkverkehr und reduzieren Sie die Farbe, um den Akkuverbrauch zu verringern. Wenn Sie eine Ressource abrufen, muss die WLAN- oder Mobilfunkverbindung eingeschaltet sein, da sich der Akku stark entlädt. Wenn der Browser ein Element darstellt, steigt die CPU- und GPU-Nutzung stark an, was auch den Akku stark belastet.
Engagement
Die Leistung trägt dazu bei, den Messwert zu verbessern, der für Sie am wichtigsten ist. Bei Facebook ist das Scrollen wichtig. In einem A/B-Test haben wir das Scrollen von 60 fps auf 30 fps verlangsamt. Interaktion minimiert. Wir haben gesagt, dass es in Ordnung ist, also Scrollen ist wichtig.
Facebook auf der Edge Conference
Mobile Nutzer erwarten, dass sie schnell ein- und aussteigen können. Mit der schnellsten Website erzielen Sie die meisten Interaktionen.
Leistungsmanagement
Chrome wird mit einer Reihe nützlicher Entwicklertools ausgeliefert. In diesem Artikel erfahren Sie, wie Sie mithilfe dieser Tools ein Profil für Ihre mobile Website erstellen können. Du kennst dich bereits mit den Chrome-Entwicklertools aus. Falls nicht, schauen Sie sich diese tollen Anleitungen an:
Sehen wir uns nun an, wie Sie Ihre mobile Website mit den Entwicklertools beschleunigen können. Wenn Sie die Chrome-Entwicklertools für Android zum ersten Mal verwenden, sehen Sie sich den Startleitfaden unten im Artikel an.
Chrome-Entwicklertools per Fernzugriff verwenden
Das Android-Gerät muss über Tethering mit Ihrem Computer verbunden sein. Rufen Sie in der Desktopversion von Chrome http://localhost:9222 auf und öffnen Sie auf Ihrem Android-Gerät Ihre Website. Daraufhin wird eine Liste der auf Ihrem Android-Gerät geöffneten Tabs angezeigt. Wählen Sie Ihre Seite aus der Liste „Inspectable-Seiten“ aus.
Sie werden dann zu den Chrome-Entwicklertools für diese Seite weitergeleitet.
Die vertraute Symbolleiste in den Chrome-Entwicklertools ist da. Das Wichtigste, was Sie über die Remote-Entwicklertools von Chrome wissen müssen, ist, dass es sich dabei um dieselben Entwicklertools handelt, die Sie aktuell auf Ihrem Computer verwenden. Der einzige Unterschied besteht darin, dass dein Android-Gerät nur für die Seite und dein Computer für die Entwicklertools verantwortlich ist. Im Hintergrund werden dieselben Daten erhoben und dieselben Funktionen verfügbar.
Ich habe zum Beispiel www.sfgate.com/movies auf meinem Smartphone aufgerufen. Mit den Chrome-Entwicklertools auf meinem Desktop habe ich den Mauszeiger auf ein div-Element im Element-Tool bewegt. Wie auf dem Desktop wird das div-Element auf meinem Android-Gerät visuell hervorgehoben.
Das Elementtool kann auch verwendet werden, um Stile ein- und auszuschalten, was praktisch ist, wenn wir die Paint-Zeit untersuchen wollen.
Verlichten des Netzwerkzugriffs
Die Netzwerkleistung ist ein Import und ist im mobilen Web noch wichtiger. Mobilgeräte haben oft langsamere Verbindungen als Desktop-Computer und Laptops. Damit Sie sicher sein können, dass Sie das Richtige tun, erstellen Sie einen Netzwerk-Snapshot. Rufen Sie dazu das Netzwerktool auf und klicken Sie auf „Aufnehmen“.
Der Screenshot zeigt den Netzwerkverkehr, der aus einer Google-Suche resultiert. Beobachten Sie die Netzwerkanfragen Ihrer Website und finden Sie Möglichkeiten, diese zu minimieren. Wenn Ihre Website Abfrageanfragen an den Server sendet, sollten Sie auf die Nutzeraktivität achten und Abfragen vermeiden, wenn der Nutzer inaktiv war. Mit dem Netzwerktool können Sie die Roh-HTTP-Header ansehen. Dies ist nützlich, wenn sie von Mobilfunknetzen überhaupt geändert werden sollten.
Farbzeiten optimieren
Einer der größten Engpässe bei mobilen Webbrowsern ist das Streichen Ihrer Seite. Beim Malen wird ein Element auf der Seite mit dem festgelegten Stil gezeichnet. Wenn das Zeichnen eines Elements teuer ist, verlangsamt dies das Darstellen der gesamten Seite. Chrome versucht, zuvor dargestellte Elemente in einem nicht sichtbaren Zwischenspeicher im Cache zu speichern. Auf Mobilgeräten ist jedoch der verfügbare GPU-RAM begrenzt, sodass die Anzahl der Elemente begrenzt ist, die außerhalb des Bildschirms im Cache gespeichert werden können. Der Nebeneffekt ist mehr Paints und jede Farbe ist langsamer als der Desktop. Für responsives Scrollen müssen Sie die Farbzeiten minimieren.
Chrome 25 unterstützt den Modus „Kontinuierliche Aktualisierung von Seiten“. Im Modus „Kontinuierliche Seitendarstellung“ werden gerenderte Elemente nie im Cache gespeichert. Stattdessen werden alle Elemente in jedem Frame mit einer Farbe versehen. Wenn Sie erzwingen, dass alle Elemente für jeden Frame gerendert werden, können Sie A/B-Tests für die Farbdauer durchführen, indem Sie Elemente ein- und ausschalten und Stile ein- und ausschalten. Dieser Vorgang ist manuell, aber es ist ein äußerst wertvolles Tool, um zu ermitteln, wie teuer das Streichen der einzelnen Elemente auf Ihrer Seite ist. Die erste Regel der Optimierung besteht darin, messen, was Sie optimieren möchten, um eine Basislinie zu erhalten. Sehen wir uns ein einfaches Beispiel an.
Aktivieren Sie zuerst den Modus „Kontinuierliche Seitenaktualisierung“:
Nach der Aktivierung wird auf Ihrem Android-Gerät oben rechts eine Grafik angezeigt. Die x-Achse der Grafik ist die Zeit, unterteilt in Frames. Die Y-Achse der Grafik misst die Farbzeit in Millisekunden. Wie Sie sehen, dauert das Zeichnen auf meinem Gerät 14 Millisekunden. Die minimale und maximale Farbzeit wird zusammen mit dem verwendeten GPU-Arbeitsspeicher ebenfalls angezeigt.
Als Test lege ich für das ausgewählte Element display: none fest. Schauen wir mal, wie teuer
die Seite jetzt ist.
Die Paint-Times sank von 14 Millisekunden pro Frame auf 4 Millisekunden pro Frame. Mit anderen Worten, das Darstellen eines Elements hat etwa 10 Millisekunden gedauert. Durch das Ein- und Ausblenden von Elementen sowie das Ein- und Ausblenden von Stilen können Sie die teuren Teile Ihrer Seite schnell eingrenzen. Denken Sie daran: Kürzere Farbzeiten bedeuten weniger Verzögerungen, eine längere Akkulaufzeit und mehr Interaktion mit Ihren Nutzern. Weitere Informationen finden Sie in diesem nützlichen Artikel zum kontinuierlichen Aktualisieren von Seiten.
Erweiterte Funktionen
about:tracing
Viele der erweiterten Funktionen für Entwickler, die in der Desktopversion von Chrome verfügbar sind, sind auch in Android Chrome verfügbar. Beispielsweise sind about:gpu-internals, about:appcache-internals und about:net-internals verfügbar. Bei der Untersuchung eines besonders kniffligen Problems benötigen Sie manchmal mehr Daten, um die Ursache des Problems einzugrenzen. Auf dem Desktop verwenden Sie möglicherweise about:tracing. Wenn Sie mit about:tracing noch nicht vertraut sind, sehen Sie sich mein Video zur Verwendung des Profilerstellungstools about:tracing an. Sie können die gleichen Daten von Android Chrome erfassen. Gehen Sie dazu folgendermaßen vor:
- adb_trace.py herunterladen
- Führen Sie „adb_trace.py“ über die Befehlszeile aus.
- Chrome auf Android-Geräten verwenden
- Drücken Sie in der Befehlszeile die Eingabetaste und beenden Sie das Skript adb_trace.py.
Wenn adb_trace.py abgeschlossen ist, haben Sie eine JSON-Datei, die Sie in about:tracing von Chrome für Computer laden können.
Erste Schritte
Sie wissen jetzt, was die Chrome-Entwicklertools mit Remote-Funktionen leisten können. Sehen wir uns nun an, wie Sie die Remote-Debugging-Sitzung starten. Falls Sie diese noch nicht verwendet haben,lesen Sie die ausführliche Anleitung für den Einstieg. Falls Sie diese bereits verwendet, aber vergessen haben, wie sie verwendet werden, finden Sie hier eine gekürzte Anleitung.
1. Android SDK installieren
Sie fragen sich vielleicht, warum Sie das Android SDK installieren müssen, wenn Sie für das Web entwickeln. Das SDK enthält ADB (Android Debug Bridge). Chrome auf Ihrem Computer muss mit Ihrem Android-Gerät kommunizieren können. Chrome kommuniziert nicht direkt mit dem Android-Gerät, sondern leitet die Kommunikation über ADB.
2. USB-Debugging auf deinem Gerät aktivieren
Die Option zum Aktivieren von USB-Debugging findest du in den Android-Einstellungen. Aktivieren Sie die Funktion.
3. Mit dem Gerät verbinden
Falls noch nicht geschehen, verbinden Sie Ihr Android-Gerät über USB mit Ihrem Desktop. Wenn Sie USB-Debugging zum ersten Mal verwenden, wird die folgende Eingabeaufforderung angezeigt:
Wenn Sie häufig Remote-Fehlerbehebungssitzungen ausführen, empfehlen Sie, die Option "Von diesem Computer immer zulassen" zu aktivieren.
4. Prüfen, ob das Gerät richtig verbunden ist
Führen Sie adb devices über die Eingabeaufforderung aus. Ihr Gerät sollte in der Liste erscheinen.
5. USB-Debugging in Chrome aktivieren
Öffnen Sie Einstellungen > Erweitert > Entwicklertools und aktivieren Sie die Option USB-Web-Debugging aktivieren, wie hier gezeigt:
6. Verbindung mit den Entwicklertools mit deinem Android-Gerät herstellen
Führen Sie dazu diesen Befehl aus:
adb forward tcp:9222 localabstract:chrome_devtools_remote
erstellt über ADB eine Brücke zwischen Ihrem Desktop-Computer und Ihrem Android-Gerät. Wenn Sie Probleme haben, bis zu diesem Punkt zu gelangen, lesen Sie die detaillierte Anleitung zur Einrichtung.
7. Bestätigung wird durchgeführt
Prüfen Sie, ob Ihr Gerät richtig verbunden ist. Öffnen Sie dazu Chrome auf Ihrem Computer und rufen Sie http://localhost:9222 auf. Wenn ein 404-Fehler, ein anderer Fehler oder nicht Folgendes angezeigt wird:
Eine ausführliche Anleitung zur Einrichtung finden Sie hier.
Fazit
Mobile Nutzer haben es oft eilig und müssen diese wichtige Information schnell von Ihrer Seite abrufen. Als Entwickler mobiler Websites ist es Ihre Aufgabe, dafür zu sorgen, dass die Seite schnell geladen wird und auf Mobilgeräten gut funktioniert. Andernfalls sinkt die Nutzerinteraktion. Die Funktionen der Remote-Chrome-Entwicklertools entsprechen denen ihrer Desktop-Version. Die Benutzeroberfläche ist so ähnlich, dass Sie sich nicht mit neuen Tools vertraut machen müssen. Mit anderen Worten, Ihr Workflow wird übertragen. Denken Sie daran: Facebook ist nicht unbesiegbar für Leistungsprobleme und Ihre Website auch nicht. Leistungsstarke Websites sorgen für mehr Nutzerinteraktionen.