Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Beschleunigen der Websites mit YSlow

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wir alle wissen, dass es unzählige Gründe gibt, warum die Ladezeiten von Webseiten in die Höhe schnellen. Die Ermittlung des Problems kann jedoch sowohl zeit- als auch kostenintensiv sein. Warum also die Mühe verschwenden, wenn jemand anderes - oder etwas anderes - die ganze Drecksarbeit für Sie erledigen kann?

Lernen Sie Yahoo YSlow kennen, einen kostenlosen Webseitenanalysator für Firefox.


Loslegen

YSlow hat zwei Anforderungen:

YSlow huckepack auf Firebug, daher müssen Sie die Add-Ons in der oben angegebenen Reihenfolge installieren, bevor Sie fortfahren können.


Das Problem

Webdesigner, Entwickler und Texter streben danach, im Vergleich zu ihren Mitbewerbern die einzigartigsten und interessantesten Inhalte zu haben.

Möglicherweise haben Sie Tage damit verbracht, Ihren neuen Blog-Beitrag zu perfektionieren, und sind beim ersten Betrachten vor Aufregung fast von Ihrem Stuhl gefallen. Aber nachdem eine Flut von Besuchern Ihre Website überflutet hat, stellen Sie fest, dass die Dinge nicht mehr reibungslos laufen. Unter Druck reagiert Ihre neue Website möglicherweise wie ein Commadore 64.


Die Lösung: Yahoo YSlow für Firefox

Yahoo's YSlow for FirefoxYahoo's YSlow for FirefoxYahoo's YSlow for Firefox

Website-Analyse-Werkzeugs lassen sich im Allgemeinen in zwei Kategorien einteilen:

  1. Suchmaschinenoptimierung
  2. Analyse der Leistung des Document Object Model (DOM).

YSlow passt in letzteres. Es verwendet vordefinierte Regelsätze, um die Leistung einer Webseite zu bewerten, und Werkzeugs von Drittanbietern (wie Smush.it und JS Minifiers), um Probleme zu lösen.

Es gibt drei Ansichten:

  1. Grade
  2. Components
  3. Statistics.

YSlow enthält sechs hilfreiche Werkzeugs: Diese reichen vom Testen von JavaScript-Code bis zur Bildoptimierung über Smush.It (eine weitere kostenlose Webanwendung von Yahoo). Die gesamte Anwendung befindet sich im Popup-Fenster von Firebug, das über ein praktisches Symbol in der Taskleiste des Browsers geöffnet und geschlossen werden kann.

Lassen Sie uns gleich einen genaueren Blick auf die 'Grade'-Ansicht werfen.


1. Gradeansicht

Yahoo! YSlow's Grade ViewYahoo! YSlow's Grade ViewYahoo! YSlow's Grade View

Anhand der Homepage von Envato als Beispiel, bei der es sich um eine Website mit relativ geringem Datenverkehr handelt, sehen wir, dass die Gesamtleistungsbewertung mit 74 von 100 Punkten und einer gelben Note "C" bewertet wird. Aber was bedeutet das wirklich? Immerhin lässt sich die Webseite im Browser perfekt rendern. Nun, wir müssen uns die Regeln links in der Ansicht genauer ansehen, um dies herauszufinden.

Die Regeln sind in Kategorien unterteilt: Inhalt, Cookies, CSS, Bilder, JavaScript und Server. Während YSlow Elemente des DOM inspizierte, bewertete es jedes Element anhand eines vordefinierten Regelsatzes (in diesem Fall YSlow V2). Je näher ein Element an den Regeln festhält, desto höher ist die Punktzahl. Nachdem alle Punkte gesammelt wurden, wurde die Abschlussnote vergeben.

Im Fall von Envato erzielten alle Regeln der Benutzeroberfläche eine hohe Punktzahl, die Serverregeln waren jedoch weniger effizient. Dies senkte die Abschlussnote.

Zum Glück erklärt jede Regel, wo das Problem liegt, und bietet eine detaillierte Erklärung zur Behebung des Problems. Diese Funktion bietet eine große Erleichterung für alle, die noch keine Erfahrung mit der Optimierung von Websites haben.


Regelsätze

Für einige sind bestimmte Regeln wichtiger als andere. YSlow bietet Ihnen einen Standardregelsatz, ermöglicht Ihnen jedoch auch, zu 'klassisch', 'kleine Website oder Blog' zu wechseln oder einen eigenen zu erstellen. Wenn Sie Content Delivery Networks nicht verwenden möchten, bearbeiten Sie einfach einen Regelsatz und entfernen Sie diese Funktion. Einfacher geht es nicht.


Componentsansicht

Yahoo YSlow's Components ViewYahoo YSlow's Components ViewYahoo YSlow's Components View

In der Komponentenansicht werden die Elemente aus einer Analyse in einer sauberen, erweiterbaren Datentabelle aufgelistet.

Während dieser Abschnitt eine eingehendere Analyse enthält, können Daten wie das Ablaufdatum der Datei oder die Antwortzeit hilfreich sein, um problematische Bereiche zu verstehen. Wenn Sie die GZIP-Komprimierung aktiviert haben, können Sie hier den Unterschied in der Dateigröße anzeigen.


Statisticsansicht

YSlow statistics view showing graph dataYSlow statistics view showing graph dataYSlow statistics view showing graph data

Jeder liebt eine Grafik. YSlow auch.

Die Statistikseite ist eine schnelle und einfache Methode, um das Gesamtgewicht Ihrer HTTP-Anforderungen zu ermitteln. Einfach ausgedrückt gibt es zwei Diagramme: leeren Cache und vorbereiteten Cache. Diese Grafiken unterteilen Ihre Website in HTML, JavaScript, Bilder usw. Die Dateigrößen werden dann jeweils als Tortensegmente angezeigt Der leere Cache repräsentiert den ersten Besuch eines Browsers auf der Webseite. Prime Cache gibt an, welche Komponenten sich beim erneuten Besuch im Cache des Browsers befinden würden oder nicht. Sauber, klar und effektiv.


Werkzeuge

Endlich haben wir Werkzeuge. Sie werden sofort einen Mangel an Spezifität für die analysierte Webseite bemerken, aber lassen Sie sich nicht täuschen. Jedes Werkzeug spart viel Zeit beim Verkleinern, Minimieren und Komprimieren Ihrer Inhalte. Wenn Sie mit dem Konzept der Optimierung vertraut sind, sind Sie möglicherweise schon einmal auf ähnliche Werkzeugs gestoßen.

Wenn Sie die Ladezeiten von Seiten reduzieren, ist es wichtig, Leerzeichen und Kommentare aus Ihren Dokumenten zu entfernen und Ihre Bilder zu optimieren.

Zum Glück erledigen diese Werkzeuge die ganze harte Arbeit für Sie, denn wenn Sie dies von Hand tun, werden Sie zweifellos tief in die Nacht geführt. Keine Menge Energy Drinks hält Sie davon ab, verrückt zu werden, nachdem Sie zum hundertsten Mal versehentlich eine JavaScript-Funktion gelöscht haben.

Insgesamt gibt es acht Werkzeuge. Alle abzudecken würde ein paar Artikel erfordern. Also werde ich mich auf Yahoo! Smush.it als Beispiel.

YSlow will automatically upload images for compressionYSlow will automatically upload images for compressionYSlow will automatically upload images for compression

Yahoo! Smush.it ist eine kleine Webanwendung, die mit YSlow oder direkt von Ihrem Browser aus verwendet werden kann.

Smush.it ist ganz einfach ein verlustfreier Bildoptimierer. YSlow lädt die Bilder für Sie hoch, die "verwischt" und in einer Tabelle dargestellt werden, in der Sie den Prozentsatz der Einsparungen bei Bild, Größe und Komprimierung anzeigen können.

Sie können die Dateien sogar in derselben Verzeichnisstruktur behalten und sie alle als praktische Zip-Datei herunterladen.

Es gibt viele kostenlose Anwendungen mit ähnlichen Werkzeugs, aber die mit YSlow gepackten sind eine willkommene Ergänzung.


Arbeiten an Envatos YSlow Grade

Wie bereits erwähnt, beträgt der YSlow-Leistungswert von Envato 74 mit der Note C. Nehmen wir uns etwas Zeit, um die Ergebnisse von YSlow zu analysieren und zu ermitteln, wie der endgültige Wert verbessert werden kann.

Hier sind ihre Verbesserungsvorschläge, beginnend von oben:

Stellen Sie weniger HTTP-Anfragen: Note E.

Diese Regel führt weiter aus, dass es sechs externe JavaScript-Skripte und 17 externe Hintergrundbilder gibt. Sie schlagen vor, die Dateien zu kombinieren und CSS-Sprites zu verwenden, um das Problem zu beheben.

Schauen Sie sich zunächst die Komponentenansicht und insbesondere die JS-Dateien an.

Wie die URLs zeigen, wird nur eine JavaScript-Datei auf demselben Server wie die analysierte Seite gehostet. Diese enthält benutzerdefiniertes JavaScript für WordPress. Für JQuery und Google Analytics sind zwei erforderlich, und die letzten drei stammen von formspring.com.

Wenn die JavaScript-Dateien meine eignen wären, könnte ich in Betracht ziehen, die benutzerdefinierten JS-Dateien application.js und formspring in einer zu kombinieren und lokal zu hosten. Es scheint jedoch nur die Datei application.js angepasst zu sein. Also möchte ich wirklich nicht mit der Arbeit eines anderen herumspielen. Zumal einigen dieser Dateien Lizenz-/Copyright-Informationen fehlen.

Die Verwendung von Googles Hosting für jQuery wird ebenfalls als bewährte Methode angesehen. Sie sollten jedoch auf die neueste Version von jQuery aktualisiert werden: 1.4.2.

In diesem Fall ist es wahrscheinlich am besten, diese Regel zu ignorieren, da jede Änderung der aktuellen Methoden später zu Problemen führen kann. Meine einzige wirkliche Sorge ist die Antwortzeit für zwei der FormStack-Dateien. Zu diesem Zeitpunkt sprechen sie jeweils über 360 ms, um zu antworten. Wenn dies so weitergeht, kann es sich lohnen, eine Methode zu finden, um sie lokal zu hosten.

Bilder

Als nächstes überprüfen wir die Bilder; Alle werden lokal gehostet, reagieren innerhalb von 40 ms und sind recht klein. Dies zeigt uns, dass diese Dateien einzeln bereits für diese Seite optimiert sind. YSlow schlägt vor, diese Bilder zu kombinieren und CSS-Sprites zu verwenden, um unsere Note zu verbessern.

Wenn Sie mit CSS-Sprites nicht vertraut sind, können Sie auf den Link "Weitere Informationen" klicken, um zu den Best Practices von Yahoo! zu gelangen, mit denen Sie Ihre Website beschleunigen können.

In diesem Fall sollte durch die Verwendung eines optimierten Bilds eine Verbesserung der Bildantwortzeit festgestellt werden. CSS-Sprites kombinieren Ihre Hintergrundbilder zu einem und richten CSS dann aus, um das Bild mit dem Hintergrundbild und der Hintergrundposition auszurichten. Das verwendete CSS ist nichts Besonderes, daher sollte es mit allen gängigen Browsern kompatibel sein.

Verwenden Sie ein Content Delivery Network (CDN): Klasse F.

Viele Websites haben für diese Regel die Note F, da die Einrichtung ein wenig Arbeit erfordert. Die Vorteile sind jedoch die Zeitkosten mehr als wert. Darüber hinaus bieten Dienste wie Amazon überraschend günstiges Hosting. Während Envato CDNs für Websites mit hohem Datenaufkommen wie Nettuts + unbedingt verwendet, haben sie möglicherweise entschieden, dass dies für Websites mit geringerem Datenverkehr nicht erforderlich ist.

Add Expires Headers: Grade F.

Wieder sind wir mit einer Regel konfrontiert, die sich mit HTTP-Anfragen befasst. Abgelaufene Header sind häufig, da sie das Zwischenspeichern von Komponenten ermöglichen. Zwischengespeicherte Komponenten (Bilder, JavaScript usw.) sparen Zeit und Bandbreite für wiederholte Besuche auf einer Webseite. Es lohnt sich also, Ablaufdaten für Ihre Inhalte zu implementieren.

YSlow fand nach der Analyse von Envato.com 55 Komponenten "ohne ein weit entferntes Ablaufdatum". Die meisten Komponenten sind Hintergrundbilder. Aus dem ersten Vorschlag "Weniger HTTP-Anforderungen stellen" wissen wir, dass wir CSS-Sprites verwenden können, um die Anzahl der Hintergrundbilder zu reduzieren und diese Note automatisch zu verbessern.

Das Einrichten von "Expires" -Headern ist im Allgemeinen ein einfacher Vorgang und erfordert normalerweise nur ein schnelles Hinzufügen zu Ihrer .htaccess-Datei. Nach der Anwendung sollten alle Ihre Komponenten über geeignete Ablaufheader verfügen, ohne dass weitere Dateimanipulationen oder -änderungen vorgenommen werden müssen. Um einen vollständigen Einblick in die Arbeit mit Ihrer .htaccess-Datei und Ihren Headern zu erhalten, ist ein Artikel für sich erforderlich. Anstatt hier ins Detail zu gehen, habe ich eine Reihe hilfreicher Links zur weiteren Lektüre eingefügt:

Setzen Sie CSS an die Spitze: Note B.

YSlow hat ein Stylesheet außerhalb des Head-Elements für Envato gefunden. Zum Glück ist dies die am einfachsten zu korrigierende Regel. Indem Sie Stylesheets oben auf Ihrer Webseite belassen, erhöhen Sie automatisch die Geschwindigkeit, mit der Ihre Webseite geladen wird. Nach dem Umzug sollte YSlow eine Note A für diese Regel melden.

Minimieren Sie JavaScript und CSS: Note D.

Durch das Entfernen nicht verwendeter Leerzeichen in Ihren Dokumenten wird die Größe des Dokuments verringert und somit die Geschwindigkeit erhöht, mit der die Datei heruntergeladen wird. Wie ich bereits erwähnt habe, stellt uns YSlow ein Minimierungswerkzeug zur Verfügung, damit die ganze harte Arbeit für uns erledigt werden kann.

Gehen Sie zur Werkzeugansicht und wählen Sie YUI CSS Compressor. Im Handumdrehen werden Ihre CSS-Dateien minimiert und stehen zum Download zur Verfügung. Schnell, sauber und einfach.

Entity Tags (ETags) konfigurieren: Note C.

ETags bieten eine Möglichkeit, eine bestimmte Version einer Webseitenkomponente (Bilder, JavaScript usw.) zu validieren. Sie arbeiten mit dem Webserver zusammen, um den zwischengespeicherten Inhalt eines Browsers mit dem Inhalt auf dem Webserver abzugleichen. Leider hat YSlow zwei fehlende ETags für Dateien gefunden, die auf formspring.com gehostet werden. Aus diesem Grund ist es möglicherweise am besten, dem Vorschlag von YSlow zu folgen und ETags vollständig zu entfernen. Dies kann durch Hinzufügen von "FileETag none" zu Ihrer Apache-Konfigurationsdatei erfolgen. Sie sollten jetzt eine Verbesserung in dieser Regelklasse sehen.


Alternativen

Es gibt viele Alternativen, wenn es um die Analyse von Websites geht, und ich wäre nicht überrascht, wenn Sie Ihre Favoriten hätten. Zusammen mit YSlow verwende ich vier weitere kostenlose Analysegeräte. Wie zu erwarten, bietet jedes einzelne einzigartige Funktionen, und allein aus diesem Grund ist es meines Erachtens wichtig, sich daran zu erinnern, dass kein Werkzeug einen absolut kugelsicheren Bericht liefern kann.

Um Ihnen eine Vorstellung davon zu geben, wie unterschiedlich diese jeweils zu einem Endergebnis führen, habe ich eine kurze Beschreibung und die Punktzahl auf der Envato-Website beigefügt.

Webseitentest

Diese von AOL bereitgestellte Anwendung fügt Ihrer Analyse eine Vielzahl von Einstellungen hinzu. Sie können die Browserversion und die Verbindungsgeschwindigkeit simulieren und visuelle Vergleiche mit anderen URLs durchführen. Es ist eine großartige Funktion, wenn Sie A/B-Tests starten möchten.

Punktzahl: N/A. Bietet eine Optimierungscheckliste und Ladezeiten.

PageSpeed

PageSpeed ist ein weiteres Add-On für Firefox und Firebug. Dies wird sogar im selben Menü wie YSlow angezeigt und bietet eine ähnliche Analyse. Wie bei YSlow werden Regeln verwendet und Berichte darüber erstellt, wie gut die einzelnen Komponenten funktionieren. Es wird sogar Ihre Inhalte optimieren und minimieren.

Ergebnis: 76/100

WooRank

Diese kostenlose Webanwendung befindet sich noch in der Beta-Phase und überprüft Ihren Inhalt, Ihr Alexa-Ranking, Ihren Datenverkehr, Ihre Suchmaschinenoptimierung, Ihre Geometadaten und vieles mehr. Auch hier werden mit jeder Analyse hilfreiche Hinweise hinzugefügt. Sie können Ihrer Website sogar ein Widget hinzufügen, das Ihre 'Woorank-Punktzahl' anzeigt.

Punktzahl: 65.8/100

Website Grader

Grader ist eine weitere kostenlose Webanwendung, die auch für das iPhone verfügbar ist. Dieses Werkzeug ist WooRank sehr ähnlich und verfügt über eine übersichtliche und detaillierte Oberfläche. Es gibt sogar ein spezielles Werkzeug zum Analysieren von Blogs: eine der fünf in diesem Artikel aufgeführten Funktionen.

Punktzahl: 99/100


Vorteile von YSlow

  • Enthält die Option zum automatischen Analysieren von Webseiten.
  • Kostet nichts und ist frei von Werbung.
  • Regelsätze sind anpassbar. Wenn Sie sich beispielsweise nicht mit Netzwerken für die Bereitstellung von Inhalten befassen, können Sie diese Option einfach deaktivieren.
  • Lädt automatisch alle Bilder von Webseiten hoch, wenn Sie mit Yahoo! Smush.it. Dies allein spart enorm viel Zeit.
  • Alle Regeln sind mit einer umfangreichen Dokumentation versehen und bieten Erläuterungen zur Verbesserung.

Nachteile von YSlow

  • YSlow funktioniert nur mit remote gehosteten Webseiten. Der Versuch, ein HTML-Dokument auf Ihrem Desktop zu analysieren, führt häufig zu falschem Feedback.
  • Fehler in JavaScript oder HTML können dazu führen, dass YSlow hängen bleibt. Dies ist selten, aber ein einfaches Schließen und erneutes Öffnen funktioniert einwandfrei.
  • YSlow ist nicht in der Lage, eigene Testregeln hinzuzufügen. Ich möchte einige personalisierte Regelsätze hinzufügen, z. B. Alexa Ranking oder Google Page Rank.
  • Nur für Firefox verfügbar und erfordert Firebug, um zu funktionieren. Wenn Sie Firefox oder Firebug nicht mögen, kann dies ein Problem sein.

Zusammenfassung

Anwendungen wie YSlow bieten eine schnelle und effektive Analyse von Webseiten. Sie können aus den gesammelten Informationen detaillierte Berichte erstellen, Vorschläge oder Werkzeugs zur Lösung von Problemen bereitstellen und Ihnen dabei möglicherweise etwas beibringen. Aber YSlow und seine Alternativen werden immer Konkurrenz haben: ein engagierter, erfahrener und qualifizierter Webentwickler oder SEO-Analyst.

Nichts geht über Wissen und Praxis; Wie wir gesehen haben, werden mehrere Analysewerkzeuge immer mehrere unterschiedliche Berichte erstellen.

Es gibt keine echte Lösung, wenn es um Suchmaschinenoptimierung oder die Erhöhung der Ladezeiten von Webseiten geht. Eine helfende Hand wie YSlow kann jedoch Ihre Arbeitsbelastung verringern und Ihnen oder Ihrem Kunden auf lange Sicht viel Zeit und vor allem Geld sparen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.