Vorheriger Artikel Nächster Artikel

SEO: So optimierst du die Ladegeschwindigkeit einer TYPO3-Website

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

SEO: So optimierst du die Ladegeschwindigkeit einer TYPO3-Website

Bereits seit zwei Jahren ist offiziell bekannt, dass für seine PageRank-Bewertung auch die Ladegeschwindigkeit einer Website, den sogenannten PageSpeed berücksichtigt. Seit kurzem gibt es mit dem Google-PageSpeed-Test auch endlich eine bequeme Möglichkeit, den PageSpeed-Score online von Google ermitteln zu lassen. Wir zeigen, wie man anhand der Ergebnisse TYPO3-Websites mit wenig Aufwand beschleunigen kann.

Google baut mit dem PageSpeed-Test [1] auf bekannten Performance-Tests wie WebPagetest [2], YSlow [3], GTmetrix [4] oder websiteoptimization [5] und deren Kriterien auf. Der Fokus der Messung liegt in der Umsetzung möglicher Maßnahmen zur Reduzierung der Ladezeit einer Website. Je mehr Maßnahmen erfolgreich erkannt werden, desto besser wird folglich die Bewertung. Jedoch wird die für einen Besucher entscheidende Ladezeit kurioserweise weder angezeigt noch bewertet; ebensowenig wie deren Skalierung bei steigenden Zugriffszahlen, was laut Google jedoch in Kürze berücksichtigt werden soll.

Der PageSpeed-Score kann daher nur als ein Google-spezifischer Messwert gesehen werden, der keinen Anspruch hat, die tatsächliche Performance einer Website zu repräsentieren. Ziel einer Optimierung ist daher, den Score möglichst effizient zu erhöhen, um maximalen Einfluss auf den hart umkämpften PageRank zu nehmen.

Optimieren

Der recht junge Online-Test stellt eine schnelle Möglichkeit dar, den Score zu ermitteln. Allerdings scheint Google das Ergebnis einige Zeit zwischenzuspeichern – ändert man also eine Einstellung der Website und führt den Test erneut durch, erhält man dort oftmals noch den Wert der ersten Messung.

Es empfiehlt sich daher, für die Entwicklung eine der beiden Browser-Extensions [6] zu installieren und den PageSpeed-Score lokal zu testen. Bei ist hierbei wichtig, sich vorher aus dem Backend auszuloggen, um die Website unverändert anzeigen zu können.

Nach jedem Testlauf erhält man neben dem Score von Google auch gleich entsprechende Maßnahmen zur Optimierung sowie Praxistipps zu deren Umsetzung. Für den Webentwickler ist das Vorgehen daher einfach:

  1. Testlauf starten
  2. Am höchsten priorisierte Maßnahme feststellen
  3. Maßnahme in der Website umsetzen
  4. Testlauf erneut starten und Erfolg bewerten

Maßnahmen priorisieren

Google kategorisiert Maßnahmen nach drei Prioritäten (High, Medium, Low), nach „Experimental Rules“, die keine Einfluss auf den Score haben, und nach „Already done!“ für umgesetzte Optimierungen. Ein fixes Bewertungsschema für die Prioritäten gibt es nicht, sie variieren je nach Website und Optimierungsstatus.

Werden etwa 20 Icons gefunden, die sich durch „Bilder in CSS-Sprites kombinieren“ zusammenfassen lassen, stuft Google diese Maßnahme als „High Priority“ ein und verhindert somit einen hohen Score. Erstellt man allerdings bis auf wenige Ausnahmen CSS-Sprites, so wird die Maßnahme nur noch als „Low Priority“ eingestuft und der PageSpeed-Score signifikant erhöht. Wird schließlich keine Grafik mehr als Sprite vorgeschlagen, rutscht die Maßnahme zu „Already done!“ und die Seite erhält die hierfür beste Bewertung.

Die folgende Liste an Maßnahmen ist typisch für eine nicht-optimierte TYPO3-Website.

High priority
  • Bilder in CSS-Sprites kombinieren
  • Browser-Caching nutzen
Medium priority
  • Komprimierung aktivieren
  • Bilder optimieren
Low priority
  • JavaScript später parsen
  • Asynchrone Ressourcen bevorzugen
  • Header des Typs „Vary: Accept-Encoding“ angeben
Already done!
  • @import in CSS vermeiden
  • CSS (klein) inline einfügen
  • JavaScript (klein) inline einfügen
  • CSS reduzieren
  • JavaScript reduzieren
  • HTML reduzieren
  • Ressourcen von einer konsistenten URL bereitstellen
  • Umleitungen minimieren
  • Zeichensatz angeben
  • Bildabmessungen festlegen

Optimierungskurve

Zu Beginn ist es leicht, mithilfe der High-Priority-Maßnahmen schnell einen höheren Score zu erreichen. Hierzu zählen zum Beispiel angepasste HTTP-Header, aktiviertes Browser-Caching und GZIP-Komprimierung. Je höher der Score, desto mehr Maßnahmen fallen in die Kategorien „Medium Priority“ und „Low Priority“. Deren Umsetzung ist zum einen schwieriger und aufwändiger, zum anderen tragen sie nur noch wenig zur Score-Verbesserung bei.

Werte von 85 und höher verlangen zum Beispiel den Einsatz von CSS-Sprites, minifizierten, zusammengefassten und komprimierten Skripten, optimal komprimierten Bilder und das Hosting von Skripten in Content Delivery Networks. In ihrer Summe können diese Maßnahmen daher recht aufwändig werden. Wer aber sein Ziel nicht aus den Augen verliert und nur noch wenige Low-Priority-Maßnahmen vorgeschlagen bekommt, wird mit einem Score von 95-100 belohnt.

Optimierungsvorschläge für TYPO3

Die Agentur-Website der Marit AG [7] basiert auf TYPO3 4.3 und wurde zu Beginn mit 62 Punkten durchaus gut bewertet. Das ist auch nicht verwunderlich, da bei ihrer Entwicklung vor zwei Jahren ein Augenmerk auf die Performance gelegt wurde und entsprechend zahlreiche Maßnahmen mit „Already done!“ bewertet wurden. Dennoch bestand Raum zur Optimierung und zugleich eine gute Möglichkeit, um Erfahrungen mit Google PageSpeed zu sammeln.

Die Maßnahmen lassen sich neben den Google-Prioritäten grob in die drei technischen Kategorien TYPO3, Template und Server zusammenfassen. Zu TYPO3-Maßnahmen zählen die Installationen von Extensions und die TypoScript-Konfiguration, zu Template alle Maßnahmen an HTML, Skripten und Grafiken sowie zu Server alle Einstellungen die per .htaccess-Konfigurationsdatei am Webserver angepasst werden können.

TYPO3

Die Extension „scriptmerger“ [8] verbessert die Einbindung von CSS- und JavaScript-Dateien durch Minifizierung (etwa das Weglassen von Umbrüchen), GZIP-Komprimierung und Zusammenfassen der Skripte in eine Datei. Sie basiert auf den Open-Source-Projekten minify, jsminplus und jsmin und kann einfach über TypoScript konfiguriert werden. Die einzelnen Maßnahmen lassen sich getrennt für CSS und JavaScript aktivieren sowie Ausnahmen für einzelne Dateien definieren.

Dies hilft, bei auftretenden Problemen schnell zu reagieren. Etwa, wenn JavaScript von manchen Browsern nicht korrekt interpretiert wird. In solchen Fällen lassen sich einzelne Dateien von der Komprimierung ausnehmen und die Funktionalität der Website ist weiterhin gewährleistet. Grundsätzlich empfiehlt es sich, Konfigurationen zunächst auf einer Seiten-Kopie der Startseite durchzuführen und dort mit verschiedenen Browsern und mobilen Endgeräten zu testen.

Die Extension „sourceopt“ kann die Ausgabe von TYPO3 durch die Reduzierung und Formatierung des HTML-Codes verbessern. Möglich ist zum Beispiel, Meta-Tags und Kommentare zu entfernen, oder den gesamten HTML-Code unleserlich aber platzsparend in eine Zeile schreiben zu lassen. Letzteres ist in Anbetracht der HTML-Komprimierung jedoch von zweifelhaftem Nutzen und brachte in Tests keinen besseren PageSpeed-Score.

Durch das TypoScript „page.inludeJSFooter“ können JavaScripts aus dem HTML-Head direkt vor das Ende des Body-Bereichs verschoben werden, um deren Verarbeitung erst nach dem Rendern der Seite anzustoßen. Dies macht die Seite schneller sichtbar, funktioniert aber nur mit Skripten, die nicht bereits zuvor verwendet werden. Auch hier sollte deshalb zunächst auf einer separaten Seite getestet werden.

Template

Asynchrone JavaScripts bieten ebenfalls die Möglichkeit, sie erst nach dem Rendern der Website zu laden. Sie eignen sich insbesondere für Tracking-Pixel. Google Analytics, Piwik oder Anbieter wie Wiredminds bieten seit einiger Zeit Pixel-Codes wahlweise als asynchrone Version an, die durch simplen Austausch eingebunden werden.

Dank der PageSpeed-Optimierungen konnte die Ladezeit der Marit-Website von 1,2 auf 0,6 Sekunden halbiert werden. Eine Verbesserung, die nicht nur den PageRank, sondern vor allem die Zufriedenheit der Besucher erhöht.
Dank der PageSpeed-Optimierungen konnte die Ladezeit der Marit-Website von 1,2 auf 0,6 Sekunden halbiert werden. Eine Verbesserung, die nicht nur den PageRank, sondern vor allem die Zufriedenheit der Besucher erhöht.
Der Einsatz von Content Delivery Networks oder eigenen Subdomains für Ressourcen wie Grafiken und Bibliotheken verkürzt die Ladezeit, da die Ressourcen zeitgleich geladen werden – auch in älteren Browsern. Insbesondere GIF- und PNG-Grafiken kennzeichnet Google als optimierungsfähig, wenn es möglich ist, sparsamere Versionen davon zu erzeugen. Diese werden von Google automatisch generiert und lassen sich direkt austauschen.

Eine hohe Priorität genießen CSS-Sprites, mit denen durch das Zusammenfassen von CSS-Hintergrundbildern HTTP-Requests eingespart werden. Jedoch werden hierfür auch normale HTML-Grafiken vorgeschlagen, die im Zuge der Optimierung zunächst als CSS-Hintergrundbild umgesetzt werden sollen. Vor solch aufwändigen Schritten sollte etwa durch das Weglassen der Grafik vorab getestet werden, wie lohnenswert der zu erwartende Score-Gewinn dafür überhaupt ausfällt.

Server

Für die Konfiguration des Browser-Cachings und der scriptmerger-Extension müssen Änderungen an der .htaccess-Datei vorgenommen werden. Dies betrifft die Apache-Module „mod_expires“, „mod_headers“ und „mod_deflate“, die alle standardmäßig bei einer Apache2-Installation aktiv sind. Das Ablaufdatum möglichst aller Ressourcen sollte für eine positive Google-Bewertung mindestens sieben Tage in der Zukunft liegen. Dies ist auch bei häufigen Änderungen an Stylesheets kein Problem, da scriptmerger diese mit sich ändernden Hashcodes versieht.

Leider können Server-Einstellungen nur für die gesamte Website vorgenommen werden und führen im Fehlerfall schnell zu Nicht-Erreichbarkeit. Es bietet sich daher an, eine Testumgebung oder niedrig frequentierte Tageszeiten für diese Art der Optimierung zu wählen und die Funktionsfähigkeit mithilfe mehrerer Browser und Endgeräte zu überprüfen.

Und das Ergebnis?

Die Marit-Website konnte innerhalb kurzer Zeit mit überschaubarem Aufwand von 62 auf 98 Punkte optimiert werden. Die Zeit zwischen HTML-Auslieferung und dem vollständigen Rendering wurde im Mittel von 1,2 auf 0,6 Sekunden halbiert.

Auch wenn der effektive Einfluss des PageSpeed-Parameters im Google-Ranking gering sein mag, lohnt es sich, das Scoring der eigenen Website zu testen und den Aufwand der vorgeschlagenen Maßnahmen zu prüfen. Erstrebenswert ist Performance-Optimierung in jedem Fall, da nicht nur die Website, sondern auch deren Besucher von schnelleren Ladezeiten profitieren.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von nuss.justin am 24.10.2012 (22:09 Uhr)

    Ich weiß nicht, aber ist PageSpeed nicht schon uralt Oo
    Ich meine den gibt es schon seit Ewigkeiten und wenn man die Bewertung raus nehmen würde, hätte man fast das selbe Tool, wie es Chrome schon besitzt.

    Antworten Teilen
  2. von cephei am 25.10.2012 (06:15 Uhr)

    @Christian
    Ich finds immer schön, in einem in einem Magazin, dessen Ursprung/Gründung aus TYPO3 hervorging, etwas über TYPO3 lesen zu können.

    Antworten Teilen
  3. von wapplersystems am 25.10.2012 (08:43 Uhr)

    @Moritz: Du meinst wohl eher, dass die Marit Website auf 4.5 anstatt 4.3 basiert ;-)
    Übrigens geht es noch besser. Seit den neueren TYPO3 Versionen sind die Komprimierungs- und Packfunktionen bereits standard und erfordern keine Extensions mehr. Die Skripte und CSS Dateien werden dann zu möglichst wenig Dateien zusammengefügt, was die Ladezeit auch wiederum reduziert.
    Das ganze ist bei dem Template-Projekt zu sehen, welches ich nebenbei pflege: http://t3yaml.de

    Antworten Teilen
  4. von Tobias Dohmann am 25.10.2012 (11:20 Uhr)

    @Moritz: Sie verwechseln leider den Pagerank mit dem Ranking einer Website.

    Der "Pagarank" ist auch nur einer von vielen Faktoren, der für die Bewertung einer Website herangezogen wird und wird leider sehr oft mit dem "Ranking einer Seite" verwechselt.

    Der Pagerank ist, wie die Ladezeit einer Seite auch, ein eigenständiger Faktor und wird nicht von der Ladezeit beeinflusst, sondern nur von Links.

    mehr Infos: http://de.wikipedia.org/wiki/PageRank

    Ansonsten ein sehr lesenswerter Artikel.

    Antworten Teilen
  5. von Gast am 25.10.2012 (12:20 Uhr)

    @christian: Typo3 deinstallieren und ein anständiges CMS installieren?
    Welches denn ? Joomla oder Drupal ? wie schon gesagt wurde, setzen hier die gleichen Maßnahmen an...

    @moritz: danke für die Info, noch 2 ergänzende Dinge:
    - Last-Modified Header mitsenden, damit FF die Expires-getaggten Dateien auch brav per 304er Header respondet und somit aus seinem Cache liest. Lediglich Chrome schaut bei fehlendem Last-Modified-Header auf den Expires-Header und setzt 304, ALLE anderen Browser "responden" an sich selbst einen 200er Header und holen dann die Resource vom Server ;)....

    - man kann natürlich Anweisungen in der .htaccess z.b. per Directory oder sogar per Datei(typ) setzen (LocationMatch).

    Und zu Caching/Proxies:

    solange eine Seite Plugins beinhaltet, die man nicht cachen kann, nützt auch staticfilecaching oder varnish nicht wirklich etwas, da dieser Teil des HTML-Codes eben von PHP generiert werden muss...wir fahren allerdings eine 50K+-Pages Website mit mind. 2 USER_INT Plugins pro page mit einer First Response von durchschnittlich 0.5sec, OHNE varnish,static-caching etc... Es geht also auch dynamisch - wie bleibt aber Geschäftsgeheimnis :)

    Antworten Teilen
  6. von Georg Ringer am 26.10.2012 (08:31 Uhr)

    @ Gast: Inspiring people to share... wäre schön hier mehr zu erfahren!

    @ PageSpeed: nun natürlich ist es schon interessent wie schnell die Antwortzeit kommt, man optimiert ja schließlich etwas auch für den Enduserm

    Generell: was ich noch in den Raum werfen will: Akamai wenn es darum geht dass die Seite auf der ganzen Welt schnell sein muss

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Google
SEO für Onlineshops: Kostenloses Whitepaper sagt Händlern, was zu tun ist
SEO für Onlineshops: Kostenloses Whitepaper sagt Händlern, was zu tun ist

Die renommierte deutsche SEO-Agentur Eology hat das kostenlose Whitepaper „SEO für Onlineshops“ herausgegeben. Wir sagen euch, was euch im dem 40-seitigen Papier erwartet. » weiterlesen

TYPO3 CMS, WordPress und Co.: Die wichtigsten Updates für die wichtigsten CMS (August)
TYPO3 CMS, WordPress und Co.: Die wichtigsten Updates für die wichtigsten CMS (August)

Bei den großen CMS gibt es regelmäßig Updates, die neue Funktionen liefern oder auch „nur“ Sicherheitslücken schließen. Im August wurde unter anderem WordPress 4.3 veröffentlicht. » weiterlesen

Diese Verlage hatten in Google News 2015 die größte Sichtbarkeit
Diese Verlage hatten in Google News 2015 die größte Sichtbarkeit

Als Anbieter eines auf Google News spezialisierten SEO-Tools hat NewsDashboard außergewöhnliche Einblicke in die Machenschaften deutscher Publisher. Zum Jahresanfang liefern dessen Macher Zahlen … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?