Ladezeitanalyse


Checken Sie Ihre Ladezeit

Website-Performance als Erfolgsfaktor

Die Zufriedenheit der Nutzer mit einer Internetseite wird entscheidend von deren Ladegeschwindigkeit beeinflusst, also der Zeit zwischen dem Aufruf und der kompletten Darstellung einer Seite im Browser. Den meisten kann es dabei gar nicht schnell genug gehen; häufig ist die Geduld der Internetnutzer schon nach wenigen Sekunden aufgebraucht.

Was bedeutet Ladezeit eigentlich?

Ist eine Seite dann noch nicht vollständig geladen, wandern sie zur Konkurrenz ab. Früher oder später wirkt sich dies negativ auf wichtige Erfolgskriterien wie die Anzahl der Seitenaufrufe und die Konversionsrate aus. Eine hohe Absprungrate hat zudem einen negativen Einfluss auf das Ranking. Wenn viele Nutzer eine Seite schnell wieder verlassen, bedeutet das für Google, dass sie nicht den Vorstellungen entspricht, die der Nutzer mit seiner Suchanfrage verbunden hat.

Die Ladezeit einer Website wirkt sich auch direkt auf ihr  Ranking aus. In dem Bestreben, seinen Nutzern nicht nur hochwertige Inhalte, sondern auch die benutzerfreundlichsten Seiten anzubieten, nutzt Google die Ladegeschwindigkeit seit 2010 als Ranking-Faktor. Während langsame Seiten Gefahr laufen, Plätze zu verlieren, können schnellere Seiten mit einem besseren Ranking rechnen. Und eine Seite gilt für Google erst dann als schnell, wenn ihre Ladezeit unter 1,5 Sekunden beträgt.

Das erwartet Sie in der Analyse

  • Analyse Ihrer Webseite auf Ladezeit
  • 55 Prüfpunkte zur Optimierung werden ausgewertet
  • Eine Auswertung, mit welchen Ressourcen Ihre Webseite zu welchen Teilen genutzt werden
  • Optimierungspotenziale aufgeschlüsselt nach Prioritäten
  • Eine vollständige Auswertung der 55 Prüfpunkt zzgl. einer Handlungsempfehlung zur Optimierung.

Eine vollständige Beispielanalyse

Bitte klicken Sie das Bild an um zur Analyse als PDF Dokument zu gelangen

Prüfpunkte der Analyse

Bewertung der Ladezeit

Es gibt zwei wesentliche Kennzahlen zur Bewertung der Ladezeit einer Website: den Pagespeed Score von Google und den YSlow Grade von Yahoo. Beide bewerten Websites anhand verschiedener Kriterien auf einer Skala von 0 bis 100.

Time to first byte

„Time to First Byte“ (TTFB) beschreibt die Zeit, die zwischen der Eingabe einer URL und dem Laden des ersten Bytes der Seite im Browser vergeht. Es ist die Zeit, die der Browser auf den Webserver wartet.

Durchschnittliche Seitenladezeit

Der Ladevorgang einer Internetseite unterteilt sich grob in das Abrufen der zur Darstellung einer Seite erforderlichen Daten von einem oder mehreren Server(n) und ihrer konkreten Darstellung im Webbrowser. Daraus ergibt sich die Seitenladezeit, die in erster Linie von den Dateien (CSS, JavaScript, Grafiken usw.) abhängt, die vom Browser geladen werden müssen. Je weniger Zugriffe beim Laden einer Seite durchgeführt werden müssen, desto kürzer die Ladezeit.

Seitengröße

Im Jahr 2014 betrug die durchschnittliche Website-Größe 1.953 Kilobyte, was einen Anstieg um 15 Prozent im Vergleich zum Vorjahr bedeutet. Der Trend zu immer größeren Websites ist damit ungebrochen, obwohl die Ladezeiten unter der Größe leiden. Denn grundsätzlich gilt: Je größer die Seite, desto länger die Ladezeit. Prinzipiell muss von den Texten über Bilder bis hin zu Videos jedes Objekt einer Internetseite einzeln geladen werden – und jede Datei, die der Browser zur Anzeige laden muss, kostet Zeit. Hierbei spielt die Datenmenge ebenso eine Rolle wie die Anzahl der Dateien. Eine 100 kB große Datei lädt schneller als zehn 10 kB große Dateien, weshalb es von Vorteil ist, die einzelnen Dateien so weit wie möglich zusammenzufassen.

Serveranfragen

Ähnlich wie bei der Seitengröße gilt bei den Serveranfragen: Je mehr Serveranfragen benötigt werden, um eine Seite vollständig zu laden, desto länger fällt die Ladezeit aus.

Prozentuale Verteilung der Inhaltstypen

HTML Datei Aufteilung nach Assets-Typen
HTMLCSSBilderJavascriptAndere
5,05 KB24,62 KB213,31 KB357  bytes

Optimierungspotenziale

Die Ladezeit-Optimierung steht auf drei Säulen: der Server-Infrastruktur (z. B. Art und Standort des Servers), der Backend-Struktur (Hardware, Software, Datenbankmanagement, Caching, CPU, Festplatte, Webserver usw.) sowie dem Frontend. Im Rahmen der Ladezeitanalyse werden insgesamt 50 Punkte untersucht, die sich in erster Linie auf das Frontend beziehen und die Nutzererfahrung direkt beeinflussen.

Die einzelnen Punkte werden in drei Stufen (rot, orange, grün) gewichtet. Rot weist auf Bereiche hin, in denen beispiel.de großen Nachholbedarf hat. Orange bedeutet, dass beispiel.de nicht weit von der durchschnittlichen Performance anderer Seiten entfernt ist. Trotzdem sollten diese Punkte ebenso wie die rot markierten auf jeden Fall bearbeitet werden. Bei den grün markierten Prüfpunkten bewegt sich beispiel.de bereits in einem guten Bereich. Das vorhandene Optimierungspotenzial sollte jedoch auch hier möglichst genutzt werden. Zudem gibt es Bereiche (grau), in denen beispiel.de bereits 100 von 100 Punkten erreicht, in denen daher keine Änderungen notwendig sind.

Verteilung nach Einfluss

Priorisitere Aufagen in der PerformanceoptimierungHohes Optimierungspotenzial

Browser-Caching nutzen

Im Browser-Cache des Nutzers werden bereits abgerufene Dateien einer Website lokal gespeichert. Bei einem erneuten Aufruf der Seite muss dann nicht mehr zeitaufwendig auf den Server zurückgegriffen werden, um die Dateien zu laden. Bei wiederkehrenden Besuchern lässt sich die Ladezeit so reduzieren. Der Cache funktioniert jedoch nur dann korrekt, wenn der Browser weiß, wie lange er welche Daten zwischenspeichern kann, ohne zu prüfen, ob auf dem Server eine neuere Version verfügbar ist. Zu diesem Zweck wird den Dateien ein individuelles Ablaufdatum zugewiesen.

Nutzung eines Content Delivery Netwotk (CDN)

Die Nähe des Nutzers zu einem Webserver hat einen Einfluss auf die Antwort- und damit die Ladezeiten. Um weltweit eine gleichbleibend schnelle Seite anbieten zu können, bietet sich die Nutzung eines Content Delivery Networks an. Dabei handelt es sich um eine über mehrere Orte verteilte Ansammlung von Webservern, von denen immer der für die jeweilige Anfrage günstigste ausgewählt wird.

ETags konfigurieren

ETags dienen dazu herauszufinden, ob eine bereits heruntergeladene und im Browser-Cache abgelegte Ressource immer noch dem Original auf dem Server entspricht oder ob sie erneut heruntergeladen werden muss. Das Problem der ETags ist, dass sie normalerweise auf spezifische Server ausgerichtet sind, weshalb sie die Original-Komponente nicht mehr erkennen können, wenn die entsprechende Ressource von einem anderen Server angefragt wird.

Expires-Header hinzufügen

Ein sogenannter „Expires-Header“ teilt dem Browser das Ablaufdatum einer bestimmten Ressource mit, um ihm mitzuteilen, ob er diese vom Server oder direkt aus dem Browser-Cache beziehen soll.

Javascript und CSS auslagern

Externe Javascript- und CSS-Dateien, die im Browser zwischengespeichert werden, reduzieren die Größe eines HTML-Dokumentes. Wenn eine Website angefragt wird, müssen die Javascript- und CSS-Dateien so nicht jedes Mal zeitaufwendig neu heruntergeladen werden.Mittleres Optimierungspotenzial

CSS reduzieren

CSS-Dateien blockieren während des Seitenladevorgangs den weiteren Aufbau der Website. Um diese Zeit zu minimieren, sollten die CSS-Dateien von allen unnötigen Zeichen wie zum Beispiel Kommentaren, Leerzeichen, Zeilenumbrüchen und Einzügen befreit werden.

Nutzung Cookie-freier Domains

Wenn auf einer Domain Cookies verwendet werden, sendet der Browser bei jeder Anfrage für ein statisches Objekt (z. B. ein Bild) jedes Mal ein Cookie, für das der Server jedoch keinerlei Verwendung hat.

Geringes Optimierungspotenzial

HTML reduzieren

Die Reduzierung der HTML-Datei kann viele Bytes und damit Ladezeit sparen. Wie bei den Javascript- und CSS-Dateien bietet sich es sich an, die HTML-Datei von allen unnötigen Zeichen wie zum Beispiel Kommentaren, Leerzeichen, Zeilenumbrüchen und Einzügen zu befreien.

Bilder optimieren

Häufig werden Bilder in eine Website integriert, ohne diese vorher für die Anzeige im Browser zu optimieren. Generell sollte man die Bilder auf die Größe optimieren, in der sie tatsächlich angezeigt werden sollen und für jedes einzelne Bild überprüfen, ob das JPG- oder das PNG-Format sinnvoller ist.

Skalierte Bilder bereitstellen

Bilder werden häufig in Größen bzw. Auflösungen vorgehalten, die das eigentlich benötigte Maß übersteigen. Die zu große Bilddatei muss zunächst geladen und dann herunterskaliert werden. Durch die Bereitstellung passender Bildgrößen kann die Datenübertragung teils deutlich reduziert werden.

Definition der Bildausmaße

Beim Laden einer Seite wird vor den Bildern zunächst der Text geladen. Bei einer nicht vordefinierten Größe eines Bildes muss der Text neu positioniert und die Seite je nach Anzahl der Bilder immer wieder neu geladen werden. Durch die vorherige Definition der exakten Ausmaße der Bilder wird der Platz für das später geladene Bild bereits beim Laden des Textes reserviert.

Reduzierung der HTTP-Anfragen

Webseiten, die viele CSS- und Javascript-Dateien in ihren HTML-Code eingebunden haben, produzieren automatisch mehr HTTP-Anfragen. Beim Laden einer Website kostet jede dieser Anfrage Zeit.

Ausgeschöpfte Optimierungspotenziale

Anfragen durch 404/410-Fehler vermeiden

Im Laufe der Zeit kommt es vor, dass Ressourcen einer Website verschoben oder gelöscht werden. Wenn für solche Seiten keine entsprechenden Weiterleitungsregeln festgelegt werden, sendet der Server die Fehlermeldungen 404 („nicht verfügbar“) oder 410 („entfernt“). Der Nutzer greift also auf Inhalte zurück, die nicht (mehr) existieren. Neben der Nutzererfahrung verschlechtern diese überflüssigen Anfragen auch die Ladegeschwindigkeit.

CSS @import vermeiden

Die @import-Regel erlaubt es Stylesheets, andere Stylesheets zu importieren. Wenn CSS-@import von einem externen Stylesheet aus genutzt wird, ist der Browser nicht in der Lage, mehrere Stylesheets parallel herunterzuladen, was wiederum Verzögerungen beim Laden einer Seite nach sich zieht. Anstelle von @import sollte für jedes Stylesheet ein <link>-Tag verwendet werden, um dem Browser einen zeitsparenden parallelen Download von Stylesheets zu ermöglichen.

Landingpage-Redirects vermeiden

Weiterleitungen (Redirects) von der angegebenen URL zur eigentlichen Zielseite (Landingpage) verursachen eine Verzögerung beim Laden einer Seite.

Javascript nach HTML ausführen

Javascript-Ressourcen sollten erst nach dem Laden des HTML-Dokumentes abgerufen werden, um das Laden der für die Nutzererfahrung wesentlichen „above the fold“-Inhalte (ohne Scrollen sichtbar) zu beschleunigen.

gzip-Komprimierung ermöglichen

Wenn ein Nutzer eine Website aufruft, werden Dateien mit den entsprechenden Inhalten hochgeladen, die dem Nutzer dann im Browser angezeigt werden. Durch die Nutzung der gzip-Komprimierung werden diese Dateien komprimiert hochgeladen, was eine deutliche Ersparnis bei der Datenübermittlung bedeutet.

HTTP-Keep-Alive ermöglichen

Die Aktivierung von HTTP-Keep-Alive ermöglicht es, mit derselben TCP-Verbindung mehrere HTTP-Anfragen zu senden und zu empfangen und dadurch die Latenz für folgende Anfragen zu verringern.

Kleine CSS-Dateien „inlinen“

Wenn der „Inline CSS“-Filter aktiviert ist, werden die Inhalte kleiner externer Javascript-Ressourcen direkt in das HTML-Dokument geschrieben. Da der Browser die entsprechenden Ressourcen nicht mehr unabhängig voneinander anfragt, kann die Zeit, die benötigt wird, um den Nutzern die entsprechenden Inhalte anzuzeigen, so reduziert werden.

Kleine Javascript-Dateien „inlinen“

Wenn der „Inline Javascript“-Filter aktiviert ist, werden die Inhalte kleiner externer Javascript-Ressourcen direkt in das HTML-Dokument geschrieben. Da der Browser die entsprechenden Ressourcen nicht mehr unabhängig voneinander anfragt, kann die Zeit, die benötigt wird, um den Nutzern die entsprechenden Inhalte anzuzeigen, reduziert werden.

Javascript reduzieren

Viele HTML-, CSS- und Javascript-Ressourcen besitzen nicht nur die für die Maschinenlesbarkeit notwendigen Zeichenfolgen, sondern noch weitere Zeichen, die für die Funktionalität der Programmiersprache nicht benötigt werden. Dies können beispielsweise Kommentare der Programmierer sein, aber auch unnötige Leerzeichen, Tabstopps und Absätze bieten Einsparpotenzial. Verkürzte HTML-, CSS- und Javascript-Codes können schneller heruntergeladen, geparst und ausgeführt werden.

Redirects minimieren

Weiterleitungen (Redirects) von einer URL zur anderen lösen eine zusätzliche HTTP-Anfrage aus. Um die Wartezeit für die Nutzer zu verringern, sollten alle Weiterleitungen, die aus technischer Sicht nicht absolut notwendig sind, daher vermieden werden.

Anfragegröße minimieren

Die meisten Netzwerke limitieren die Größe einzelner HTTP-Anfrage-Pakete auf 1.500 Byte. Wenn man es schafft, mit einem Paket pro Anfrage auszukommen, lässt sich die Ladezeit verringern. Teile des HTTP-Anfrage-Headers sind beispielsweise Cookies, deren empfohlene Maximalgröße für eine Domain bei 400 Byte liegt. Auch der Umfang der URL er jeweiligen Ressource ist zu berücksichtigen – eine URL mit einer Vielzahl von Parametern kann eine Größe von mehreren tausend Byte erreichen.

Paralleler Download externer Javascript- und CSS-Dateien

Browser führen Stylesheets und Skripte in der Reihenfolge aus, in der sie in dem jeweiligen Dokument erscheinen. Um sicherzustellen, dass der Download parallel und damit zeitsparend vonstatten geht, sollten externe CSS-Dateien immer vor externen Javascript-Dateien angeordnet werden.

CSS im Head-Bereich platzieren

Browser rendern eine Website erst, wenn alle externen Stylesheets heruntergeladen wurden. Inline-Style-Blocks und Link-Elemente aus dem Body eines HTML-Dokuments in dessen Head zu verschieben, verbessert das Rendering einer Seite.

Query Strings aus statischen Ressourcen entfernen

Als „Query String” wird der Teil einer URL bezeichnet, der die Parameter enthält, die sich an das „?“ einer Parameter-URL anschließen. Manche Proxyserver sind nicht in der Lage, diese dynamischen URLs zu cachen.

Ressourcen von einer einheitlichen URL anbieten

Nicht selten greifen die verschiedene Unterseiten einer Domain auf die gleichen CSS- oder Javascript-Ressourcen zurück. Diese Ressourcen sollten immer der gleichen URL zugeordnet werden, damit der Browser nicht zeitaufwendig mehrere Kopien derselben, unter mehreren URLs abrufbaren Ressource herunterladen muss.

Cache-Validator festlegen

Ressourcen, die ohne Cache-Validator auskommen müssen, können im Cache nicht effizient aktualisiert werden, da für sie kein Ablaufdatum oder Höchstalter festgelegt wurde, das den Browser anweist, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.

Vary: Accept-Encoding-Header festlegen

Der „Vary: Accept-Encoding”-Header weist den Proxy an, sowohl eine komprimierte als auch eine unkomprimierte Version einer Ressource zu speichern. So wird verhindert, dass Nutzer die komprimierte Version erhalten, die nicht über die technische Voraussetzung verfügen, diese zu verarbeiten.

Zeichensatz frühzeitig festlegen

Die Definition eines Zeichensatzes im HTTP-Antwort-Header von HTML-Dokumenten erlaubt es dem Browser, sofort mit dem Parsen von HTML und dem Ausführen von Skripten zu beginnen. Ohne eine Zeichenkodierung wie ASCII oder Unicode muss der Browser diese selbst ermitteln, was wiederrum Zeit kostet und die Ladezeit negativ beeinflusst. Idealerweise sollte die Festlegung des Zeichensatzes für alle Dokumente vom Typ Text/HTML bereits auf Serverlevel erfolgen.

Bilder in CSS-Sprites kombinieren

Um unnötige Ladezeiten zu vermeiden, lassen sich mehrere Bilder, Grafiken oder Icons mit Hilfe von CSS-Sprites zu einer einzigen Datei zusammenfassen.

Asynchrone Ressourcen bevorzugen

Das zeitversetzte Abrufen von Javascript-Ressourcen, die nicht für den initialen Seitenaufbau benötigt werden, verhindert, dass diese den Seiten-Ladevorgang unnötig blockieren. Auch einige Skripte, die für den Nutzer sichtbare Inhalte anzeigen, können asynchron geladen werden; vor allem, wenn es sich dabei um Inhalte „below the fold“, also nicht im direkten Sichtbereich, handelt.

Komprimierung einzelner Komponenten mit gzip

Die Komprimierung einzelner Komponenten mit gzip ist ein einfacher Weg, die Seitengröße zu verringern und die Ladegeschwindigkeit zu erhöhen.

CSS an den Anfang setzen

Stylesheets im Head-Bereich eines Web-Dokuments zu platzieren, ermöglicht dem Browser ein progressives Rendern. Andernfalls kann das Rendern durch bestimmte Browser blockiert werden, was dazu führt, dass sich der Ladevorgang verzögert und die Nutzer vorübergehend nur eine leere Seite zu sehen bekommen.

DNS-Lookups reduzieren

Das Domain Name System (DNS) wird verwendet, um die IP-Adresse zu einer Domain zu ermitteln. Für alle Seiten-Komponenten, die von anderen Servern oder Webseiten geladen werden, ist ein sogenannter „DNS-Lookup“ notwendig. Anfragen an eine große Zahl unterschiedlicher Hosts beeinflussen die Ladezeit negativ.

Doppelte Javascript- und CSS-Dateien entfernen

Durch doppelt vorhandene externe Javascript- oder CSS-Dateien werden in einigen Browsern zwei HTTP-Anfragen während des Seiten-Ladevorgangs ausgelöst. Dies geschieht unabhängig davon, ob die Dateien cachebar sind oder nicht.

Leere src- und href-Attribute vermeiden

Die meisten Browser reagieren auch auf leere src- oder href-Attribute und starten eine entsprechende Server-Anfrage.

CSS-Expressions vermeiden

CSS-Expressions werden im Internet Explorer (Version 5-8) genutzt, um dynamisch CSS-Eigenschaften festlegen zu können. Beispielsweise lässt sich so festlegen, dass sich die Hintergrundfarbe einer Seite jede Stunde ändert. Der Nachteil ist, dass die CSS-Expressions ständig neu evaluiert werden, was die Ladegeschwindigkeit negativ beeinflusst. Allein das Bewegen einer Maus kann mehrere Tausend Evaluierungen auslösen.

Favicons klein und cachebar machen

Bei einem Favicon handelt es sich um ein kleines Icon, Symbol oder Logo, das dazu dient, eine Website unverwechselbar zu kennzeichnen. Es wird beispielsweise in der Browser-Adresszeile links von der URL, den Registerkarten im Browser sowie in der Lesezeichen-Liste angezeigt. Das Favicon befindet sich in der Regel als favicon.ico-Datei auf dem Server.

Bilder nicht in HTML skalieren

Die Abmessungen eines Bildes werden gelegentlich mit Hilfe der Attribute width= und height= im <img>-Tag des HTML-Quellcodes festgelegt. Bei dieser Vorgehensweise können die Bilder größer sein als eigentlich benötigt. Ein Bild, das in der Abmessung 100x100 angezeigt wird, sollte tatsächlich in dieser Abmessung vorliegen, und nicht zunächst beispielsweise von 500x500 herunterskaliert werden.

Javascript ans Ende setzen

Javascript-Skripte blockieren parallele Downloads; das heißt, wenn ein Skript heruntergeladen wird, startet der Browser keine anderen Downloads.

Cookie-Größe reduzieren

Im HTTP-Header einer Website werden unter anderem Informationen über Cookies zwischen Webserver und Browser ausgetauscht.

Anzahl der DOM-Elemente reduzieren

Bei der Entwicklung einer Website kann es vorkommen, dass die DOM-Elemente (<table>, <div>, <p> usw.) extrem verschachtelt werden, um den Inhalt in der gewünschten Form anzuzeigen. Je komplexer die DOM-Struktur ist und je mehr DOM-Elemente verwendet werden, desto mehr Daten müssen geladen werden. Dies hat unter anderem zur Folge, dass Javascript länger braucht, um auf die einzelnen Elemente zugreifen zu können.

Javascript und CSS reduzieren

Die Größe von Javascript- und CSS-Dateien wird durch Zeichen wie zum Beispiel Kommentare, Leerzeichen, Zeilenumbrüche und Einzüge gelegentlich unnötig in die Höhe getrieben, worunter unter anderem die Ladezeit leidet.

404-Fehler (nicht gefunden) vermeiden

Im Laufe der Zeit kommt es vor, dass Ressourcen einer Website verschoben oder gelöscht werden. Wenn für solche Seiten keine entsprechenden Weiterleitungsregeln festgelegt werden, sendet der Server die Fehlermeldung 404 („nicht verfügbar“). Der Nutzer greift also auf Inhalte zurück, die nicht (mehr) existieren. Neben der Nutzererfahrung verschlechtern diese überflüssigen Anfragen auch die Ladegeschwindigkeit.

„AlphaImageLoader“-Filter meiden

Ältere Versionen des Internet Explorer sind nur mit Hilfe des AlphaImageLoader in der Lage, Transparenzen in Bildern mit dem Dateiformat PNG anzuzeigen. Der Einsatz dieses Filters lässt darauf schließen, dass veraltete Technologien verwendet werden.

URL-Weiterleitungen vermeiden

URL-Weiterleitungen mit den Status-Codes 301 oder 302 signalisieren dem Browser, dass das angefragte HTML-Dokument inzwischen unter einer anderen Adresse zu finden ist.

Ajax cachebar machen

„Ajax“ ist die Abkürzung für „Asynchronous Javascript and XML“. Dabei handelt es sich um ein Konzept zur asynchronen Datenübertragung zwischen Browser und Server.