SEO Scout | Suchmaschinenoptimierung

Hier findest Du eine kleine Zusammenfassung von nützlichen Tools, mit denen man die Geschwindigkeit von Webseiten und andere nützliche Parameter feststellen kann.

Nach längerer schöpferischer Pause regt sich wieder etwas Neues bei Google Webmaster Tools: Neben der bekannten Funktion zur Abfrage von Keywords, unter denen eine über die Zeit Website gefunden wird, gibt es jetzt einen neuen Menüpunkt “Google Labs”.

Dort finden sich derzeit die Funktionen

1. “Abruf wie beim Googlebot”,
2. “Malware-Details” und
3. “Website-Leistung”.

Punkt 1 und 2 sind relativ unspannend (es sei denn, auf der eigenen Seite wurde Malware entdeckt und man wird von Google geblockt). Aber Punkt 3 gab den Ausschlag für diesen Artikel.

Ein Tool zur Messung von Websites zu haben, ist schön. Schöner ist es jedoch, mehr als eines zu haben.

Das von Yahoo! stammende YSlow ist ein prima Tool, das sich schön in Firebug integriert und nicht nur ausgiebig über die Geschwindigkeitsparameter Auskunft gibt, sondern auch ein Bildkompressionstool und andere Kompressionstools für CSS, Javascript mitbringt. Die Anzeige von YSlow ist eine Bewertung der bemassten Seite im Stile amerikanischer Schulnoten von A bis F.

YSlow ist schnell, klein und zuverlässig. Nun schickt sich Google an, Yahoo! auch auf diesem Gebiet zu schlagen und ein ebensolches Tool in die Zentrale Google Webmaster-Tools einzuklinken. Genau wie YSlow integriert sich auch Google’s Page Speed getauftes Tool in Firebug.

Man beachte auch den philosophischen Unterschied, der in den Namen der Tools ausgedrückt wird: YSlow (warum langsam?) setzt quasi voraus, dass Deine Seite zu langsam ist und Du erhältst eine Schulnote A-F dafür. PageSpeed ist vom Namen her positiver eingestellt (zumindest wird keine Langsamkeit unterstellt). Aber das nur am Rande. Solche Kleinigkeiten gilt es beim Marketing unbedingt zu beachten.

Das Interface von YSlow stellt sich in Firebug wie folgt dar – vor dem Start und danach:

YSlow im Firebug

YSlow in Aktion

Die Seite, die hier von YSlow und Page Speed getestet wurde, ist übrigens die Google Webmaster Tools Seite, auf der Page Speed vorgestellt wird

Und so kommt Page Speed von Google daher, noch etwas schmucklos, aber sehr funktional:

Google Page Speed

Google Page Speed in Aktion

Unterschiede und Gemeinsamkeiten von YSlow und Page Speed

Mit beiden Tools kann man Websites hinsichtlich Userperformance beurteilen, und solange man sich an ein Tool (hauptsächlich) hält, kann man Websites vergleichen und gegeneinander antreten lassen. Beide Tools bieten eine dahinterliegende Hilfe an (siehe auch Nicole Sullivan’s Video: Wie man schnelle Webseiten baut); mit den hieraus gewonnenen Erkenntnissen kann man seine Website tatsächlich beschleunigen, um dem Leser eine bessere Performance zu geben.

Interessant finde ich bei Google Page Speed den Punkt “Use efficient CSS selectors”. Da werden dann “ineffiziente” CSS-Regeln aufgelistet, die man anders besser schreiben könnte (im Sinne der Geschwindigkeit).

Es gibt mehr da draußen

Es soll hier natürlich nicht verschwiegen werden, daß auch Google Chrome und Safari tolle Website-Profiler haben, die bei der Fehlersuche und bei der Geschwindigkeits-Optimierung unheimlich hilfreich sind. Ich vermute aber mal ganz stark, daß die meisten Leute (wenn Sie sowas denn überhaupt benutzen) YSlow und Firebug nutzen.

Nun gibt es mit Google’s Page Speed ein weiteres, von dem sich zeigen wird, ob und wie es weiter entwickelt wird und ob Google es schafft, einen unvergleichglichen Mehrwert gegenüber den anderen Tools zu bieten. Mir ist es letztendlich egal, welchen Website-Profiler ich nutze, hauptsache, die Ergebnisse sind zuverlässig (im Sinne von nachvollziehbar) und das Tool zeigt mir übersichtlich an, wo ich was wie verbessern könnte oder sollte.

Was bleibt, ist Arbeit

Und jetzt ans Werk: Deine Seite kann bestimmt auch noch schneller gemacht werden. Geringere Ladezeit = zufriedenere Besucher. Nichts nervt Besucher so wie das lange Warten auf irgendwelche bekloppten Bildchen und Werbebanner, die die Darstellung der Seite verzögern – oder, schlimmer noch, zum Aufspannen des Layouts benutzt werden (Tabellen-Design). Nee, das muß nicht sein.

Mancherorts ist man allerdings an bekloppten, ineffizienten Code gebunden, wenn z.B. ein Werbepartner nicht validen und nicht-änderbaren Sourcecode ausliefert (z.b. per Javascript verschleiert und direkt beim Anzeigen der Seite in HTML-Source gewandelt). Auch ich habe hier und da ein Plugin oder irgendwas “Fremdes” eingebunden, was mir die Geschwindigkeit oder die Validität versaut.

Man muß im Einzelfall prüfen, was einem wichtiger ist und – wie immer – Konsequenzen ziehen.

Hab Spaß.

Hier ist ein Video von Yahoo’s Spezialistin Nicole Sullivan (nicht zu verwechseln mit der gleichnamigen Darstellerin von King of Queens), in dem sie darüber referiert, wie man schnelle Internetseiten anfertigt. Das möchte ich jedem, der es noch nicht kennt, ans Herz legen. Hier sind einige sehr wichtige Techniken beschrieben, die dem Besucher ein besseres “Erlebnis” der Seiten ermöglichen.

Wer das alles nochmal in Ruhe nachlesen möchte, kann einen 7-stufigen Artikel zu diesem Thema im Yahoo Developer Network finden. » “Best Practices for Speeding Up Your Web Site” sollte man wenigstens mal überflogen haben, um sich einen Entwicklungsstil anzugewöhnen, der das schnelle Laden der Webseiten ermöglicht.

Die im Video und im Artikel genannten Regelsätze basieren auf Testergebnissen und sollten daher ernst genommen werden. Einiges lässt sich relativ unkompliziert und schnell (z.B. CSS in Head, Scripts at Bottom) umsetzen, anderes (z.B. “Nutze ein Content Delivery Network”, CDN) ist für viele Websites entweder zu aufwändig oder zu teuer.

Um mittelgroße Websites nach Anwendung aller sonstigen Regeln noch weiter “auf die Sprünge” zu helfen, kann man in Betracht ziehen, ein CDN mit Bordmitteln nachzubilden. Hierzu nutzt man die Fähigkeit des Webbrowsers, von verschiedenen Quellen gleichzeitig laden zu können.

So könnte man z.B. die Content-Bilder von einer Subdomain bilder.meinedomain.de laden, CSS-Dateien und Layoutbilder von style.meinedomain.de und Scripte von scripts.meinedomain.de. Beim Aufruf der Seite lädt der Browser die Bestandteile des Contents von mehreren Subdomains gleichzeitig, was in vielen Fällen zu einer Beschleunigung der Anzeige der Seiten führt.

Für das Laden von Inhaltsbildern auf stark frequentierten Seiten kannst Du auch die Auslagerung auf einen externen Bilderdienst (nicht unbedingt Flickr, sondern eher photobucket.com) beschleunigen bzw. den eigenen Webserver entlasten.

Messlatte für alle Verbesserungen sollte das Tool YSlow, das sich als Plugin für Firebug in der Browserleiste verankert, herhalten. Dieses Tool von Yahoo prüft genau die Dinge ab, die im Video und im Artikel erwähnt werden und gibt einem hilfreiche Zusammenfassungen und eine Endnote.

Neben den Profile-Möglichkeiten durch Firebug selbst und z.B. auch Safari kann man hier den größten Verkehrssündern auf die Schliche kommen und beseitigen.

Hierbei gilt: kümmere Dich zuerst um die dicken Fische. Wenn z.B. das Laden der CSS-Dateien ein Verbesserungspotential von 5% hat, das Laden der Content-Bilder jedoch 25%, dann kümmere Dich zuerst um die Content-Bilder. Gehe also vom Groben ins Feine.

Wäge die Beschleunigungsmethoden aber mit Verstand ab. Wenn eine Methode Deine Seite in der Funktionalität stört, musst Du sie nicht unbedingt einsetzen. Wäge einzeln ab, was (Dir) wichtiger ist.

Yslow ist ein super-nützliches Tool, denn unter anderem erzählt es einem nicht nur, daß die Content-Bilder zu groß sind, sondern bietet konkret Hilfe an. Unter dem Tab “Tools” innerhalb von Yslow findet sich unter einigen anderen, sehr nützlichen Tools eines mit dem Namen “smush.it”, welches auf Knopfdruck alle Bilder der Seite verlustfrei optimiert. Das Ergebnis von smush.it kann man als Tabelle anschauen und sich die optimierten Bilder einzeln oder als ZIP (wobei die Ordnerstruktur der Bildpfade des Servers erhalten bleibt) runterziehen.

Selbst bei Speicherung aller Bilder mit “für Web optimieren” sind hier teilweise bis zu 45% Verbesserungspotential verborgen. Dieselben Bilder in derselben Qualität aber mit weniger Dateigröße.

Yslow findest Du im Firefox-Addon Verzeichnis bei Mozilla. Denke daran, erst Firebug zu installieren, dann Yslow, da Yslow sich als Plugin von Firebug einklinkt.

Viel Erfolg beim Beschleunigen Deiner Webseiten!