Vorheriger Artikel Nächster Artikel

SEO: So optimierst du die Ladegeschwindigkeit einer TYPO3-Website

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

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.

SEO: So optimierst du die Ladegeschwindigkeit einer TYPO3-Website

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
NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

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
TYPO3: 10 NEOS-Projekte im Einsatz
TYPO3: 10 NEOS-Projekte im Einsatz

TYPO3 Neos legt als jüngste Schöpfung aus dem TYPO-Universum den Fokus auf den Content-Manager und die Usability. Trotz des noch jungen Alters des CMS finden sich bereits jetzt viele mit TYPO3 … » weiterlesen

Die besten SEO-Plugins für WordPress
Die besten SEO-Plugins für WordPress

Wie lässt sich eine WordPress-Installation für Suchmaschinen optimieren? Und: Worauf gilt es dabei zu achten? Wir haben das Netz gefilzt und die besten SEO-Plugins für WordPress gesammelt. » weiterlesen

TYPO3 CMS – Die wichtigsten Neuerungen von der T3CON
TYPO3 CMS – Die wichtigsten Neuerungen von der T3CON

TYPO3 CMS hat noch eine längere Zukunft vor sich, das wurde auf der diesjährigen T3CON 2014 in Berlin klar. Obwohl Vorträge zu Neuerungen in Neos auf der Konferenz insgesamt in der Mehrzahl waren, … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen