Share
Wir alle wissen, dass es unzählige Gründe gibt, warum die Ladezeiten von Webseiten in die Höhe schnellen. Allerdings kann die Ermittlung des Problems zeit- und kostenaufwendig sein. Warum also die Mühe verschwenden, wenn jemand anderes oder etwas anderes die Drecksarbeit für Sie erledigen kann??
Treffen Yslow von Yahoo, ein kostenloser Webseitenanalysator für Firefox.
YSlow hat zwei Anforderungen:
YSlow huckepack auf Firebug setzen, daher müssen Sie die Add-Ons in der oben angegebenen Reihenfolge installieren, bevor Sie fortfahren können.
Webdesigner, Entwickler und Texter bemühen sich im Vergleich zu ihren Mitbewerbern um die einzigartigsten und interessantesten Inhalte.
Möglicherweise haben Sie Tage damit verbracht, Ihren neuen Blogeintrag zu perfektionieren und wären beim ersten Anschauen beinahe vor Aufregung von Ihrem Stuhl gefallen. Nachdem jedoch eine Flut von Besuchern Ihre Website überflutet hat, stellen Sie fest, dass die Dinge nicht mehr reibungslos funktionieren. Unter Druck reagiert Ihre neue Website möglicherweise wie ein Commadore 64.
Tools zur Website-Analyse lassen sich im Allgemeinen in zwei Kategorien einteilen:
YSlow passt in letzteres. Es verwendet vordefinierte Regelsätze, um die Leistung einer Webseite zu bewerten, und Tools von Drittanbietern (wie Smush.it und JS Minifiers), um Probleme zu lösen.
Es gibt drei Ansichten:
YSlow enthält sechs hilfreiche Tools: Diese reichen von JavaScript-Code-Tests bis zur Bildoptimierung durch Smush.It (eine andere kostenlose Webanwendung von Yahoo). Die gesamte Anwendung befindet sich in Firebugs Popup-Fenster, das mit einem praktischen Symbol in der Taskleiste des Browsers geöffnet und geschlossen werden kann.
Lassen Sie uns gleich mit einem Blick auf die "Grade" -Ansicht beginnen.
Am Beispiel der Homepage von Envato, einer relativ verkehrsarmen Website, wird der Gesamt-Performance-Score mit 74 von 100 bewertet, wobei ein gelber Grad C angezeigt wird. Aber was heißt das wirklich? Schließlich wird die Webseite im Browser einwandfrei dargestellt. Nun, wir müssen uns die Regeln auf der linken Seite etwas genauer ansehen, um dies herauszufinden.
Die Regeln sind in Kategorien unterteilt: Inhalt, Cookies, CSS, Bilder, JavaScript und Server. Während YSlow Elemente des DOM überprüfte, ordnete es jedes auf einem vordefinierten Regelsatz (in diesem Fall YSlow V2) ein. Je näher ein Element an den Regeln haftet, desto höher wird es. Nachdem alle Punkte gesammelt wurden, wurde die Abschlussnote vergeben.
Im Fall von Envato wurden alle Regeln der Benutzeroberfläche hoch bewertet, die Serverregeln waren jedoch weniger effizient. Dies senkte die Abschlussnote.
Zum Glück erklärt jede Regel, wo das Problem liegt, und erklärt ausführlich, wie das Problem gelöst werden kann. Diese Funktion ist für alle, die sich mit der Optimierung von Websites beschäftigen, eine große Erleichterung.
Für manche sind bestimmte Regeln wichtiger als andere. YSlow bietet Ihnen einen Standardregelsatz, aber Sie können auch zu "klassisch", "kleine Website oder Blog" wechseln oder einen eigenen erstellen. Wenn Sie Content Delivery Networks nicht verwenden möchten, bearbeiten Sie einfach einen Regelsatz und entfernen Sie diese Funktion. Es könnte wirklich nicht einfacher sein.
Die Komponentensicht listet die Elemente einer Analyse in einer sauberen, erweiterbaren Datentabelle auf.
Während dieser Abschnitt eine detailliertere Analyse enthält, können Daten wie das Ablaufdatum einer Datei oder die Antwortzeit hilfreich sein, um problematische Bereiche zu verstehen. Wenn Sie die GZIP-Komprimierung aktiviert haben, können Sie hier den Unterschied der Dateigröße anzeigen.
Jeder liebt eine Grafik. YSlow auch.
Die Statistikseite bietet eine schnelle und einfache Möglichkeit, das Gesamtgewicht Ihrer HTTP-Anforderungen zu ermitteln. Einfach ausgedrückt, gibt es zwei Diagramme: leerer Cache und grundierter Cache. Diese Diagramme unterteilen Ihre Website in HTML, JavaScript, Bilder usw. Die Dateigrößen werden dann als Kreissegmente angezeigt. Ein leerer Cache steht für den ersten Besuch eines Browsers auf der Webseite. Prime Cache gibt an, welche Komponenten sich beim Überarbeiten im Cache des Browsers befinden würden oder nicht. Sauber, klar und effektiv.
Endlich haben wir Werkzeuge. Sofort werden Sie feststellen, dass die analysierte Webseite nicht spezifisch ist, aber lassen Sie sich nicht täuschen. Jedes Tool spart viel Zeit, wenn es darum geht, Inhalte zu verkleinern, zu minimieren und zu komprimieren. Wenn Sie mit dem Konzept der Optimierung vertraut sind, sind Sie möglicherweise bereits auf ähnliche Tools gestoßen.
Bei der Verkürzung der Seitenladezeiten müssen Leerstellen und Kommentare aus Ihren Dokumenten entfernt und Ihre Bilder optimiert werden.
Glücklicherweise erledigen diese Werkzeuge die ganze harte Arbeit für Sie, denn wenn Sie dies von Hand tun, werden Sie ohne Zweifel tief in die Nacht gehen. Keine Menge von Energy-Drinks wird Sie davon abhalten, verrückt zu werden, nachdem Sie eine JavaScript-Funktion zum hundertsten Mal aus Versehen gelöscht haben.
Es gibt insgesamt acht Werkzeuge. Um alle zu erfassen, wären ein paar Artikel nötig. Also werde ich mich auf Yahoo! konzentrieren. Smush.it als Beispiel.
Yahoo! Smush.it ist eine kleine Webanwendung, die mit YSlow oder direkt von Ihrem Browser aus verwendet werden kann.
Smush.it ist einfach ein verlustfreier Bildoptimierer. YSlow lädt die für Sie hochaufgelösten Bilder hoch. Diese werden in einer Tabelle angezeigt, in der Sie das neue Bild, die Größe und den Prozentsatz für die Einsparung von Komprimierung anzeigen können.
Sie können sogar die Dateien in derselben Verzeichnisstruktur behalten und als praktische ZIP-Datei herunterladen.
Es gibt viele kostenlose Anwendungen mit ähnlichen Tools, aber die mit YSlow gepackten Anwendungen sind eine willkommene Ergänzung.
Wie bereits erwähnt, liegt der YSlow-Leistungsfaktor von Envato bei 74 mit der Note C. Nehmen wir uns etwas Zeit, um die Ergebnisse von YSlow zu analysieren, und was getan werden könnte, um das Endergebnis zu verbessern.
Hier sind ihre Verbesserungsvorschläge, beginnend von oben:
Diese Regel führt im Detail aus, dass es sechs externe JavaScript-Skripts und 17 externe Hintergrundbilder gibt. Ihr Vorschlag ist, die Dateien zu kombinieren und CSS-Sprites zu verwenden, um das Problem zu beheben.
Als Erstes sollten Sie sich die Komponentenansicht und insbesondere die JS-Dateien ansehen.
Wie die URLs zeigen, wird nur eine JavaScript-Datei auf demselben Server gehostet wie die analysierte Seite. Diese enthält benutzerdefiniertes JavaScript für WordPress. Zwei sind für JQuery und Google Analytics erforderlich, und die letzten drei stammen von formspring.com.
Wenn es sich bei den JavaScript-Dateien um meine eigenen handelt, kann ich in Betracht ziehen, die benutzerdefinierten applications.js und die formspring-JS-Dateien zu einem zu kombinieren und lokal zu hosten. Nur die Datei application.js scheint jedoch angepasst zu sein. Also möchte ich wirklich nicht mit der Arbeit eines anderen Spielers herumspielen. Zumal einige dieser Dateien keine Lizenz- / Copyright-Informationen enthalten.
Die Verwendung des Hostings von Google für jQuery wird ebenfalls als bewährte Methode angesehen. Sie sollten jedoch auf die neueste Version von jQuery aktualisieren: 1.4.2.
In diesem Fall ist es wahrscheinlich am besten, diese Regel zu ignorieren, da Änderungen an den aktuellen Methoden zu Problemen führen können. 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, lohnt es sich möglicherweise, eine Methode zu suchen, um sie lokal zu hosten.
Als nächstes überprüfen wir die Bilder. Alle werden lokal gehostet, antworten innerhalb von 40 ms und sind recht klein. Dies sagt uns, dass diese Dateien für diese Seite bereits optimiert sind. YSlow schlägt vor, diese Bilder zu kombinieren und CSS-Sprites zu verwenden, um unseren Grad zu verbessern.
Wenn Sie mit CSS-Sprites nicht vertraut sind, können Sie auf den Link "Weitere Informationen" klicken, der Sie zu den Best Practices von Yahoo! für die Beschleunigung Ihrer Website führt.
In diesem Fall sollten wir durch Verwendung eines optimierten Bildes eine Verbesserung der Bildantwortzeit feststellen. CSS-Sprites funktionieren, indem Sie Ihre Hintergrundbilder zu einem Bild kombinieren und dann CSS verwenden, um das Bild mit Hintergrundbild und Hintergrundposition auszurichten. Das verwendete CSS ist nicht besonders und sollte daher mit allen gängigen Browsern kompatibel sein.
Viele Websites haben für diese Regel eine F-Note, 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 seine stark frequentierten Websites wie Nettuts + absolut verwendet, haben sie möglicherweise entschieden, dass dies für Websites mit weniger Traffic nicht erforderlich ist.
Wieder stehen wir vor einer Regel, die sich mit HTTP-Anfragen befasst. Expires-Header sind üblich, da sie dazu führen, dass Komponenten im Cache gespeichert werden können. Zwischengespeicherte Komponenten (Bilder, JavaScript usw.) sparen Zeit und Bandbreite für wiederholte Besuche einer Webseite. Daher lohnt es sich, Ablaufdaten für Ihre Inhalte zu implementieren.
YSlow hat nach der Analyse von Envato.com 55 Komponenten "ohne weitreichendes Verfallsdatum" gefunden. Die meisten Komponenten sind Hintergrundbilder. Wir wissen aus dem ersten Vorschlag "Weniger HTTP-Anforderungen erstellen", dass wir CSS-Sprites verwenden können, um die Anzahl der Hintergrundbilder zu reduzieren und diesen Grad automatisch zu verbessern.
Das Einrichten von "Expires" -Kopfzeilen ist im Allgemeinen ein einfacher Prozess und erfordert in der Regel nur eine schnelle Hinzufügung zu Ihrer .htaccess-Datei. Nach dem Anwenden sollten alle Ihre Komponenten jetzt über die entsprechenden Ablaufzeilen verfügen, ohne dass die Datei geändert oder geändert werden muss. Um einen vollständigen Einblick in die Arbeit mit Ihrer .htaccess-Datei und den Kopfzeilen zu erhalten, benötigen Sie einen Artikel. Ich möchte hier nicht weiter ins Detail gehen, sondern habe eine Reihe hilfreicher Links zum Lesen gegeben:
YSlow hat für Envato ein Stylesheet außerhalb des Head-Elements gefunden. Zum Glück ist dies die einfachste zu korrigierende Regel. Wenn Sie Stilvorlagen oben auf Ihrer Webseite belassen, erhöhen Sie automatisch die Geschwindigkeit, mit der Ihre Webseite geladen wird. Nach dem Verschieben sollte YSlow für diese Regel eine Note A melden.
Durch das Entfernen nicht genutzter Leerräume in Ihren Dokumenten wird die Größe des Dokuments verringert und somit die Downloadgeschwindigkeit der Datei erhöht. Wie bereits erwähnt, stellt YSlow uns ein Minification-Tool zur Verfügung, damit alle harte Arbeit für uns erledigt werden kann.
Gehen Sie zu der Werkzeugansicht und wählen Sie YUI CSS-Kompressor. Im Nu sind Ihre CSS-Dateien minimiert und zum Download verfügbar. Schnell, sauber und einfach.
ETags bieten eine Möglichkeit, eine bestimmte Version einer Webseitenkomponente (Bilder, JavaScript usw.) zu überprüfen. Sie arbeiten mit dem Webserver zusammen, um den zwischengespeicherten Inhalt eines Browsers mit dem Inhalt des Webservers 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 keine"in Ihre Apache-Konfigurationsdatei. Sie sollten jetzt eine Verbesserung in diesem Regelgrad sehen.
Es gibt viele Alternativen bei der Website-Analyse, und ich wäre nicht überrascht, wenn Sie Ihre Favoriten hätten. Neben YSlow verwende ich noch vier kostenlose Analysegeräte. Wie zu erwarten, bietet jeder einzelne Funktionen einzigartige Funktionen, und allein aus diesem Grund denke ich, dass es wichtig ist, daran zu denken, dass kein Tool einen absolut kugelsicheren Bericht liefern kann.
Um Ihnen eine Vorstellung davon zu vermitteln, wie unterschiedlich jedes davon zu einem Endergebnis führt, habe ich eine kurze Beschreibung und die Punkte auf der Envato-Website eingefügt.
Diese von AOL bereitgestellte Anwendung fügt Ihrer Analyse verschiedene Einstellungen hinzu. Sie können die Browserversion und die Verbindungsgeschwindigkeit simulieren und visuelle Vergleiche mit anderen URLs durchführen. Dies ist eine großartige Funktion, wenn Sie A / B-Tests starten möchten.
Ergebnis: N / A. Bietet eine Optimierungscheckliste und Ladezeiten.
PageSpeed ist ein weiteres Add-On für Firefox und Firebug. Dies wird sogar in demselben Menü wie YSlow angezeigt und bietet eine ähnliche Analyse. Wie bei YSlow werden Regeln und Berichte verwendet, um die Leistung der einzelnen Komponenten anzuzeigen. Es wird sogar Ihre Inhalte optimieren und minimieren.
Ergebnis: 76/100
Diese kostenlose Webanwendung überprüft noch immer Ihre Inhalte, das Alexa-Ranking, den Traffic, die Suchmaschinenoptimierung, Geometadaten und vieles mehr. Bei jeder Analyse werden hilfreiche Hinweise hinzugefügt. Sie können sogar ein Widget zu Ihrer Website hinzufügen, um Ihre "Woorank-Bewertung" zu zeigen..
Ergebnis: 65,8 / 100
Grader ist eine weitere kostenlose Webanwendung, die auch für das iPhone verfügbar ist. Dieses Tool ähnelt WooRank mit einer sauberen und detaillierten Benutzeroberfläche. Es gibt sogar ein dediziertes Tool für die Analyse von Blogs: ein einzigartiges Merkmal der fünf in diesem Artikel aufgeführten.
Ergebnis: 99/100
Anwendungen wie YSlow bieten eine schnelle und effektive Analyse von Webseiten. Sie können aus den gesammelten Informationen detaillierte Berichte generieren, Vorschläge oder Tools zur Lösung von Problemen bereitstellen und am Ende Ihnen etwas beibringen. YSlow und seine Alternativen werden jedoch immer Konkurrenz haben: ein engagierter, erfahrener und qualifizierter Webentwickler oder SEO-Analyst.
Nichts geht über Wissen und Übung. Wie wir gesehen haben, werden verschiedene Analysewerkzeuge immer mit verschiedenen Berichten aufwarten.
Es gibt keine echte Lösung, wenn es um die Optimierung von Suchmaschinen oder um die Ladezeiten von Webseiten geht. Eine helfende Hand wie YSlow kann jedoch Ihre Arbeit erleichtern und Sie oder Ihren Kunden auf lange Sicht viel Zeit und vor allem Geld sparen.
Accentsconagua