Anzeige
Anzeige
Artikel
Artikel merken

SEO: So optimierst du die Ladegeschwindigkeit einer TYPO3-Website

Bereits seit zwei Jahren ist offiziell bekannt, dass Google 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.

6 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
11 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Justin Nuß
Justin Nuß

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
cephei
cephei

@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
Sven Wappler
Sven Wappler

@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
Tobias Dohmann
Tobias Dohmann

@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
Gast
Gast

@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
Georg Ringer
Georg Ringer

@ 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
t3sugar

Mmmm…

wie sieht das eigentlich mit Typo3-Page-Speed aus, wenn man keine statischen Webseiten hat und alles dynamisch ist (z.B. Formulare oder Ajax) .. Wenn bei jeder neuen Abfrage alles durch das komplette Framework geschickt werden muss, dann kann man den Page-Speed auch ganz vergessen!
Ich finde Framworks und TYPO3 ganz schön langsam. Für mich ist TYPO3 aus diesem Grund eher ein CMS für statische Webseiten.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige