Woher weiss ich, ob meine Website schnell ist, und wie messe ich das? Warum ist es wichtig für mich, eine «schnelle» Website zu haben? Wenn Sie sich in der Vergangenheit diese oder ähnliche Fragen gestellt haben, sollten Sie weiterlesen; wenn nicht, erst recht! In diesem Beitrag gehen wir der Frage nach, warum eine schnelle Website wichtig ist, was die bestimmenden Faktoren für die Website-Geschwindigkeit sind und wie Sie sie selbst analysieren können.
Kennen Sie das, Sie klicken auf ein Suchergebnis und verbringen die nächsten paar Sekunden damit, auf einen leeren Bildschirm zu starren, bis endlich etwas passiert? Sie werden ungeduldig, brechen die Session ab – und der Betreiber der Seite hat einen potenziellen Kunden verloren. Laut Google verlassen 53 % der Besucher eine Seite, wenn sie mehr als drei Sekunden zum Laden braucht. Oder vielleicht gehören Sie sogar zu dieser Gruppe: «38 % der Smartphone-Nutzer haben ihr Telefon entweder angeschrien, verflucht oder weggeworfen, wenn Seiten zu lange zum Laden gebraucht haben.» (Tealeaf / Harris Interactive, 2011)
Gründe für eine schnelle Website
Ungeduldige Nutzer sind freilich nicht der einzige Grund, warum Ihre Webseite auf Zack sein sollte.
Ranking-Faktor bei Mobile Search
Die Ladegeschwindigkeit der mobilen Seite spielt eine entscheidende Rolle im Google-Ranking. Denn Google möchte seinen Nutzern das bestmögliche Erlebnis bieten, wenn sie auf ein Suchergebnis klicken – nicht nur bei der Übereinstimmung von Suchanfrage und Seiteninhalt, sondern auch hinsichtlich der allgemeinen Benutzerfreundlichkeit.
Relevanz für SEA
Besonders raffinierte Marketer werden sich nun vielleicht fragen, wieso die Website-Geschwindigkeit optimieren für mehr organische Resultate, wenn ich User mit Werbung auf meine Seite holen kann? Nun, die Website-Geschwindigkeit ist auch für SEA relevant. Denn Pagespeed beeinflusst die Landing Page Experience, diese wiederum den Qualitätsfaktor der Anzeigen was schlussendlich auf das das Anzeigenranking durchschlägt. Merke: Google will seinen Nutzern auch nach einem Klick auf eine Anzeige das bestmögliche Erlebnis bieten.
Meine Seite lädt schnell...oder doch nicht?
Jetzt denken Sie vielleicht: «Das klingt toll, aber warum sollte ich weiterlesen, denn meine Website lädt bereits schnell.» Vielleicht fragen Sie sich aber auch, wie Sie überhaupt herausfinden können, wie schnell Ihre Seite wirklich ist. Auf Letzteres gehen wir gleich ein, doch zunächst sollten wir erklären, warum manche Seiten vielleicht in Wirklichkeit nicht so schnell sind, wie Sie denken. Meistens besuchen wir unsere eigene Seite am Arbeitsplatz. Diese Surf-Erfahrung ist jedoch nicht repräsentativ für die gesamte Nutzergemeinde. Im Büro betrachten Sie Websites auf einem leistungsstarken Gerät und über eine sehr schnelle Internetverbindung, anders als die meisten Ihrer User.
Als Beispiel haben wir uns die Seite von British Airways auf dem Laptop und einem mobilen Gerät angeschaut. Auf einem Laptop lädt die Seite etwas träge, aber man würde sie nicht als langsam bezeichnen. Wenn Sie die Seite jedoch mit einem mobilen Gerät aufrufen, vergehen bei einer durchschnittlichen Verbindung gute sechs Sekunden, bis etwas passiert. Betrachtet man die wachsende Relevanz des Mobile Traffics – bei vielen Seiten liegt dieser bereits bei über 50 % – sollten solche Ladezeiten unbedingt optimiert werden.
Pagespeed prüfen: Eine Schritt-für-Schritt-Anleitung
Jetzt, wo Sie hoffentlich überzeugt sind, dass Ihre Website-Geschwindigkeit Aufmerksamkeit verdient, zeigen wir Ihnen, wie Sie den Pagespeed Ihrer Website messen können. Bevor wir mit dem Messen beginnen, müssen wir allerdings herausfinden, was genau wir messen und wie wir es messen. Zudem brauchen wir eine grobe Vorstellung davon, was als schnell gilt und was nicht. Sprechen wir über die Geschwindigkeit eines Autos, gibt es eine klare Masseinheit, die zum Vergleich herangezogen werden kann – km/h. Leider gestalten sich die Dinge bei Websites etwas komplizierter, denn es existiert eine ganze Reihe verschiedener messbarer Werte. In diesem Kontext unterscheiden wir zwei Gruppen an Metriken: technische Metriken und visuelle Metriken.
Technische Metriken
Time to First Byte (TTFB)
TTFB misst die Zeit, die ein Server benötigt, um mit der Übermittlung der Website-Ressourcen zu beginnen, die Sie anschauen möchten. TTFB ist weniger ein Wert, der die Geschwindigkeit Ihrer Website angibt, sondern mehr ein Indikator für die Geschwindigkeit Ihres Servers. Er kann allerdings die Wahrnehmung der Geschwindigkeit Ihrer Website deutlich beeinflussen. Sie können die «schnellste» Website der Welt betreiben, doch wenn der Server erst nach einer Verzögerung von fünf Sekunden mit dem Senden der Daten beginnt, werden Sie dennoch die meisten Ihrer Besucher verlieren.
DOMContentLoaded
Einfach gesagt handelt es sich beim DOMContentLoaded um den Zeitpunkt, an dem der Browser den Bauplan der Website (das HTML-Dokument) durchgelesen und alle enthaltenen Befehle ausgeführt hat. Das bedeutet nicht, dass die Seite vollständig geladen wurde. Einige Scripts werden vielleicht noch ausgeführt und ein paar Bilder laden noch. Und je nachdem, wie Ihre Website konstruiert ist, taucht eventuell noch gar nichts auf dem Bildschirm auf.
OnLoad Event
Das OnLoad Event wird ausgelöst, wenn alle Ressourcen fertig geladen sind. Möglicherweise laden einige Daten noch im Hintergrund, aber grundsätzlich ist das der Zeitpunkt, an dem die Website für den User vollständig geladen ist. Diese Metriken repräsentieren unterschiedliche Abschnitte im Ladezyklus einer Website. Obwohl sie in gewissen Fällen durchaus indikativ für die Geschwindigkeit einer Website sind, können sie je nach Art der Seite zu völlig unterschiedlichen Zeitpunkten vorkommen, was einen direkten Vergleich erschwert.
Visuelle Metriken
Visuelle Metriken sind für die Messung des Pagespeed deutlich interessanter, weil sie uns eine Vorstellung vom sichtbaren Ablauf auf einer Seite, mit anderen Worten: dem Nutzererlebnis geben.
First Contentful Paint
Das Ereignis First Contentful Paint wird ausgelöst, sobald irgendeine Form von Text oder Bild auf dem Bildschirm auftaucht. Diese Messgrösse kann vom Browser präzise gemessen werden.
Bild 2: First Contentful Paint (Quelle: Screenshot Webrepublic)
First Meaningful Paint
First Meaningful Paint ist vermutlich die wichtigste visuelle Messgrösse für bezüglich Pagespeed. Es beschreibt den Punkt, an dem das Layout geladen und dargestellt, die zentralen Inhalte für den Nutzer sichtbar sind.. Einzelne Inhalte wie Bilder und Teile des User-Interface sind möglicherweise aber noch nicht vollständig geladen. Das korrekte Messen dieses Zeitpunktes ist nicht ganz trivial, denn es basiert auf einer Evaluation des angezeigten Bildschirminhalts und dessen möglicher Bedeutung für den Nutzer.
Bild 3: First Meaningful Paint (Quelle: Screenshot Webrepublic)
Visually Complete
Visually Complete ist der Zeitpunkt, an dem der gesamte Inhalt Ansichtsbereich, dem sichtbaren Feld des Bildschirms, fertig geladen ist und vollständig angezeigt wird.
Bild 4: Visually Complete (Quelle: Screenshot Webrepublic)
Trotz den vielen, komplizierten Begriffen ist es relativ einfach, einen schnellen, vorläufigen Test für Ihre eigene Website durchzuführen. Damit Sie loslegen können, empfehle ich Ihnen die Verwendung vom Google-Tool Pagespeed Insights. Sobald Sie diesen ersten Check absolviert haben, können Sie die Entwicklertools Ihres Browsers dazu verwenden, die First-Meaningful-Paint-Zeit zu analysieren.
Pagespeed Insights
Die Pagespeed Insights von Google kennen die meisten sicherlich bereits. Es soll Seitenbetreibern zeigen, wie gut eine Seite den Best Practices in Bezug auf die Ladezeit entspricht. Aber erst seit dem jüngsten Update ist das Tool wirklich hilfreich bei der Analyse der Website-Geschwindigkeit. Page Insights arbeitet neu mit Daten aus dem Chrome-User-Experience-Bericht wodurch der Optimierungsfaktor besser auf reale Daten abgestimmt sein soll und somit bessere Optimierungsempfehlung abgeleitet werden können.
Auf der linken Seite sehen Sie den neuen Speed Score. Es werden reale Nutzerdaten verwendet, um zu zeigen, wie lange die Seite zum Laden benötigt.
Bild 5: Die neuen Page Insights von Google (Quelle: Screenshot Webrepublic)
Auf der rechten Seite steht der auch vor dem Update angezeigte Optimization Score, der Ihre Seite mit einer Liste von Best Practices abgleicht. In manchen Fällen war dieser Wert irreführend und nicht repräsentativ für die alltagsnahe Performance einer Seite, wurde aber fälschlicherweise oft genau in diesem Sinne genutzt.
Vorteil beim neuen Pagespeed Insights ist zudem, dass Google durch den Vergleich von verschiedenen Ereignissen sagen kann, was schnell ist. Diese Werte können wir als Benchmark für eine schnelle Seite nutzen.
Bild 6: Ereignisse im Datensatz werden neu im Vergleich zu allen Ereignissen im Chrome-User-Experience-Bericht kategorisiert. (Quelle: Screenshot Webrepublic)
Sie haben gerade den Test für Ihre Website durchgeführt und erhalten das Ergebnis «schnell». Heisst das, alles ist wunderbar? Leider lautet die ehrliche Antwort: «Kommt drauf an.» Und zwar aus folgendem Grund: Die zwei Metriken, die Pagespeed Insights zur Berechnung des Geschwindigkeitswerts nutzt, sind DOMContentLoaded und First Contentful Paint. Und auch wenn die beiden gute Indikatoren für die Website-Geschwindigkeit sind, sind sie nicht perfekt. Deshalb ist es wichtig, zusätzlich eine visuelle Analyse durchzuführen. Und hier kommen die Entwicklerwerkzeuge von Chrome ins Spiel.
Dev Tools
Um eine wirklich präzise Vorstellung davon zu bekommen, wie schnell sich eine Website für den Nutzer anfühlt, müssen wir uns die First-Contentful-Paint-Metrik anschauen. Und um diese korrekt auslesen zu können, müssen wir eine visuelle Analyse durchführen. Die gute Nachricht ist, dass Sie dafür lediglich Chrome brauchen bzw. die Entwicklerwerkzeuge, die in Chrome integriert sind. Die Dev Tools können Sie öffnen, indem Sie die zu analysierende Seite aufrufen und Alt + Cmd + i auf dem Mac oder einfach F12 bei Windows drücken. Alternativ können Sie auch rechtsklicken und «Inspect» wählen. Hinweis: Die Entwicklertools laufen stets im Kontext zur Website, auf der Sie sie gestartet wurden.
Sie sollten nun in etwa das untenstehende Bild sehen. Um unsere Analyse durchzuführen, müssen wir erst ein paar Einstellungen vornehmen.
Bild 7: Einstellungen Chrome Dev Tools: Ansichtsbereich. (Quelle: Screenshot Webrepublic)
Als Erstes schalten wir die Geräte-Symbolleiste um, indem wir auf das kleine Telefonsymbol oben links klicken. Das ändert den Ansichtsbereich Ihrer Website, sodass Sie sie für mobile Geräte testen können. Jetzt wählen Sie die gewünschte Geräte-Voreinstellung aus, z.B. iPhone 7.
Bild 8: Einstellungen Chrome Dev Tools: Geräte-Voreinstellungen (Quelle: Screenshot Webrepublic)
Anschliessend sollten Sie die Screenshot-Aufnahmefunktion aktivieren, den Cache deaktivieren und eine angepasste Verbindungsgeschwindigkeit wählen, indem Sie auf «Online» und dann auf «Hinzufügen» klicken.
Bild 9: Einstellungen Chrome Dev Tools: Screenshot-Aufnahmefunktion, Cache, Verbindungsgeschwindigkeit (Quelle: Screenshot Webrepublic)
Als Annäherung an die durchschnittlichen tatsächlichen Geschwindigkeiten in einem 4G-Netzwerk stellen wir eine Download-Geschwindigkeit von 9 Mbps und einen Upload von 4,5 Mbps mit einer Latenz von 75 ms ein.
Bild 10: Einstellungen Chrome Dev Tools: Verbindungsgeschwindigkeit einstellen (Quelle: Screenshot Webrepublic)
Jetzt müssen Sie nur noch die Seite neu laden, darauf warten, dass die Screenshots eintreffen und die Zeitmessung des Screenshots prüfen, der nützlichen Inhalt zeigt – also alles, was mehr ist als blosse UI-Elemente oder Platzhalter.
Bild 11:Chrome Dev Tools: Zeitmessung (Quelle: Screenshot Webrepublic)
Zusammenfassung
Wenn es weniger als zwei Sekunden bis zum First Meaningful Paint dauert UND die Seite von Pagespeed Insights als «schnell» bewertet wird, dürfen Sie davon ausgehen, dass Ihre Seite in der Tat schnell ist. Solange es nicht länger als vier Sekunden bis zum FMP dauert und der Pagespeed Insights-Wert «schnell» oder «mittel» ist, ist noch alles in Ordnung. Wenn unabhängig von dem, was Pagespeed Insights sagt, zwischen vier und fünf Sekunden bis zum FMP vergehen, besteht vermutlich Raum für Verbesserung, und Sie sollten in Betracht ziehen, Schritte zum Beschleunigen Ihrer Seite zu unternehmen. Wenn es sogar länger als fünf Sekunden dauert, bis relevanter Content erscheint, besteht definitiv Verbesserungsspielraum, und Sie könnten viel davon profitieren, Ihren Pagespeed zu erhöhen.