Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Webseiten restaurieren und optimieren: Jede Woche neu

So messen Sie die Ladezeit einer Webseite

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Webseiten sind heute einfach zu erstellen und auch schnell live gestellt - doch bereits zum Start sollten Sie als Betreiber für die Zukunft gewappnet sein: Wie können Sie Ihre Inhalte über einen längeren Zeitraum "frisch" halten? Wie lassen sich Zugriffszeiten optimieren? Wie reagiere ich auf aktuelle Designtrends und bessere Bandbreiten? Wie schütze ich mich vor Datenverlust und Hacker-Angriffen? Antworten und Hilfe zu diesen und vielen ähnlichen Fragen finden sie zuhauf in dieser praktischen Tipp-Serie.
05:39
  Lesezeichen setzen

Transkript

Bei kleinen Webseiten wird es nicht so sehr ins Gewicht fallen, die Ladezeit der einzelnen Elemente dieser Webseite, aber bei großen Webauftritten sieht es schon anders aus. Und nicht jeder Mensch, der eine langsame Internetverbindung hat, ist gleichzeitig auch ein besonders geduldiger Mensch. Es ist also sicher interessant, sich prinzipiell die Ladezeiten der einzelnen Elemente einer Webseite anzuschauen, um zu schauen, ob man da an ein, zwei Rädern drehen kann. Wie man das macht, sehen wir uns dieses Mal an. Trotzdem möchte ich jetzt auf dieser kleinen Seite, meiner Testseite bergwelten.eu, ausprobieren, wie diese Tools zum Messen der Ladezeiten funktionieren. Hier werde ich jetzt in meinem Developer Firefox zuallererst Entwicklertools dazuladen. Mit Strg+Umschalt+I habe ich die Möglichkeit dazu. Und in der Abteilung Netzwerkanalyse habe ich die Möglichkeit, zu sagen, dass ich zum Beispiel die Seite neu laden möchte. Und im Moment bekomme ich mein HTML und mein CSS ausgegeben. Was mich aber noch zusätzlich interessiert, sind zum Beispiel die Grafiken, die mit eingebunden sind. Und nun bekomme ich eine genaue Auflistung, welches Element tatsächlich wie viel Zeit braucht, um geladen zu werden. Und hier vorne bekomme ich außerdem eine Statusmeldung mit angezeigt. Sie können, wenn Sie sich nicht klar sind, was jetzt diese einzelne Statusmeldung bedeutet, durchaus auch draufklicken und bekommen hier eine Erklärung und die Möglichkeit, sich weitere Informationen einzuholen. Dieser 304er-Status macht mir jetzt nicht wirklich Sorgen, der liegt völlig im Rahmen. Das, was interessant ist, ist zum Beispiel hier dieser 200er-Status. Das gilt als völlig okay von der Zeit her. Das ist das Einbinden meiner Schrift. Und Sie haben jetzt hier eben wie gesagt die Auflistung auch jedes einzelnen Bildes. Und da sehen Sie schon, dass dieses kleine Wegbild ein wenig aus dem Rahmen fällt, was die Ladezeit anbelangt. Das heißt, da kann ich mich dann beim Umsetzen noch etwas genauer mit der Bildgröße und mit der Art, wie es geladen wird, beschäftigen. Die Entwicklertools sind aber nicht die einzige Möglichkeit, Ladezeiten zu messen, weil was hier zum Beispiel nicht zum Tragen kommt, ist die Tatsache, dass ich hier die Ladezeit aus meiner persönlichen Perspektive messe, also mit meiner persönlichen Anbindung, die ich hier vor Ort habe. Es gibt andere Tools, die jetzt die Örtlichkeiten mit berücksichtigen können. Hier habe ich zum Beispiel Uptrends. uptrends.com ist eine Seite, die sich ebenfalls mit dem Testen von Ladezeiten beschäftigt. Und im Unterschied zum Entwicklertools kann ich hier jetzt auch noch Örtlichkeiten einstellen -- und habe das hier jetzt schon gemacht -- und komme zu ähnlichen Ergebnissen. Auch hier bekomme ich jetzt meine einzelnen Requests angezeigt. Insgesamt eben werden sieben solcher Requests an den Webserver gestellt und ich kann mir hier jetzt anzeigen und farbig ausgeben lassen, was wie lange braucht. Für einen tatsächlichen Handshake mit dem Server brauche ich für meine CSS-Datei zwei Handshakes, eines für die CSS-Datei an und für sich und die zweite für das Einbinden der Schrift, was ja hier auch ganz gut deutlich wird. Und auch hier sehe ich jetzt noch mal, dass man auf mein Wegbild relativ lange warten muss. Das Spannende mit den Requests ist, dass sie ja nacheinander stattfinden, das heißt, ich kann abhängig von dem verwendeten Browser nur eine bestimmte Anzahl an Requests gleichzeitig ablaufen lassen. Und das ist auch einer der Gründe, warum mein letztes Bild hier etwas später erst zum Einsatz kommt. Was bei der Anzeige hier auch noch sehr spannend ist, Sie können die Verfügbarkeit testen. Und bei der Verfügbarkeit bekommen Sie jetzt -- wenn ich wieder Bergwelten nehme -- tatsächlich auch angezeigt, wie die Verfügbarkeit in anderen Teilen der Welt aussieht für meine Seite. Das braucht jetzt wieder einen Moment, aber da haben wir es schon. Gut, es ist eine sehr kleine Seite, aber insgesamt kann ich sehr zufrieden sein mit dem Ergebnis. Sie bekommen jetzt aus aller Welt sozusagen Testdestinationen angezeigt und können nun die unterschiedlichen Ladezeiten und auch die Aufteilung der Ladezeiten sehen. Das ist sehr spannend und sehr informativ. Wenn Sie Probleme mit Ihrer Seite haben, ist ein anderer Test, der auch noch sehr spannend ist, zum Beispiel dieser DNS-Test, mit dem Sie überprüfen können, ob die Namensauflösung für Ihre Seite gut funktioniert. Und bei der Routenverfolgung können Sie sich anzeigen lassen, welche Wege sozusagen Ihre Seite nimmt. Ladezeiten sind wie gesagt sehr interessant. Wenn Sie eben die Seite testen und sich das aufschlüsseln lassen, können Sie ganz gut feststellen, wo Sie eventuell noch nachrüsten sollten.