Tip:
Highlight text to annotate it
X
Hallo,
ich heiße Maile Ohye.
Ich bin Developer Programs Tech Lead
im Webmaster-Support-Team bei Google.
In diesem Video geht es darum, schnelle Lösungen
für die Leistungsoptimierung eurer mobilen Website zu finden,
die ihr oder euer Technikerteam
einfach umsetzen könnt.
Bevor wir über Leistungsoptimierung sprechen,
sehen wir uns zunächst die Statistiken an.
Leistung kann tatsächlich Auswirkungen auf den Umsatz haben.
Bei einem Experiment von Strangeloop
wurde eine Verzögerung von einer Sekunde
bei Seiten hinzugefügt, die an Smartphone-Nutzer gesendet wurden.
Bei einer Verzögerung von nur einer Minute
nahmen die Seitenaufrufe um mehr als 9 % ab,
ganz zu schweigen von einer 8 % höheren Absprungrate
sowie einer Abnahme der Conversion-Rate um 3,5 %.
Und noch schlimmer: Sogar nach Abschluss des Experiments
war die Wahrscheinlichkeit, dass Kunden die Website wieder besuchen,
bedeutend geringer.
Wie steht es nun um Nutzer
und die Ladegeschwindigkeit von mobilen Websites?
Studien zufolge liegt der Grenzwert für Ablenkung von Nutzern
bei einer Sekunde.
Die durchschnittliche Ladezeit einer mobilen Website liegt derzeit
jedoch bei sieben Sekunden.
Wir haben somit sechs Sekunden Zeit,
eine andere Website auszuprobieren,
zu vergessen, was wir gerade tun, oder in Frustration zu versinken.
Sehen wir uns genauer an,
warum mobile Websites langsamer sind als Desktop-Websites.
Vergleichen wir mögliche Verzögerungen bei mobilen und Desktop-Websites.
Beispielsweise startet ein Laptop-Nutzer
eine Suche auf google.de.
Sobald der Nutzer eine Suchanfrage eingibt,
braucht die gesamte Aktion, vom Browser zur Verbindung zu Google,
die Verarbeitung durch den Server von Google,
bis zur Anzeige der Ergebnisse im Browser,
weniger als eine halbe Sekunde.
An diese Leistung haben wir uns
weitgehend gewöhnt.
Auf Smartphones dauert diese Aktion
meist länger als eine halbe Sekunde.
Das liegt daran,
dass bei der Absendung einer Suchanfrage
sich der Client mit dem mobilen Netzwerk verbinden muss,
bevor die Verbindung zum Server aufgebaut werden kann.
Mobile Netzwerke sind so aufgebaut,
dass die Verbindung über 3G oder 4G
für eine Verbindung zu einem Server wie Google
mindestens 0,5 Sekunden dauert.
Nach Ablauf dieser halben Sekunde muss Google erst noch
die Suchanfrage verarbeiten, die Ergebnisse zurückgeben
und die Seite auf dem Smartphone aufbauen.
Wir können also festhalten:
Smartphone-Nutzer brauchen mindestens
0,5 Sekunden zur Verbindung mit ihrem Server.
0,6 Sekunden später, wenn mehr als
eine Sekunde verstrichen ist, kann der Nutzer bereits
abgelenkt worden sein.
Sehen wir nun, wie wir den Prozess beschleunigen können.
Heute zeige ich euch Google Analytics
für eine E-Commerce-Website: den Google Store
unter www.googlestore.com.
Legen wir in Google Analytics los und erstellen
ein Segment für mobile Zugriffe.
Beginnt mit "Neues Segment erstellen".
Erst letzten Monat haben meine Kollegen vom Page-Speed-Team
eine neue Funktion in Google Analytics veröffentlicht, die "Website-Geschwindigkeit".
Geht zum Abschnitt "Website- Geschwindigkeit: Seiten-Timings".
Unser Segment ist auf mobile Zugriffe eingestellt.
Wählt den Tab "Verteilung".
Dort erhaltet ihr einen zentralen Überblick
über die Leistung einer Website.
Wir können sehen, dass die Durchschnittsladezeit
meiner Website, dem Google Store, auf mobilen Endgeräten
bei mehr als sechs Sekunden liegt.
Wir stellen außerdem fest, dass 46 % der Seiten meiner Website
auf mobilen Geräten drei bis sieben Sekunden zum Laden brauchen.
Hier lässt sich einiges optimieren.
Klickt im selben Abschnitt
auf den Tab "Explorer".
Auf dieser Seite seht ihr in der Standardsortierung der Seitenaufrufe
die meist besuchten Seiten unserer Website
und die relative Geschwindigkeit der einzelnen Seiten.
Wir sehen, dass die am dritthäufigsten besuchte Seite, die YouTube-Seite,
auf der z. B. YouTube-Wasserflaschen und -Magneten verkauft werden,
unglaubliche 350 % langsamer ist
als meine durchschnittliche mobile Seite,
die schon nicht so schnell war.
Wir können mit dieser Funktion eine Liste der beliebten,
langsamen Seiten erstellen, die wir untersuchen möchten.
Gehen wir nun zu "Empfehlungen zur schnellen Anzeige einer Website",
um die Optimierungsmöglichkeiten zu sehen.
Für die YouTube-Seite erhalten
wir neun Empfehlungen.
Durch Klicken auf die Empfehlungen wird "Page Speed Insights"
in einem neuen Fenster gestartet.
So seht ihr die Bewertung euer Seite in Echtzeit.
Seht euch nun die mobile Leistung an.
Eure YouTube-Seite kommt, wenig überraschend,
auf 55 von 100 Punkten
im Vergleich zu Best Practices.
Das entspricht der Note 6. Da es in diesem Video darum geht,
schnelle Lösungen für die mobile Leistung zu finden,
konzentrieren wir uns hier
auf die einfachsten Empfehlungen.
Einige dieser Vorschläge mögen euch vertraut vorkommen, andere nicht.
Jede Empfehlung bietet jedoch zusätzliche Infos.
Mir ist es wichtig zu zeigen,
wie leicht und letztlich wie rentabel
die Umsetzung dieser Vorschläge sein kann.
Ich habe ein Diagramm mit zwei Folien erstellt,
auf denen die einfachen Tipps dargestellt sind
und auch die anspruchsvolleren Empfehlungen erklärt werden.
Ihr könnt das Video zum besseren Verständnis gern anhalten.
Der obere Teil des Diagramms beschäftigt sich mit einfachen Aufgaben,
die sich innerhalb weniger Stunden von einem Entwickler
oder jemandem mit technischem Verständnis umsetzen lassen.
Beginnt mit der Aktivierung der Kompression.
Dadurch werden Ressourcen gespart,
sodass zwischen eurem Webserver und dem Client
weniger Daten übertragen werden.
Es handelt sich um eine einfache Änderung
an der Konfigurationsdatei eures Servers.
Die Ressourcenminimierung
lässt sich mit frei verfügbaren Tools bewerkstelligen.
Die Verwendung von asynchronen Skripts besteht weitgehend
im Kopieren und Einfügen neuer
Code-Snippets, um alte Versionen zu ersetzen.
Um das Caching im Browser zu beschleunigen,
fügt entsprechende HTTP- Header zu euren Ressourcen hinzu.
Die letzte recht einfache Empfehlung
besteht in der Vermeidung von Seitenweiterleitungen.
Bei Seiten in einer Weiterleitungsskette
müsst ihr die Quell-URL so korrigieren,
dass die Zieladresse direkt angesteuert wird, ohne Mittlerseiten.
Wir sehen, wie die Korrektur unnötiger Weiterleitungen
dabei helfen kann, Verzögerungen auf Smartphones zu minimieren.
Denn bei jeder Weiterleitung muss der mobile Nutzer
mindestens weitere 0,5 Sekunden auf das Laden der Seite warten.
Kommen wir zurück auf eine weitere einfache
Empfehlung: Die Aktivierung der Kompression ist genauso einfach
wie das Kopieren von Code in eine Konfigurationsdatei.
Dort sind Quell-Masterkonfigurationsdateien
bereits vorhanden, auf die ihr euch beziehen bzw. die ihr
für die richtigen Sicherheits- und Leistungseinstellungen eures Servers
kopieren könnt. Die Empfehlungen
für Geschwindigkeit auf der zweiten Folie dieses Diagramms
haben einen höheren Schwierigkeitsgrad.
Viele dieser Vorschläge beinhalten Korrekturen,
die ihr nicht in ein paar Stunden vornehmen könnt.
Sie erfordern mehr Denkarbeit und Prozessoptimierung.
Trotzdem möchte ich kurz die Empfehlung zur
Optimierung von Bildern ansprechen.
Die Optimierung von Bildern beinhaltet eine Reihe von
Verbesserungen, die von verlustfreier Kompression
bis hin zu speziell für eure mobile Website
erstellten und zugeschnittenen Bildern reicht.
Das Optimieren von Bildern ist nicht so einfach
wie einige der anderen Vorschläge zur Geschwindigkeit
auf der vorherigen Folie.
Die Bildoptimierung kann jedoch sehr wirkungsvoll sein.
Bilder nehmen 65 % der mobilen Webdaten ein.
Die Optimierung dieser Ressourcen kann die Download-Zeit
reduzieren und somit die Seitenladezeit verbessern.
Hier ist die wichtigste Erkenntnis,
dass es bei einer mobilen Seite mit hohen Zugriffsraten
für eure Besucher und euer Unternehmen von Vorteil ist,
wenn ihr die dringlichsten Vorschläge zur Geschwindigkeit mit
niedriger Schwierigkeit für den Entwickler umsetzt.
Schauen wir uns zur Inspiration die Website
WebPageTest.org an.
Beim Web Page Test könnt ihr eine Seite wie z. B. die
Kategorieseite von YouTube eingeben und ihre Geschwindigkeit analysieren.
Wählt einen mobilen User-Agent wie etwa ein
iPhone- oder Android-Smartphone aus.
Wenn der Web Page Test die langsame Seite analysiert,
können wir sehen, wo das Problem liegt.
Ich habe die Seite mit meinem Kollegen Ilya Grigorik geprüft.
Ilya ist vor allem auf Leistung spezialisiert.
Seine Reaktion: Oh Schreck.
Das ist kein schöner Wasserfall.
Der Wasserfall verkörpert bildlich,
weshalb die Seitenladezeit mehr als 15 Sekunden betrug.
Die blauen Balken zeigen Content-Downloads an,
die für das Laden der Seite erforderlich sind.
Die Seite brauchte fast 7 Sekunden, um
die Darstellung zu rendern.
Im Grunde erwartet meine Website mit dieser Leistung,
dass ein YouTube-Shopper sieben Sekunden wartet, um
visuelles Feedback zu erhalten und mehr als 15 Sekunden
für das Laden der gesamten Seite.
Sollte euch dies noch nicht dazu angeregt haben,
einige dieser schnellen Verbesserungen umzusetzen,
bedenkt Folgendes: Laut "Was Nutzer heute von
mobilen Websites erwarten" sagten 61 % aus, sie würden
schnell zu einer anderen Website wechseln, wenn sie
auf einer mobilen Website nicht sofort das Gewünschte finden.
Daher macht es Spaß, eure Seite und die Page Speed Insights
mit der entsprechenden Seite eurer Konkurrenz zu vergleichen.
Da ich schon immer Sport betrieben habe
und die jüngste von drei Schwestern bin,
motiviert es mich besonders, Verbesserungen vorzunehmen,
wenn ich von der Konkurrenz übertroffen werde.
Beim Web Page Test könnt ihr außerdem einen Filmausschnitt
herunterladen, der das Rendern eurer mobile Seite darstellt.
Vergleicht doch mal euren Filmausschnitt über das Rendern mit dem
von Seiten anderer Websites in eurer Branche.
Ich möchte zum Schluss noch auf hilfreiche Ressourcen hinweisen.
Ihr könnt Page Speed mit Tools wie Page Speed Insights
und Beiträgen nutzen.
Es gibt auch hilfreiche Videos von Ilya
und Mitgliedern des Page Speed-Teams.
Und zuletzt möchte ich mich bei WebPageTest.org bedanken.
Vielen Dank.