Einführung
Das Wichtigste, was ihr heute für eure Website tun könnt, ist, dafür zu sorgen, dass sie auf Smartphones und Tablets gut funktioniert. In diesem Artikel erfahren Sie, wie Sie Ihre Website mithilfe der Chrome-Entwicklertools und eines Android-Geräts für mobile Browser optimieren können.
Warum ist die Optimierung für das mobile Web so wichtig?
Leistung
Mobilgeräte erhalten schnellere CPUs, mehr RAM, schnellere GPUs und einen schnelleren Netzwerkzugriff, da wir von 2G und 3G auf 4G umsteigen. Trotz des rasanten Fortschritts sind Mobilgeräte im Vergleich zu Computern leistungsschwach. Konkret dauert das Laden von Netzwerkressourcen, das Entpacken von Bildern, das Rendern der Seite und das Ausführen von Scripts länger. Sie können davon ausgehen, dass Ihre Seite auf einem Mobilgerät 5- bis 10-mal langsamer geladen wird.
Akku
Mobilgeräte werden ausschließlich mit Akku betrieben. Nutzer von Mobilgeräten möchten, dass der Akku so lange wie möglich hält. Eine nicht optimal platzierte Kamera verbraucht mehr Akkuleistung als nötig. Minimieren Sie den Netzwerkverkehr und reduzieren Sie die Anzahl der Zeichenvorgänge, um den Akkuverbrauch zu senken. Wenn Sie eine Ressource abrufen, muss das WLAN oder die Mobilfunkschnittstelle aktiviert sein, was den Akku entlädt. Wenn der Browser ein Element rendert, steigt die CPU- und GPU-Auslastung, was auch den Akku belastet.
Engagement
Die Leistung ist dazu da, den Messwert zu erhöhen, der für Sie am wichtigsten ist. Bei Facebook ist uns 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 Scrollen wichtig ist.
Facebook auf der Edge Conference
Nutzer von Mobilgeräten erwarten, dass sie schnell finden, wonach sie suchen. Die schnellste Website erzielt die meisten Interaktionen.
Leistung verwalten
Chrome bietet eine Reihe von Entwicklertools. In diesem Artikel erfahren Sie, wie Sie diese Tools verwenden, um ein Profil Ihrer mobilen Website zu erstellen. Wenn Sie bereits mit den Chrome-Entwicklertools vertraut sind, ist das großartig! Falls nicht, sehen Sie sich diese hilfreichen Tutorials an:
Sehen wir uns nun an, wie Sie Ihre mobile Website mit den DevTools beschleunigen können. Wenn Sie die Chrome-Entwicklertools für Android zum ersten Mal verwenden, lesen Sie den Startleitfaden am Ende des Artikels.
Chrome-Entwicklertools per Remotezugriff verwenden
Ihr Android-Gerät ist mit Ihrem Computer verbunden. Rufen Sie in Chrome auf dem Computer http://localhost:9222 auf und öffnen Sie Ihre Website auf Ihrem Android-Gerät. Sie werden zu einer Liste der geöffneten Tabs auf Ihrem Android-Gerät weitergeleitet. Wählen Sie Ihre Seite aus der Liste „Prüfbare Seiten“ aus.
um die Chrome-Entwicklertools für diese Seite zu öffnen.
Ah, die vertraute Symbolleiste der Chrome-Entwicklertools ist da. Das Wichtigste, was Sie über die Remote-Chrome-Entwicklertools wissen müssen, ist, dass es sich um dieselben Entwicklertools handelt, die Sie heute auf Ihrem Desktop verwenden. Der einzige Unterschied besteht darin, dass Ihr Android-Gerät nur für die Seite verantwortlich ist, während Ihr Desktop für die Entwicklertools verantwortlich ist. Im Hintergrund werden dieselben Daten erhoben und dieselben Funktionen sind verfügbar.
Ich habe beispielsweise www.sfgate.com/movies auf meinem Smartphone aufgerufen. In den Chrome-Entwicklertools auf meinem Computer habe ich den Mauszeiger im Elemente-Tool auf ein div-Element bewegt. Wie auf dem Computer wird das div-Element auch auf meinem Android-Gerät visuell hervorgehoben.
Mit dem Elemente-Tool können Sie auch Stile aktivieren und deaktivieren. Das ist nützlich, wenn wir die Paint-Zeiten untersuchen.
Netzwerkzugriff im Blick behalten
Die Netzwerkleistung ist wichtig, im mobilen Web sogar noch wichtiger. Mobilgeräte haben oft langsamere Verbindungen als unsere Desktop- und Laptop-Computer. Um sicherzugehen, dass Sie alles richtig machen, erstellen Sie einen Netzwerk-Snapshot. Rufen Sie dazu das Netzwerktool auf und klicken Sie auf „Aufzeichnen“.
Der Screenshot zeigt den Netzwerkverkehr, der durch eine Google-Suche entsteht. Beobachten Sie die Netzwerkanfragen, die von Ihrer Website gestellt werden, und finden Sie Möglichkeiten, sie zu minimieren. Wenn deine Website Abrufanfragen an den Server sendet, solltest du die Nutzeraktivität im Auge behalten und Abrufe vermeiden, wenn der Nutzer inaktiv ist. Mit dem Netzwerktool können Sie die unbearbeiteten HTTP-Header aufrufen. Das ist nützlich, wenn Mobilfunknetze sie ändern.
Darstellungszeiten optimieren
Einer der größten Engpässe in mobilen Webbrowsern ist das Rendern der Seite. Beim Zeichnen wird ein Element auf der Seite mit dem angegebenen Stil gezeichnet. Wenn ein Element aufwendig zu rendern ist, verlangsamt sich das Rendern der gesamten Seite. Chrome versucht, zuvor gerenderte Elemente in einem Offscreen-Zwischenspeicher zu speichern. Auf Mobilgeräten ist der verfügbare GPU-RAM jedoch begrenzt, was die Anzahl der Elemente einschränkt, die außerhalb des Bildschirms im Cache gespeichert werden können. Die Nebenwirkung ist, dass mehr Paint-Ereignisse auftreten und jedes Paint-Ereignis langsamer ist als auf dem Computer. Für ein responsives Scrollen müssen Sie die Paint-Zeiten minimieren.
Chrome 25 enthält den Modus für kontinuierliches Neuzeichnen von Seiten. Im Modus für kontinuierliches Seiten-Repaint werden gerenderte Elemente nie im Cache gespeichert. Stattdessen werden alle Elemente in jedem Frame gerendert. Wenn alle Elemente in jedem Frame gerendert werden, können Sie A/B-Tests der Renderingzeiten durchführen, indem Sie Elemente und Stile aktivieren und deaktivieren. Dieser Prozess ist zwar manuell, aber ein unschätzbares Tool, um herauszufinden, wie aufwendig das Rendern der einzelnen Elemente auf Ihrer Seite ist. Die erste Regel der Optimierung lautet: Messen Sie, was Sie optimieren möchten, um einen Referenzwert zu erhalten. Sehen wir uns ein einfaches Beispiel an.
Aktivieren Sie zuerst den Modus für das kontinuierliche Neurendern der Seite:
Nach der Aktivierung wird rechts oben auf Ihrem Android-Gerät ein Diagramm angezeigt. Die X-Achse des Diagramms ist die Zeit, die in Frames unterteilt ist. Die y-Achse des Diagramms misst die Darstellungszeit in Millisekunden. Auf meinem Gerät dauert das Rendern der Seite 14 Millisekunden. Außerdem werden die minimale und maximale Paint-Zeit sowie der verwendete GPU-Arbeitsspeicher angezeigt.
Als Test habe ich den Stil des ausgewählten Elements auf display: none festgelegt. Sehen wir uns an, wie teuer das Rendern der Seite jetzt ist.
Die Paint-Zeiten sanken von etwa 14 Millisekunden pro Frame auf 4 Millisekunden pro Frame. Mit anderen Worten: Das Zeichnen dieses einen Elements hat etwa 10 Millisekunden gedauert. Wenn Sie Elemente und Stile aktivieren und deaktivieren, können Sie die teuren Teile Ihrer Seite schnell eingrenzen. Denken Sie daran: Kürzere Paint-Zeiten bedeuten weniger Ruckeln, eine längere Akkulaufzeit und mehr Interaktionen von Ihren Nutzern. Wenn Sie mehr erfahren möchten, lesen Sie diesen Artikel zum Modus für kontinuierliches Neuzeichnen von Seiten.
Erweiterte Funktionen
about:tracing
Viele der erweiterten Entwicklerfunktionen, die in Chrome für Computer verfügbar sind, sind auch in Chrome für Android verfügbar. Beispielsweise sind about:gpu-internals, about:appcache-internals und about:net-internals verfügbar. Wenn Sie ein besonders kniffliges Problem untersuchen, 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 und Erkundung des Profiling-Tools about:tracing an. Es ist möglich, dieselben Daten aus Chrome für Android zu erfassen. Gehen Sie dazu so vor:
- adb_trace.py herunterladen
- adb_trace.py über die Befehlszeile ausführen
- Chrome unter Android verwenden
- Drücken Sie in der Befehlszeile die Eingabetaste, um das Script „adb_trace.py“ zu beenden.
Nachdem „adb_trace.py“ abgeschlossen ist, haben Sie eine JSON-Datei, die Sie in about:tracing in Chrome für Computer laden können.
Startleitfaden
Nachdem wir uns angesehen haben, was die Remote-Chrome-Entwicklertools können, sehen wir uns nun an, wie Sie mit der Remote-Debugging-Sitzung beginnen. Wenn Sie sie noch nicht verwendet haben, lesen Sie die detaillierte Anleitung für die ersten Schritte. Wenn Sie sie bereits verwendet, aber vergessen haben, wie sie genau funktionieren, finden Sie hier auch eine Kurzanleitung.
1. Android SDK installieren
Vielleicht fragen Sie sich, warum Sie das Android SDK installieren müssen, wenn Sie für das Web entwickeln. Das SDK enthält die Android Debug Bridge (ADB). Chrome auf dem 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 weiter.
2. USB-Debugging auf dem Gerät aktivieren
Die Option zum Aktivieren des USB-Debuggings finden Sie 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 Computer. Wenn du USB-Debugging zum ersten Mal verwendest, wird die folgende Aufforderung angezeigt:
Wenn Sie häufig Remote-Debugging-Sitzungen durchführen, sollten Sie „Von diesem Computer immer zulassen“ aktivieren.
4. Prüfen, ob das Gerät richtig verbunden ist
Führe in der Eingabeaufforderung adb devices aus. Dein Gerät sollte in der Liste aufgeführt sein.
5. USB-Debugging in Chrome aktivieren
Öffnen Sie Einstellungen > Erweitert > Entwicklertools und aktivieren Sie die Option USB-Web-Debugging aktivieren, wie hier gezeigt:
6. DevTools-Verbindung zu Ihrem 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 bis hierhin Probleme haben, lesen Sie die detaillierte Einrichtungsanleitung hier.
7. Prüfen, ob alles bereit ist
Prüfen Sie, ob Ihr Gerät richtig verbunden ist. Öffnen Sie dazu Chrome auf Ihrem Desktop und rufen Sie http://localhost:9222 auf. Wenn Sie einen 404-Fehler oder einen anderen Fehler erhalten oder etwas wie das Folgende nicht sehen:
Hier finden Sie eine detaillierte Einrichtungsanleitung.
Fazit
Mobile Nutzer haben es oft eilig und müssen schnell an die gewünschten Informationen auf Ihrer Seite gelangen. Als Entwickler einer mobilen Website müssen Sie dafür sorgen, dass der Seitenaufbau schnell erfolgt und die Seite auf Mobilgeräten gut funktioniert. Andernfalls sinkt die Nutzerinteraktion. Die Remote-Chrome-Entwicklertools sind funktional mit ihren Desktop-Entsprechungen identisch. Die Benutzeroberfläche ist so ähnlich, dass Sie sich nicht mit neuen Tools vertraut machen müssen. Mit anderen Worten: Ihr Workflow wird übernommen. Denkt daran: Facebook ist nicht vor Leistungsproblemen gefeit und eure Website auch nicht. Leistungsstarke Websites erzielen ein höheres Nutzer-Engagement.