Anzeige
Anzeige
Software & Entwicklung
Artikel merken

Performance für Einsteiger, Teil 1: Performance-Analyse

Die Performance einer Webseite ist von vielen Faktoren abhängig. In unserer Performance-Einsteiger-Serie verraten wir dir, was es zu beachten gilt und wie du selbst die Performance deiner Webseite verbessern kannst.

Von Ilja Zaglov
5 Min. Lesezeit
Anzeige
Anzeige
(Foto: veggiefrog / flickr.com, Lizenz: CC-BY), Foto veggiefrog, Creative Commons Lizenz

Wir verraten dir im Laufe dieser Serie, welche Faktoren zu einer reduzierten Performance beitragen, wie die Technik im Hintergrund funktioniert, welche Tools dir bei der Analyse deiner Webseite helfen und was du tun kannst, um mehr Leistung aus deiner Webseite herauszuholen. Im Verlauf der Serie gehen wir auf Analysemöglichkeiten, Netzwerktechnik, Ansätze für schnellere Auslieferung von Inhalten und besserer Render-Performance sowie grundlegende Möglichkeiten der Serveroptimierung ein.

Anzeige
Anzeige

Die Performance einer Webseite ist von vielen Faktoren abhängig. Diese können grob in Server, Netzwerk- und Front-End-Performance aufgeteilt werden.

Server Performance

Unter Server-Performance versteht man die für den Benutzer unsichtbaren Prozesse wie Verarbeitung von Abfragen, Zusammenstellung von Daten und die dynamische Erzeugung von Webseiten.

Netzwerk Performance

Die Netzwerk-Komponente bezieht sich auf den Datenweg zwischen Server und Client. Unter der Front-End-Komponente verstehen wir alle Vorgänge, die mit dem Aufbau der Webseite und der Verarbeitung im Client zu tun haben.

Anzeige
Anzeige

Zahlen sind nicht alles: Usability im Front-End

Obwohl die Gründe für schlechte Performance oft auf die Server- und Netzwerk-Ebene zurückgeführt werden, liegt das meiste Optimierungspotential wohl im Front-End. Selbst die besten Browser, Server und optimale Bedingungen für die Übertragung können die Fehler, die man im Frontend machen kann, nicht ausbügeln. Ein weiterer wichtiger Faktor ist die Unterscheidung zwischen empirischer und psychologischer Performance. Es zählt nicht nur, was wir in Zahlen ausdrücken können – die User-Experience bei der Bedienung unserer Webseite ist ein wichtiger Faktor. Während empirische Daten Auskunft über eindeutig messbare Werte geben können, spiegeln sie doch nicht immer die tatsächliche User Experience wieder – hier muss der Mensch ran.

Der erste Schritt: Die Performance-Analyse

Um unsere Optimierungsbestrebungen nicht nur mit persönlichen Eindrücken zu messen, werden wir auf verschiedene Tools zurückgreifen. Eines der wichtigsten Werkzeuge sind die Entwickler-Tools der jeweiligen Browser. Im Safari kannst du die Entwickler-Tools über Einstellungen -> Erweitert -> Menü „Entwickler“ in der Menüleiste „Anzeigen“ aktivieren. Ab dann stehen dir die Werkzeuge über den Reiter „Entwickler“ auf jeder Seite zur Verfügung. Über Entwickler -> „Timeline-Aufnahme starten“, kannst du den Netzwerkverkehr deines Browsers mitschneiden. Der Aufruf einer Webseite könnte dann wie in nachfolgender Grafik aussehen.

Anzeige
Anzeige
Ressource Waterfall, Safari Developer Tools

Ressource Waterfall in den Safari Developer Tools

Es entsteht der so genannte Ressource-Waterfall. Der Ressource-Waterfall zeigt uns an, in welcher Reihenfolge Ressourcen unserer Webseite geladen werden, wie lange die Ladezeit beträgt und ab welchen Zeitpunkt der Browser mit dem Rendering der Inhalte begonnen hat. Die meisten Browser-Tools stellen außerdem weitere detailierte Informationen zum Abruf der jeweiligen Ressource zur Verfügung.

Wir können sehen, ob die Datei vom Server oder aus dem Cache kommt, wie Groß die Datei ist, ob diese komprimiert übertragen wurde und welche Header vom Server an den Client bei der Übertragung der Ressource gesendet wurden.

Anzeige
Anzeige

Der Name für den Resource-Waterfall hat übrigens einen technsichen Hintergrund. Browser stellen in der Regel mehrere HTTP-Verbindungen zu einem Server her um parallel Resourcen herunterladen zu können. Dadurch werden Ressourcen in einer bestimmten Reihenfolge geladen, was in der grafischen Darstellung zu einer Treppchenstruktur – dem „Waterfall“ – resultiert.

Besonders interessant ist für uns die gestrichelte blaue Linie, die in den Safari Developer-Tools für das Auslösen des DOM-Content-Ereignisses steht. Ab diesem Zeitpunkt beginnt der Browser mit dem Rendering der Webseite. Je früher dieses Ereignis auftritt, desto schneller empfindet der Benutzer die aufgerufene Webseite.

Für die Analyse stehen auch externe Tools zur Verfügung, die neben der Ausgabe der jeweiligen Werte auch wertvolle Optimierungsvorschläge für deine Webseite machen können.

Anzeige
Anzeige

Firebug

Ressource Watefall, Firebug

Ressource Watefall im Firebug für den Firefox

Der Firefox stellt zwar ebenfalls beachtliche Tools für Entwickler zu Verfügung. Viele schwören jedoch auf ein Addon – den Firebug. Das Plugin steht nach dem Download neben der Adressleiste zur Verfügung und bietet neben detaillierten Informationen zu Elementen der Webseite auch nützliche Informationen zu den aufgebauten Netzwerkverbindungen des Browsers beim Aufruf der jeweiligen Testseite.

WebPage Test

Web Page Test Analyse

Web Page Test Analyse Screenshot

Mit dem WebPage-Test kannst du eine detaillierte Performance-Analyse deiner Webseite anfertigen. Der Dienst ruft mit weltweit verteilten Clients und verschiedenen Browsern deine Webseite auf und gibt ausführliche Informationen, aus denen Optimierungsmöglichkeiten abgeleitet werden können. Der WebPage Test bewertet deine Seite nach Kriterien im amerikanischen Schulnotensystem und gibt Screenshots vom Resource-Waterfall beim Ersten und wiederholten Aufruf aus. So kannst du die Performance der Webseite auch unter Zuhilfenahme von Caching beurteilen.

Außerdem stellt dir das Tool statistische Daten zum Ladevorgang und zur Zusammensetzung deiner Webseite – aufgeteilt in Dateigröße und Anzahl der Aufrufe – zur Verfügung.

Anzeige
Anzeige

YSlow: Website-Test von Yahoo

YSlow Performance Analyse

YSlow Performance Analyse Screenshot

YSlow ist ein Tool von Yahoo, das Webseiten analysiert und Optimierungsansätze basierend auf den Best Practices des Yahoo Developer Networks vorschlägt. Das Tool bewertet die Webseite anhand vordefinierter oder selbst angelegter Bewertungskriterien, fasst den Inhalt der Seite zusammen und zeigt Statistiken zum Seiteninhalt an.

YSlow ist als Browser Extension für Firefox, Chrome, Safari und Opera sowie als Bookmarklet und Kommandozeilen-Tool verfügbar.

Google PageSpeed Insights

Google PageSpeed Insights Analyse

Google PageSpeed Insights Analyse Screenshot

Google PageSpeed Insights bietet dir ebenfalls einen Einblick in die Performance deiner Webseite. Das Online-Tool analysiert hierbei aus Sicht eines Desktop- und eines mobilen Gerätes die Optimierungsmöglichkeiten. „Google PageSpeed Insights“ gibt Tipps zu optimierbaren Bestandteilen deiner Webseite, hebt bereits positive Ansätze hervor und bewertet die Performance deiner Webseite auf einer Skala von 0 bis 100.

Anzeige
Anzeige

Fazit

Die oben genannten Tools können uns empirische Werte zur Performance unserer Webseite und wertvolle Informationen zur Zusammensetzung der Ressourcen geben. Diese Werte sind aber nur bedingt aussagekräftig, da sie nicht eine gegebenenfalls langsame Verbindung, hohe Response-Zeiten oder die individuell wahrgenommene Geschwindigkeit der Webseite widerspiegeln können.

Je früher das DOM-Content-Ereignis im Browser ausgelöst wird, desto performanter wirkt die Webseite. Wir sollten also zum Ziel haben, möglichst wenige Ressourcen bis zum Auslösen dieses Events laden zu müssen.

Mit Techniken wie Lazy-Load für Bilder oder weiteren Skripten kann eine Balance zwischen schneller Reaktion der Webseite und dem Bedarf, viele Inhalte darzustellen, gefunden werden. Denn im Endeffekt zählt nicht nur die Statistik, sondern der persönliche Eindruck des Users, um über gute und schlechte Performance einer Seite zu entscheiden.

Anzeige
Anzeige

Im nächsten Teil der Wochenserie gehen wir auf die Netzwerk-Performance und erste Optimierungsmöglichkeiten im Zusammenhang mit HTTP-Requests und Response Time ein.

Hier findest du alle bisherigen Teile der Performance Serie:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Atilla - Drivenbydata

Coole Inspiration, vielen Dank! Gerade letztens erst von einem Vortrag von der DevCon zu Ladezeiten berichtet.

Antworten
Pascal

Wer zur Hölle nutzt Safari zum entwickeln? Angesichts des Umfangs, der auf Browsertests entfällt, ein schwaches Bild eines ansonsten gut zusammenfassenden Artikels, da nicht auf die relevanten Browser (Firefox, Chrome und IE) eingegangen wird.

Antworten
Mario Janschitz

Hallo Pascal! Du ziehst IE dem Safari beim Entwickeln vor? Das irritiert mich eigentlich mehr … ;)

Antworten
Ilja Zaglov

Hallo Pascal, danke für dein Feedback.

Ich nutze Safari sehr gerne zum Entwickeln – besonders im Zusammenspiel mit iOS sind die Tools einfach nur super. Als Webworker kommt man ohnehin nicht drumherum mit allen Browsern zu entwickeln. Also warum nicht einfach mit dem beginnen, den man favorisiert?

Ich hätte noch die Tools der anderen Browser kurz anreißen können. Aber wäre das nicht ein bisschen träge die gleiche Info zu jedem Browser noch mal lesen zu müssen?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige