Google Page Speed Optimierung für TYPO3

Seit 2010 ist es offiziell  dass Google für sein Ranking auch die Ladegeschwindigkeit einer Webseite berücksichtigt. Durch den Google Page Speed Test und die hierauf aufbauenden Browser-Extensions haben Webmaster seit etwa einem Jahr auch die Möglichkeit ihren “Page Speed Score” offiziell zu testen und hierauf hin zu optimieren. Grund genug für uns sich dieser Sache einmal anzunehmen.

Google baut auf bekannte Services wie WebPagetest, YSlow, GTmetrix und websiteoptimization und deren Metriken auf. Fokus der Messungen liegt in der Umsetzung von möglichen Maßnahmen zur Reduzierung der Ladezeit. Die Ladezeit selbst ist kurioser Weise nicht maßgebend, genau so wenig wie deren Skalierung mit steigenden Zugriffszahlen. Letzteres soll aber in Kürze mit einfliessen.

-

Glücklicherweise nennt Google im Zuge eines Testlaufs alle Optimierungsmaßnahmen und deren Priorität auch gleich beim Namen. Für uns Webentwickler ist das Vorgehen daher simpel: Testlauf starten, die am höchsten priorisierte Maßnahme feststellen, diese an der eigenen Webseite umsetzen und erneut testen.

Zu Beginn ist es natürlich einfach durch grundlegende Maßnahmen wie vernünftige HTTP-Header, Browser-Caching und GZIP Komprimierung schnell einen höheren Score zu erreichen. Doch Oben wird die Luft dünn. Werte von 85 und höher verlangen den Einatz von CSS Sprites, minifizierten, zusammengefassten und komprimierten Skripten, optimal komprimierten Bilder, Hosting in CDNs und vielen, kleinen Tricks, die in ihrer Summe aufwändig sind. Wer aber sein Ziel nicht aus den Augen verliert und sich auch über kleine Fortschritte freuen kann, wird mit einem realistischem Score im 90′er Bereich belohnt.

-

Unsere Marit AG Webseite wurde anfänglich mit 62 Punkten durchaus gut bewertet. Nicht verwunderlich da bei ihrer Entwicklung natürlich gewisse Spielregeln beachtet wurden. Dennoch bestand Raum zur Optimierung wobei folgende Maßnahmen umgesetzt wurden:

.htaccess
mod_expires von 8-100 Tagen
mod_deflate für HTML, Text, CSS und JS
mod_headers:
- Vary Accept.Encoding
- Cache-Control max-age, public
- FileETag none

TYPO3
Installation der scriptmerger Extension:
- Minifizierung: CSS, JS
- Komprimierung: CSS, JS
- Zusammenfassung: CSS (JS führte zu Problemen)
Installation der sourceopt Extension
- (Deaktivert da keine Score Verbesserung durch HTML Minifizierung erreicht)
Verschieben einiger JS vor </body> mit page.includeJSFooter

HTML
Aktuelle, asynchrone Version von JS-Trackingcodes eingesetzt
Einsatz von CDN für Skripte  (jQuery bei Google) – aber auch
eigenes Hosting von Skripten wenn deren Hoster keine vernünftigen Cache-Headers setzt

CSS/IMG
Manuelle komprimierung von Grafiken
Zusammenfassung von CSS background-images in CSS Sprites
Auslagern von HTML <img> in das CSS (s.o.)

-

Und das Ergebnis?


(klicken für den vollständigen Score mit allen Maßnahmen)

Auch wenn der effektive Einfluss des Page Speed in das Google Ranking vielleicht noch gering sein mag lohnt es sich durchaus das Scoring der eigenen Webseite zu testen und den Aufwand der Maßnahmen zu prüfen. Ein nobles Ziel ist so eine Optimierung natürlich auch da nicht nur die Webseite sondern auch deren Besucher von schnellen Ladezeiten profitieren dürften.

-

Share Button
Veröffentlicht unter Allgemein
6 Kommentare auf “Google Page Speed Optimierung für TYPO3
  1. Einen Faktor sollte man nicht unter den Tisch fallen lassen: die Webseiten sollten bei einem Provider mit leistungsfähigen Servern betrieben werden. Die Optimierungen nützen nur zum Teil, wenn die Servers des Hosters überlastet sind.

    In den Google Webmaster Tools wird die tatsächliche Ladezeit der Webseite bereits grafisch dargestellt.

  2. Moritz sagt:

    Das ist natürlich vollkommen richtig. Bei der Marit.ag Webseite ist dies mit ~700ms Wartezeit bis zur HTML Auslieferung leider sehr gut sichtbar. Also entweder mit etwas Aufwand Maßnahmen wie statisches Filecaching oder Reverse Proxy implementieren – oder einfach einen guten, auf TYPO3 spezialisierten Webhoster wie Euch wählen. :)

  3. …und sich nicht an Zahlen festhalten, sondern testen, testen, testen. Einige Optimierungsmaßnahmen fußen noch auf alte Browsermarkt-Verteilungen und sind heutzutage nur noch bedingt gültig. Extern geladene JS (Google-CDN) haben zu geringe Caching-Zeiten. “…jquery/1.7.1/…” hat z.B. längere Caching-Zeiten als “…jquery/1.7/…”, also u.U. lieber selbst hosten (geht auch über eine eigene Subdomain) und DNS-Request sparen.

  4. Kevin sagt:

    Super, danke! Gerade nochmals soweit alles optimiert, was ich optimieren konnte. Score 90. Musste allerdings mod_expires in meinem Apache nachladen, ansonsten gibt es natürlich einen Fehler 500 (bei htaccess Angaben ohne das nötige Modul).

    Grüße!

  5. Seo Andy sagt:

    Und wieso hat jetzt eure Seite wieder einen Wert von 62% ? Habt ihr die Verbesserungen wieder Rückgängig gemacht?
    http://gtmetrix.com/reports/blog.marit.ag/FWw0bSJf

  6. Ok, sorry war mein Fehler. Ich habe den Blog getestet und nicht eure Hauptseite marit.ag aber schaut mal nach bei Gtmetrix da ist noch weit Luft nach oben. Und ich würde auch mal sehr stark behaupten das bei eurem Server oder Eurer Webseite irgendetwas nicht stimmt. Ihr habt mit einer Webseitengröße von Gesamt: von knapp 400 KB eine Ladezeit von ca. 4-7 Sekunden. Was schon sehr sehr langsam ist. Ich habe Joomla Webseiten die haben das dreifache an Größe sind aber schneller als Eure. Was ist das Problem? Ich frage dehalb so genau da ich eigentlich Typo3 erlernen wollte und danach gegoogelt habe ob wie man Typo3 sehr gut nach Google Page Speed optimieren kann. Aber trotz eines PS von 95% habt ihr leider eine miserable Ladezeit. Getestet habe ich das mit pingdom Standort Niederlande, pagespeed.de und gtmetrix.

    Vielen Dank für die Aufklärung!

Add Comment Register



Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>