25 Möglichkeiten und Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten

YSlow

YSlow (siehe Ressourcen) analysiert eine Webseite und teilt Ihnen mit, warum sie langsam geladen wird, basierend auf den von Yahoo! erstellten Hochleistungs-Webregeln (siehe Ressourcen). YSlow ist ein Firefox-Plugin, das sich in Firebug integrieren lässt. Sie müssen daher zuerst Firebug installieren, bevor Sie YSlow installieren und verwenden können.

Installieren Sie Firebug

Der Installationsprozess für beide Firefox-Erweiterungen ist sehr einfach. Führen Sie die folgenden Schritte aus, um Firebug zu installieren:

1. Öffnen Sie Firefox und gehen Sie zur Firebug-Homepage.
2. Installieren Sie die neueste Version von Firebug.
3. Wenn Firefox so konfiguriert ist, dass Popup-Fenster blockiert werden, klicken Sie auf „Zulassen“, um das Öffnen des Installationsfensters zuzulassen. Andernfalls klicken Sie auf „Jetzt installieren“.
4. Starten Sie Firefox neu.

Sie können jetzt über das Menü „Extras“ auf Firebug zugreifen. Sie können Firebug in einem neuen Fenster oder in einem vorhandenen Fenster öffnen (siehe Abbildung 1).




Installieren Sie YSlow

Installieren Sie nach der Installation von Firebug als Nächstes YSlow. Führen Sie dazu die folgenden Schritte durch:

1. Öffnen Sie Firefox und gehen Sie zur YSlow-Homepage.
2. Installieren Sie das Plugin und starten Sie Firefox neu. HINWEIS: Im Gegensatz zu vielen anderen Firefox-Erweiterungen wird YSlow nicht automatisch gestartet. Es muss zuerst aktiviert werden.
3. Um YSlow zu aktivieren, klicken Sie mit der rechten Maustaste auf das Symbol in der Statusleiste und klicken Sie auf Autorun.
Abbildung 2 zeigt die Ergebnisse der YSlow-Leistungsanalyse.

Abbildung 2. YSlow-Leistungsanalyse der Firefox-Startseite

Gesunder Menschenverstand: Beachten Sie die Designregeln

Es ist erstaunlich, wie oft einfache Designregeln ignoriert werden, was zu nicht optimierten Webseiten mit langsamem Download führt. Beachten Sie die folgenden Regeln, dann werden Ihre Seiten schneller geladen.

Verwenden Sie eine gute Struktur
Extensible HTML (XHTML) hat viele Vorteile, aber auch seine Nachteile sind erheblich. XHTML macht Ihre Seiten möglicherweise standardkonformer, aber die starke Verwendung von Tags (obligatorische <start>- und <end>-Tags) bedeutet, dass mehr Code vom Browser heruntergeladen werden muss. Es gibt also zwei Seiten der Medaille: Versuchen Sie, weniger XHTML-Code in Ihren Webseiten zu verwenden, um die Seitengröße zu reduzieren.

Wenn Sie unbedingt XHTML verwenden müssen, versuchen Sie, es so weit wie möglich zu optimieren. Beispielsweise können Sie die Download- und Analysegeschwindigkeit verbessern, indem Sie Leerzeichen entfernen und strikte XHTML-Codierungspraktiken anwenden. Um die strikten XHTML-Regeln durchzusetzen, fügen Sie Ihrem Dokument die folgende Doctype-Anweisung hinzu:

XHTML 1.0 Strict entspricht Strict HTML 4.01 und enthält Attribute und Elemente, die in der veralteten HTML 4.01-Spezifikation nicht vorhanden sind. Denken Sie daran, dass es zwei Tags gibt, die in XHTML Transitional, aber nicht in XHTML Strict verwendet werden können, zum Beispiel:

<Mitte>
<Schriftart>
<iframe>
<Strike>
<u>

Überladen Sie Ihr Layout nicht

Bevor Blogs (und neue Websites) populär wurden, galt es als schlechte Praxis, Seiten horizontal oder sogar vertikal scrollen zu lassen. Je kleiner die Seite, desto schwieriger (aber nicht unmöglich) ist es, sie ordentlich auf den Bildschirm zu bringen. Heutzutage sind bei Blogs und inhaltsbasierten Websites lange Seiten mit einer Größe von mehreren Hundert Kilobyte keine Seltenheit. Ja, Sie müssen mehr Platz füllen, aber das bedeutet nicht, dass Sie ihn mit großen Hintergrundbildern, vielen Tabellen oder viel Inhalt füllen müssen. Halten Sie sich an den Grundsatz der Einfachheit: Weniger ist mehr. Die Seite ist mit verschiedenen Arten von Bildern, Videos, Werbung usw. gefüllt, was stark gegen das Prinzip der Praktikabilität verstößt. Überlegen Sie es sich daher zweimal, bevor Sie der Seite Inhalt hinzufügen.

Verwenden Sie keine Bilder zur Darstellung von Text

Im Gegensatz zu Schriftarten, bei denen wir kaum Einfluss darauf haben, wie sie in verschiedenen Browsern angezeigt werden, werden Bilder immer genau so angezeigt, wie sie entworfen wurden. Dies ist jedoch keine Entschuldigung dafür, Bilder zur Darstellung von Text zu verwenden.

Das häufigste Beispiel für die Verwendung von Bildern zur Darstellung von Text sind Navigationsleisten. Schöne Schaltflächen sind attraktiver, werden jedoch langsam geladen. Darüber hinaus können Bilder immer noch nicht direkt von Suchmaschinen indexiert werden. Daher ist die Verwendung von Bildern zur Navigation für die Suchmaschinenoptimierung (SEO) nicht förderlich. Verwenden Sie niemals Bilder zur Darstellung von Text, wenn Sie mithilfe zahlreicher CSS-Tricks auch ohne diese schöne Schaltflächen erstellen können.

Ein spezieller Navigationstyp, der sich für CSS-Stile eignet, ist die Navigation mit Registerkarten (siehe Abbildung 3).

Abbildung 3. Navigation mit Registerkarten



Diese Art der Navigationsimplementierung ist nicht nur kleiner, sondern entspricht auch eher den Webstandards.

Der Code in Listing 1 und Listing 2 implementiert die tab-basierte Navigationsfunktionalität in reinem CSS/XHTML.

Listing 1. CSS-Dokument für tabulatorbasierte Navigation

Cookie-Nutzung prüfen
Cookies können sehr kleine Dateien sein, der Browser muss sie aber trotzdem herunterladen. Das Herunterladen größerer Cookies dauert länger, wodurch sich die Zeit erhöht, die Ihr Browser zum Laden einer Webseite benötigt. Aus diesem Grund ist es wichtig, Cookies so klein wie möglich zu halten, um die Auswirkungen auf die Reaktionszeit des Browsers zu minimieren.

Darüber hinaus kann die Reaktionszeit verbessert werden, indem ein früheres Ablaufdatum oder gar kein Ablaufdatum festgelegt wird. Um das Ablaufdatum eines Cookies in PHP festzulegen, verwenden Sie den folgenden Code:

Dieser Code legt die Cookie-Benutzer-ID fest und setzt das Ablaufdatum auf 30 Tage ab dem aktuellen Datum.

Fügen Sie keinen unnötigen JavaScript-Code ein, sondern lagern Sie ihn so weit wie möglich aus. Ähnlich wie Cookies dauert das Herunterladen von JavaScript-Dateien eine Weile, was zwangsläufig die Ladegeschwindigkeit der gesamten Seite verlangsamt. Verwenden Sie JavaScript daher mit Bedacht (nur wenn es wirklich nötig ist) und optimieren Sie Ihre Skripte hinsichtlich Größe und Geschwindigkeit.

Eine weitere Möglichkeit, die JavaScript-Downloadzeit zu verkürzen, besteht darin, externe Dateien zu verwenden, anstatt die Skripte inline einzubinden. Dieser Ansatz funktioniert auch für CSS, da Browser ausgelagerten Text zwischenspeichern, während Inline-Code (in der HTML-Seite selbst) für CSS oder JavaScript jedes Mal zusammen mit dem HTML geladen wird. Um CSS- und JavaScript-Code durch Referenzierung in HTML auszulagern, können Sie Code der folgenden Form verwenden:

Vermeiden Sie nach Möglichkeit die Verwendung von Tabellen
Tabellen dienten früher als primäre Bausteine ​​von Webseiten, heute gilt die Verwendung von Tabellen als Seitenlayout-Elemente jedoch als schlechte Praxis. Manchmal müssen Sie Tabellen verwenden (und sie gelten als hervorragende Methode zum Anzeigen tabellarischer Daten). Geben Sie in diesem Fall die Breite und Höhe Ihrer Tabellenzellen, Zeilen und Spalten explizit an. Andernfalls muss der Browser einen großen Berechnungsaufwand betreiben, um deren Anzeige zu ermitteln, was das Laden der Seite verlangsamen kann:

Entfernen Sie alle unnötigen Elemente

Dies ist wahrscheinlich der offensichtlichste Tipp von allen, aber er wird auch am leichtesten vergessen. Ich habe bereits erwähnt, dass „weniger mehr ist“. Das bedeutet nicht nur, dass die Software wirklich ein breiteres Publikum anspricht, sondern auch, dass weniger heruntergeladen und verarbeitet werden muss. Wenn Sie wirklich viel Inhalt auf eine Webseite packen müssen, sollten Sie die Seite in zwei, drei oder mehr separate Seiten aufteilen.

Einige Tipps zur Optimierung von Webseiten

Es gibt viele Möglichkeiten, Ihre Webseiten zu optimieren, darunter das Komprimieren von JavaScript-Dateien, die Verwendung der Hypertext Transfer Protocol (HTTP)-Komprimierung und das Festlegen von Bildgrößen.

Komprimieren und minimieren Sie JavaScript-Dateien

JavaScript-Dateien können sehr groß sein, daher kann ihr Download in manchen Fällen länger dauern als der aller anderen Komponenten zusammen. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, Ihre JavaScript-Dateien zu komprimieren. Sie können GNU Zip (gzip) verwenden, um diese Aufgabe zu erledigen, da viele Browser diesen Komprimierungsalgorithmus unterstützen.

Eine andere Alternative besteht darin, die Datei zu minimieren. Diese Methode entfernt alle unnötigen Zeichen aus dem Code, wie Tabulatoren, neue Zeilen und Leerzeichen. Es entfernt Kommentare und Leerzeichen in Ihrem Code und reduziert so die Dateigröße weiter. Sowohl externe als auch interne Stylesheets können minimiert werden. Die beiden beliebtesten Minimierungstools sind JSMin und YUI Compressor (siehe Ressourcen).

Verwenden Sie HTTP-Komprimierung und verwenden Sie Div- und Klassennamen immer in Kleinbuchstaben. Sie können die HTTP-Komprimierung verwenden, um den Kommunikationsaufwand zwischen dem Server und dem Browser zu reduzieren. Die HTTP-Komprimierung kann in Apache (.htaccess-Datei) konfiguriert oder in die Seite integriert werden (für PHP gibt es eine Option HTTP_ACCEPT_ENCODING). Aber bitte beachten Sie: Nicht alle Browser unterstützen die Komprimierung. Selbst bei Browsern, die Komprimierung unterstützen, erhöhen Komprimierung und Dekomprimierung die Belastung des Prozessors. Um die pauschale Komprimierung (das heißt, den gesamten Text und HTML-Code zu komprimieren) in Apache zu aktivieren, verwenden Sie den folgenden Befehl:

Überlegen Sie auch, was Sie komprimieren möchten. Bilder, Musik und Videos werden bereits bei der Erstellung komprimiert, daher können Sie die Komprimierung auf HTML-, CSS- und JavaScript-Dateien beschränken.

Ein weiterer Trick zur Reduzierung des Komprimierungsaufwands besteht darin, <div>-Elemente und Klassennamen in Kleinbuchstaben zu verwenden. Aufgrund der Groß-/Kleinschreibung und der Verwendung verlustfreier Komprimierung unterscheidet sich <header> von <Header> und sie werden in zwei verschiedene Tags komprimiert. Im folgenden Beispiel unterscheidet sich die Klasse „Wichtig“ von der Klasse „Wichtig“ für den Kompressor. Dies bedeutet, dass sie für den Kompressor unterschiedliche Objekte darstellen und daher in zwei unterschiedliche Texte komprimiert werden.

Es scheint nicht wichtig zu sein, auf Einzelheiten zu achten. Aber bei der Optimierung Ihrer Dateien sollten alle feinen Details berücksichtigt werden.

Bildgröße festlegen
Wenn Sie die Bildgröße nicht explizit festlegen, muss der Browser, wie bei Tabellenzellen, -zeilen und -spalten, Berechnungen durchführen, um das Bild anzuzeigen, was die Verarbeitung verlangsamt. Darüber hinaus wird die Bildgröße in einigen Fällen möglicherweise nicht richtig berechnet und das Bild erscheint möglicherweise verzerrt.

Verwenden von CSS-Imagemaps für dekorative Zwecke

Auch die Verwendung von Imagemaps anstelle mehrerer Bilder ist eine Möglichkeit, die Ladezeiten zu verbessern, denn durch das gleichzeitige Herunterladen einzelner Teile eines Bildes wird der Download der gesamten Seite beschleunigt. Alternativ können Sie sogenannte CSS-Sprites verwenden (siehe Verwandte Themen). CSS-Sprites können dazu beitragen, die Anzahl der HTTP-Anfragen zu reduzieren. Ein Bild kann alle grafischen Elemente enthalten, die zum Dekorieren oder Layouten einer Seite erforderlich sind. Mit CSS können Sie (durch Aufrufen bestimmter Positionen und Dimensionen) die für ein bestimmtes Element zu verwendende Zuordnung auswählen.

Verzögern Sie das Laden des Skripts so weit wie möglich

Ich habe bereits erwähnt, dass das Entfernen völlig unnötigen JavaScript-Codes die Lade- und Verarbeitungszeiten beschleunigen kann. Aber was ist, wenn Ihr Code bereits sehr minimal ist und Sie JavaScript-Code in Ihre Seite einfügen müssen?

In diesem Fall besteht eine Möglichkeit zum Erhöhen der Seiten-Downloadgeschwindigkeit darin, das Skript unten auf der Seite zu platzieren, um das Laden zu beschleunigen. Normalerweise können Browser nicht mehr als zwei Objekte parallel herunterladen (von derselben Domäne), und wenn ein Objekt ein JavaScript-Code ist, wird der Download anderer Seitenkomponenten angehalten, bis das Skript heruntergeladen ist. Wenn Sie Ihren JavaScript-Code unten auf Ihrer Seite platzieren, wird er (in den meisten Fällen) zuletzt heruntergeladen, nachdem alle anderen Komponenten heruntergeladen wurden.

Verwenden Sie die Firebug-Erweiterung, um langsam ladende Dateien zu verfolgen. Ich wette, Ihre JavaScript-Dateien sind die Dateien, die am langsamsten heruntergeladen werden. Das Minimieren Ihrer JavaScript-Dateien hilft zwar, reicht möglicherweise aber nicht aus. Sie können das Laden von JavaScript mit dem folgenden Codeausschnitt verzögern:

Überprüfen des Ladens der Funktion: Es ist auch möglich zu überprüfen, ob eine Funktion geladen ist. Wenn nicht, laden Sie die JavaScript-Datei. Nutzen Sie hierzu den Code aus Listing 4.

Listing 4. Überprüfen, ob die Funktion geladen ist

Hinweis: Sie können das Defer-Attribut verwenden, aber nicht alle Browser (einschließlich Firefox) unterstützen es.

Optimieren von CSS-Dateien
CSS-Dateien müssen nicht riesig sein, wenn sie richtig optimiert und gepflegt werden. Beispielsweise kann eine CSS-Datei mit vielen separaten Klassen die Downloadgeschwindigkeit beeinträchtigen. Wie bei Ihren JavaScript-Dateien müssen Sie Ihre CSS-Dateien optimieren, damit sie alles enthalten, was Sie benötigen, aber dennoch eine angemessene Größe aufweisen. Verwenden Sie außerdem externe Dateien anstelle von Inline-Definitionen, um Browser-Caching-Mechanismen zu berücksichtigen.

Verwenden eines Content-Distribution-Netzwerks
Ein Content Distribution Network (CDN) ist eine weitere hervorragende Möglichkeit, die Downloadzeiten zu verkürzen. Wenn Sie statische Bilder auf vielen Servern im Internet platzieren, können Benutzer die Bilder vom Server herunterladen, der ihnen am nächsten ist. Darüber hinaus laufen die meisten CDNs auf schnellen Servern, so dass der Server unabhängig von seiner Ladegeschwindigkeit schneller reagiert als ein kleiner, überlasteter Server.

Verwenden Sie mehrere Domänen für Assets, um die Konnektivität zu erhöhen
Ein weiterer Vorteil von CDNs besteht darin, dass es sich um separate Domänen handelt. Da Ihr Browser die Anzahl gleichzeitiger Verbindungen zu einer einzelnen Domäne begrenzt, können beim Laden einer Seite leicht alle Threads belegt werden. Daher kommt es zu Verzögerungen bei der Anbindung an andere Anlagen. Ihr Browser kann jedoch neue Threads oder Verbindungen zu anderen Domänen öffnen, sodass alle von einer anderen Domäne geladenen Assets gleichzeitig mit allen anderen Assets geladen werden können.

Verwenden Sie Google Gears, wenn es sinnvoll ist

Um zu verhindern, dass Benutzer immer wieder dieselben Inhalte herunterladen müssen, ist die Verwendung von Google Gears (siehe „Verwandte Themen“) eine weitere gute Möglichkeit. Gears ermöglicht Benutzern den Offline-Zugriff auf Webanwendungen, ermöglicht aber auch die Speicherung von Seitenelementen auf dem Computer des Benutzers. Daher können Inhalte, die häufig geladen, aber nicht aktualisiert werden, in der Gears-Datenbank gespeichert werden, einem relationalen SQLite3-Datenbankverwaltungssystem. Alle next Anfragen für denselben Inhalt können direkt aus der Datenbank (anstatt vom Server) geladen werden.

Holen Sie sich nach der Installation von Gears die Datei gears_init.js, damit Sie problemlos auf die Gears-Factory und die Anwendungsprogrammierschnittstelle (API) zugreifen können. Speichern Sie sie als gears_init.js und referenzieren Sie sie in Ihrem Code wie folgt:

Um festzustellen, ob Gears installiert ist, verwenden Sie den Code in Listing 5.

Listing 5. Feststellen, ob Gears installiert ist

Wenn Gears nicht installiert ist, erhalten Sie über den Code eine URL zum Herunterladen von Gears.

Nachdem alle Elemente validiert und Gears installiert wurden, können Sie die äußerst nützliche Datenbankfunktionalität von Gears mit dem JavaScript-Code in Listing 6 testen.

Listing 6. Testen der Datenbankfunktionalität

Dieser Code erstellt eine lokale Datenbank db auf Ihrem Computer oder Server. Wenn die Tabelle „Test“ nicht existiert, erstellen Sie eine und fügen Sie die Testdaten (Monkey! und Zeit) ein. Der Code ruft Daten aus der Datenbank ab und zeigt sie als Warnung im Browser an.

Stellen Sie sich die möglichen Ergebnisse vor!

Verwenden Sie Bilder im PNG-Format
Die Bildformate Graphic Interchange Format (GIF) und Joint Photographic Experts Group (JPEG) sind beide veraltet: Portable Network Graphic (PNG) ist das Format der Zukunft. Natürlich kann man sagen, dass GIF und JPEG tot sind oder dass PNG keine Mängel hat, aber alles hat seine Vor- und Nachteile und PNG bietet hervorragende Qualität bei optimaler Dateigröße. Wenn Sie die Wahl haben, sollten Sie daher nach Möglichkeit PNG-Bilder verwenden.

Halten Sie Ajax-Anrufe kurz und präzise
Als die unter dem gemeinsamen Namen „Asynchronous JavaScript + XML“ (Ajax) bekannten Technologien vor zwei Jahren aufkamen, boten sie einen revolutionären Ansatz für die Handhabung von Seitenanforderungen und -antworten. Allerdings werden DFÜ-Benutzer möglicherweise nie in den Genuss der wahren Vorteile kommen, da Ajax in vielen Fällen eine umfangreiche Kommunikation zwischen dem Browser und dem Server erfordert. Wenn Sie Ihre Ajax-Aufrufe kurz und präzise halten, können Sie daher verhindern, dass Benutzer endlos lange darauf warten, dass Elemente aktualisiert werden oder reagieren.

Tätigen Sie einen großen Ajax-Aufruf und verarbeiten Sie die Clientdaten lokal

Wenn kurze Ajax-Aufrufe keine Option sind oder diese Aufrufe nicht die erwarteten Ergebnisse liefern, sollten Sie einen alternativen Ansatz in Betracht ziehen: Tätigen Sie einen großen Ajax-Aufruf, um alles zu erhalten, was Sie benötigen, und lassen Sie die Daten dann lokal vom Client verarbeiten. Auf diese Weise muss der Client nur einmal warten (um die eingehenden Daten abzurufen), danach (wenn keine Kommunikation zwischen Browser und Server mehr erforderlich ist) erfolgt die Verarbeitung jedoch wesentlich schneller. Natürlich gibt es weitaus mehr Ajax-Optimierungstechniken, als in diesem Tutorial behandelt werden können. Wenn Sie mehr über Ajax erfahren möchten, siehe Ressourcen.

Testen Ihres Codes in einer Sandbox
Es gibt einen weiteren gängigen Trick, der oft vergessen wird. Obwohl vernünftige Webentwickler ihre Anwendungen normalerweise testen, bevor sie sie auf den Markt bringen, führt das Testen manchmal dazu, dass sie Wartungsaufgaben weniger ernst nehmen oder neue Funktionen zu schnell und ohne ausreichende Überlegung oder Tests hinzugefügt werden. Die Folge ist, dass die verbleibenden Skripte die Anwendung verlangsamen.

Wenn Sie eine neue Funktion hinzufügen, können Sie diese zunächst in einer Sandbox (vollständig isoliert vom Rest der Anwendung) testen, um zu sehen, wie sie sich als einzelne Funktion verhält. Auf diese Weise können Sie Leistung und Reaktionszeiten iterieren und analysieren, ohne sich um den Rest Ihrer Webanwendung kümmern zu müssen. Wenn sich die neue Funktion dann wie erwartet verhält, kann sie in den Rest der Anwendung eingeführt werden und es können zusätzliche Tests ausgeführt werden, um sicherzustellen, dass sich die Funktion selbst wie erwartet verhält.

Site-Code analysieren

Selbstreflexion ist in vielen Situationen eine gute Idee. Glücklicherweise können wir während des Entwicklungsprozesses Tools nutzen, die uns dabei helfen, möglichst objektiv zu reflektieren und zu üben. Der Wert eines Tools wie JSLint (siehe Ressourcen) ist unermesslich, auch wenn auf der Site steht, dass es „frustrierend sein kann“, da es Ihnen alle potenziellen Codefehler offenlegt, was nicht nur die Fehlerbehebung erschwert, sondern auch zu längeren Antwortzeiten führen kann.

Verwenden Sie JSLint, um Ihren JavaScript-Code auf Fehler oder schlechte Codierungspraktiken zu überprüfen

Sie müssen kein Perfektionist sein, um fehlerfreien JavaScript-Code zu schreiben. Viele Entwickler nehmen die Codeanalyse jedoch nicht ernst und überspringen diesen Schritt im Entwicklungsprozess häufig. Leider sind Fehler und schlechte Codierungspraktiken nicht nur unprofessionell, sondern können Ihre Anwendung auch verlangsamen. Wenn der Browser mit der Beseitigung von Fehlern und mangelhaften Codierpraktiken beschäftigt ist, dauert das Laden nicht nur länger, es kann auch zu schwer zu behebenden Fehlern kommen.

Wenn Sie guten Code erhalten möchten, sollten Sie daher die Verwendung eines Codeanalysetools in Betracht ziehen. Es stehen viele verschiedene Tools zur Verfügung, aber das für die Sprache JavaScript am besten geeignete ist JavaScript Lint, auch bekannt als JSLint (siehe Ressourcen). Sie können auch Firebug verwenden, aber JSLint ist formeller und in YSlow enthalten.

Suchen Sie nach verwaisten Dateien und fehlenden Bildern
Es ist sinnvoll, nach verwaisten Dateien und verlorenen Bildern zu suchen. Die meisten Webentwickler suchen nach fehlerhaften Dateiverweisen, aber es ist hier erwähnenswert. Fehlende Dateien können leicht zu allen möglichen Problemen führen, da sie zu Fehlermeldungen wie „Das Bild/die Seite kann nicht angezeigt werden“ führen können. Sie weisen jedoch einen größeren Fehler auf, wenn es um die Optimierung der Webseitengeschwindigkeit geht: Wenn der Browser nach fehlenden oder verwaisten Dateien sucht, verbraucht er Ressourcen, was zwangsläufig zu einer langsameren Seitenverarbeitung führt. Suchen Sie daher nach verwaisten oder fehlenden Dateien, einschließlich falsch geschriebener Dateinamen.

YSlow-Erweiterung
Die Firebug-Erweiterung YSlow macht die subjektive Webseitenanalyse zunehmend überflüssig. Anhand von definitiven, von Yahoo! erstellten Regeln für Websites mit hoher Leistung analysiert YSlow Webseiten und erklärt Ihnen, warum sie langsam sind.

Analysieren Sie Webseiten mit YSlow
YSlow ist eine relativ kleine, aber sehr nützliche Firefox-Erweiterung. Wenn Sie YSlow starten, öffnet sich die Erweiterung im unteren Teil des Browsers, wie in Abbildung 4 dargestellt.

Abbildung 4. Die YSlow-Erweiterung in Firefox





Abbildung 4 zeigt die Leistungsansicht, in der Sie sehen können, wie YSlow die Leistung Ihrer Seite bewertet, und in der auch die von der Erweiterung erkannten Probleme angezeigt werden. Wenn Sie auf einen Link in der Liste klicken, wird eine Seite geöffnet, auf der der Fehler erläutert wird. Wenn es Seitenkomponenten gibt, die verbessert werden können, schlägt YSlow Verbesserungen vor.

In der in Abbildung 5 dargestellten Ansicht „Untersuchen“ können Sie die Seite zerlegen, indem Sie die Elemente einzeln analysieren. Eine der nützlichsten Funktionen der Prüfansicht besteht darin, dass sie automatisch aktualisiert wird, wenn Sie den Mauszeiger über die Seite bewegen. Sie müssen also nicht durch den Code scrollen, um die Zeile zu finden, die Sie prüfen müssen.

Abbildung 5. YSlow Inspect-Ansicht in Firefox




Wie der Name schon vermuten lässt, werden in der Statistikansicht (siehe Abbildung 6) statistische Daten zur aktuellen Seite angezeigt. Diese Daten umfassen leere und primäre Caches und Cookies.

Abbildung 6. YSlow-Statistikansicht in Firefox




Die Komponentenansicht (siehe Abbildung 7) listet die Komponenten auf der aktuellen Seite auf. Zu den zu jeder Komponente angezeigten Daten gehören Dateityp und -pfad, Seitenablaufzeit und HTTP-Antwortheader. Klicken Sie auf eine Komponente, um sie zur Anzeige zu öffnen. Klicken Sie auf eine Spaltenüberschrift, um die Tabelle aufsteigend oder absteigend zu sortieren.

Abbildung 7. YSlow-Komponentenansicht




YSlow ist eine kleine, nützliche Erweiterung, die viel für Sie tun kann, wenn es darum geht, das Laden Ihrer Seiten zu beschleunigen. Wenn Sie es bisher noch nicht verwendet haben, sollten Sie es jetzt tun.

Abschluss
Die Ladegeschwindigkeit Ihrer Webseiten zu optimieren muss nicht kompliziert sein. Tatsächlich können Sie Geschwindigkeitsoptimierungen oft relativ einfach erreichen. Wenn Sie die Tipps in diesem Artikel sowie bewährte Methoden der Webentwicklung befolgen, können Sie das Laden Ihrer Seiten beschleunigen, ohne dass zusätzliche Schritte erforderlich sind.

Es ist einfach, viele Tipps zur Onpage-Optimierung an einem Ort zu sammeln, und ich hoffe, dass diese Ressource wertvoll war. Wenn Sie jedoch dachten, dass dies die einzigen hier aufgeführten Tipps zur Geschwindigkeitsoptimierung waren, werden Sie überrascht sein, dass es noch viel mehr gibt. Aber auch wenn Sie nur diese über 20 Tipps befolgen, werden Ihre Seiten schneller geladen und Ihre Benutzer sind zufriedener – unabhängig davon, ob sie per DFÜ oder dediziertem Breitband im Internet surfen.

Artikel von: developerworks