Webseiten-Infos.de

Ladezeit von Webseiten-Infos.de

Für das Überprüfen der Ladezeit meiner Seiten verwende ich neben dem Addon YSlow für den Browser Firefox und das Addon Firebug insbesondere den Webdienst WebSiteOptimization.com.

In meinem Addon Web Developer für den Firefox kann ich den Webdienst WebSiteOptimization.com direkt – über das Menü Extras > Geschwindigkeitsreport anzeigen – für die geöffnete Seite im Browserfenster aufrufen.

Damit der Webdienst seine Arbeit verrichtet, sind noch Buchstaben und Zahlen als Spamschutz einzugeben. Danach fängt WebSiteOptimization an die Webseite zu analysieren und gibt das Ergebnis im Browserfenster aus.

Die Ergebnisse für die Startseite von Webseiten-Infos.de sind alle im grünen Bereich. Darauf bin ich stolz.

Grund: Ich nahm einige Optimierungen für die Ladegeschwindigkeit vor. Insbesondere

• habe ich die Größe der Grafikdateien (hauptsächlich mit smash.it) minimiert,
• setze ich CSS-Sprites ein,
• habe ich die JavaScripte zu einem Skript sowie die CSS-Dateien zu einer CSS-Datei sowie einer weiteren für den Internet Explorer bis einschließlich Version 7 zusammengefasst und
• komprimiere ich die Dateien mit GZIP.

Hier mal das gekürzte Ergebnis des Geschwindigkeitsberichts von Websiteoptimization.com für Webseiten-Infos.de (Stand: 9. September 2009).

Es handelt sich hierbei um meine freie Übersetzung aus dem Englischen.

Diagnose

* Hinweise (zur Tabelle 5: Downloadzeiten):

• Diese Zeiten zum Herunterladen (Downloadzeiten) für ISDN und T1 basieren auf einer vollen Bandbreite.
• Die Modemverbindungen (56Kbps oder weniger) sind um einen Paketverlustfaktor von 0,7 korrigiert.
• Alle Zeiten zum Herunterladen (Downloadzeiten) beinhalten eine Verzögerung von durchschnittlich 0,2 Sekunden je Objekt aufgrund von Wartezeiten für den Datenverkehr.
• Mit insgesamt 9 Objekten für diese Webseite summiert sich das zu einer Verzögerungszeit von 1,8 Sekunden auf.
• Nehme zur Kenntnis, dass diese Berechnung der Zeit zum Herunterladen (Downloadzeit) nicht die Verzögerung aufgrund von XHTML-Parsing und -Rendering berücksichtigt.

# Gratulation. Diese Website benutzt HTTP-Kompression, auch als GZIP bekannt. Die hier aufgeführten Dateigrößen in Bytes sind für die komprimierten Dateien, die vom Server an den Browser gesandt wurden.

* Alternative CSS-Dateien können in der (X)HTML-Datei verlinkt sein, werden aber derzeit nicht geladen. Sie sind deshalb nicht in die Gesamtgröße der Webseite einbezogen.

Analyse und Empfehlungen

• Gesamtzahl HTML – Gratulation, die Anzahl der HTML-Dateien auf dieser Webseite (einschließlich der zentralen HTML-Datei) ist 1. Die meisten Browser können Multithreading. Das Minimieren der HTTP-Anfragen ist der Schlüssel für die Websiteoptimierung.
• Gesamtzahl Objekte – Gratulation, die Gesamtzahl der Objekte auf dieser Webseite (einschließlich HTML) ist 9. Das können die meisten Browser in einer akzeptablen Zeit mit Multithreading verarbeiten. Das Minimieren der HTTP-Anfragen ist der Schlüssel zum Minimierung des Objekt-Overheads (siehe Schaubild (Figure) II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets für mehr Details wie der Objekt-Overhead die Wartezeit auf die Webseite beherrscht.
• Gesamtzahl Bilder – Gratulation, die Gesamtzahl der Bilder auf dieser Webseite ist 5. Die meisten Browser können mehrere Anfragen senden. Das kann die Anzeige von mehreren Bildern beschleunigen.
• Gesamtzahl CSS – Gratulation, die Gesamtzahl an externen CSS-Dateien auf dieser Webseite ist 2. Weil externe CSS-Dateien im Kopfbereich (HEAD) Deines (X)HTML-Dokuments stehen müssen, werden sie geladen bevor irgendein BODY-Inhalt angezeigt wird. Wenngleich sie gecached werden, verlangsamen CSS-Dateien das anfängliche Anzeigen Deiner Webseite. Erinnere Dich daran CSS-Dateien im HEAD und JavaScript-Dateien am Ende des BODY zu platzieren, damit eine schnelle Anzeige erfolgt.
• Gesamtgröße – Gratulation, die Gesamtgröße dieser Webseite beträgt 30.638 Bytes. Diese Webseite sollte in 7,91 Sekunden mit einem 56Kbps Modem laden. Basierend auf dieser derzeitigen durchschnittlichen Größe und diesem Aufbau der Webseiten (average web page) sollte Deine Webseite in weniger als 20 Sekunden mit einem 56Kbps Modem laden und den Fortschritt beim Laden anzeigen. Idealerweise sollte Deine Seite in 3 bis 4 Sekunden mit einer Breitbandverbindung laden und das HTML in 8 bis 12 Sekunden mit einem Modem. Natürlich gibt es immer die Möglichkeit von weiteren Verbesserungen.
• Gesamtzahl Skripte – Gratulation, die Gesamtzahl der externe Skriptdateien auf dieser Seit ist 1. Externe Skripte werden weniger zuverlässig zwischengespeichert (gecached) als CSS-Dateien. Berücksichtige das beim Zusammenfassen von JavaScript-Dateien zu einer Datei um die Anzahl der HTTP-Anfragen zu minimieren (minimize HTTP requests) oder bette sie in Hochgeschwindigkeitsseiten ein. Das Platzieren externe JavaScript-Dateien am Fußende des BODY und CSS-Dateien in den Kopfbereich (HEAD) ermöglicht das schrittweise Anzeigen von XHTML-Webseiten.
• HTML Größe – Gratulation, die Gesamtgröße dieser (X)HTML-Datei beträgt 7.523 Bytes. Das ist weniger als 50 kB. In der Annahme, dass Du für Deine Bilder HEIGHT und WIDTH angegeben hast, erlaubt diese Größe das Anzeigen des Inhalts in weniger als 10 Sekunden. Das ist die durchschnittliche Zeit, die Besucher bereit sind auf die Anzeige einer Seite ohne Rückmeldung zu warten.
• Bildergröße – Gratulation, die Gesamtgröße der Bilder ist 11.233 Bytes. Das ist weniger als 50 kB. Selbst mit einer 50 kB großen Seite würde diese Webseite mit einer Verbindung mittels eines 56Kbps Modem in weniger als 20 Sekunden geladen. Idealerweise sollte jedes Bild weniger als 1.160 Bytes benötigen, so dass es einfach in ein TCP-IP Paket passt.
• Skriptgröße – Gratulation, die Gesamtgröße aller externer Skripte beträgt 4.295 Bytes. Das ist weniger als 8 kB.
• CSS Größe – Gratulation, die Gesamtgröße Deines externen CSS ist 7.587 Bytes. Das ist weniger als 8 kB.
• Multimedia Größe – Gratulation, die Gesamtgröße aller externer Multimedia-Datein ist 0 Bytes. Das ist weniger als 10 kB.

Zum Schluss noch vorsorglich folgende ergänzende Hinweise:

• Für die CSS- und JavaScript-Datei habe ich eine Versionierung eingeführt. Inzwischen sind neuere Versionen dieser beiden Dateien im Einsatz. Insbesondere die JavaScript-Datei ist durch das Hinzufügen eines weiteren JavaScripts sowie die Erweiterung eines bestehenden JavaScripts größer geworden. Gleichwohl sind weiterhin alle Ergebnisse im grünen Bereich.
• Ich habe die JavaScript-Datei nicht am Ende des BODY platziert, da diese dann nicht mehr funktioniert. Vielmehr habe ich nur darauf geachtet, dass zuerst die CSS-Datei(en) geladen werden.
• Zum Thema “Die Ladezeit verringern” habe ich einen längeren Artikel in Arbeit, auf den ich hier hinweisen werde, sobald er fertig und online ist.