Contao-News

Spätestens seit Google angekündigt hat, dass die Geschwindigkeit einer Webseite eines der Kriterien für ihren Page Rank ist, achten die Leute verstärkt darauf, Ihre Seiten diesbezüglich zu optimieren. Dieser Artikel zeigt, wie sich Contao "tunen" lässt, um einen hohen Page Speed Score zu erhalten.

Normale Webseiten im Fokus

Ich gehe davon aus, dass die meisten Nutzer Contao auf einem Shared-Hosting-Account installiert haben, daher werde ich nicht von Load Balancern, Content Delivery Netzwerken oder Op-Code-Caches anfangen, die zwar sicherlich zur Optimierung der Geschwindigkeit einer Seite geeignet, aber für normale Webseiten wohl etwas überdimensioniert sind. Uns interessiert vielmehr, bis zu welchem Grad sich der Page Speed Score mit den Bordmitteln von Contao und ein paar kleinen .htaccess-Tricks (damit ist die Nutzung von Apache-Funktionen wie z.B. mod_rewrite gemeint) verbessern lässt.

Was dazu gebraucht wird

Prinzipiell nur zwei Dinge: Firefox mit dem Firebug- und dem Google Page Speed-Plugin und ein Apache-Server, der mod_deflate, mod_headers, mod_expires und mod_rewrite unterstützt. Falls Ihr Server diese Voraussetzungen nicht erfüllt, sollten Sie mal einen Blick auf die Hostingwerk-Pakete oder die Contao Hosting-Partner werfen.

Über das perfekte Ergebnis

Ein optimaler Page Speed Score wäre 100 von 100 Punkten, aber selbst Google erzielt lediglich 96 Punkte. Das liegt daran, dass nicht alle Vorschläge Sinn machen und sich in der Praxis umsetzen lassen. So findet sich z.B. ein "use efficient CSS selectors"-Hinweis auf google.com und auch auf contao.org und wahrscheinlich auch auf Ihrer Webseite. #mainmenu li.active span sieht für eine Maschine zweifelsohne wie ein ineffizienter Selektor aus, aber wie erklärt man einem Computer nun, dass es wichtiger ist, dass das CSS-Drop-Down-Menü auch tatsächlich in allen Browsern funktioniert, als dass man immer den effizientesten Selektor verwendet? Sie sollen natürlich stets versuchen, beides zu erreichen, aber es ist wichtig zu verstehen, warum Sie das in der Mehrzahl der Fälle nicht werden.

Einstellungen im Contao-Backend

Im Abschnitt "Globale Konfiguration" in den Backend-Einstellungen sollten Sie die GZip-Kompression ak­ti­vier­en, damit Contao die Seiten komprimiert bevor sie an den Browser geschickt werden. Und wenn Sie schon in den Backend-Einstellungen sind, sollten Sie auch das Umschreiben von URLs einschalten. Das ist zwar für die Geschwindigkeit nicht relevant, wird den Page Rank aber erheblich verbessern.

Wechseln Sie danach zum Theme-Manager und bearbeiten Sie Ihre Seitenlayouts. Im Abschnitt "Stylesheets" finden Sie ein wichtiges neues Feature namens "Stylesheets zusammenfassen", das in Contao 2.9 hin­zu­ge­fügt wurde. Es sorgt dafür, dass alle Stylesheets in einer einzigen Datei zusammengefasst werden, was die Ladezeit Ihrer Webseite deutlich verbessert - vor allem wenn Sie viele Stylesheets haben. Aktivieren Sie außerdem die Option "files/tinymce.css ignorieren" sofern Sie das TinyMCE-Stylesheet nicht nutzen.

Eine andere wichtige Tuning-Möglichkeit versteckt sich im Abschnitt "Experten-Einstellungen". Suchen Sie dort nach dem Punkt "MooTools-Quelle" und wählen Sie die Option "Von googleapis.com laden". Contao wird das MooTools Core-Skript dann vom Google CDN anstatt von Ihrem Server laden.

Das ist alles, was Sie im Contao-Backend tun müssen. Jetzt ist die Apache-Konfiguration an der Reihe.

Die Apache-Konfiguration tunen

Der einfachste Weg, die Apache-Konfiguration zu bearbeiten, ist eine .htaccess-Datei. Sie finden den nach­fol­gend beschriebenen Code in der Datei .htaccess.default von Contao 2.9.1. Benennen Sie die Datei aber nicht einfach nur um, sondern lesen Sie sich die Standardeinstellungen durch und passen Sie sie gegebenenfalls an Ihre Bedürfnisse an.

Kompression aktivieren

Sie haben die Kompression für PHP-Dateien schon im Contao-Backend eingeschaltet, daher muss sich der Apache nur noch um CSS-, JavaScript- und XML-Dateien kümmern. Dazu verwenden wir mod_deflate.

Einen Vary: Accept-Encoding Header senden

Proxy-Cache-Server sollten immer sowohl die unkomprimierte als auch die komprimierte Version einer Datei speichern, weil einige Clients keine GZip-komprimierten Dateien akzeptieren. Leider tun das viele nicht, wenn kein Vary: Accept-Encoding Header gesendet wird. Wir werden daher mit Hilfe von mod_headers einen solchen hinzufügen.

Den Browser-Cache steuern

Google Page Speed empfiehlt das Setzen eines Verfallsdatums von einer Woche in der Zukunft für Bilder, JavaScripts und CSS-Dateien, damit der Browser diese aus seinem Speicher und nicht über das Netz lädt. Das lässt sich mit mod_expires einfach erreichen.

Die 90-Prozent-Hürde überwinden

Bisher hat unser Tuning den Page Speed Score von contao.org auf 86 von 100 Punkte verbessert.

Wie oben bereits erklärt, ist es jedoch nicht möglich, effizientere CSS-Selektoren auf contao.org zu verwenden oder die vier nicht genutzten Formatdefinitionen für die linke Spalte und die eigenen Layoutbereiche aus dem Stylesheet des CSS-Framework zu entfernen. Zudem haben wir die Anzahl der CSS- und JavaScript-Dateien bereits in so wenig wie möglich Dateien zusammengefasst, also bleiben zur weiteren Verbesserung des Page Speed Score nur die Optionen, die Downloads auf mehrere Hostnamen zu verteilen und statische Ressourcen von einer Domains ohne Cookies zu laden. Beides klingt verdächtig nach der Nutzung eines Content Delivery Netzwerks, was für contao.org eindeutig überdimensioniert wäre.

Genau genommen verlangt Google aber nicht, dass wir ein CDN nutzen. Es verlangt nicht einmal, dass wir einen anderen Hostnamen verwenden, sondern lediglich eine "Domain ohne Cookies", was genauso gut eine Subdomain der Hauptdomain sein kann. Ich habe daher im Server Control Panel die Domains "st1.contao.org", "st2.contao.org" und "st3.contao.org" angelegt, die alle auf dasselbe Verzeichnis zeigen wie "www.contao.org". Um doppelte Inhalte zu vermeiden, habe ich folgende Zeilen in die .htaccess-Datei eingefügt:

Dank des obigen Codes ist es nicht möglich, PHP- und HTML-Dateien über die Subdomains abzurufen, sehr wohl aber statische Dateien wie Stylesheets, Bilder oder PDFs. Und die Domains kommen ohne Cookies aus, ganz wie Google es verlangt. Außer …

Google Analytics fährt uns in die Parade

Google Analytics-Cookies gelten standardmäßig für eine Domain und alle ihre Subdomains (in unserem Fall ".contao.org"). Das beinhaltet natürlich auch unsere statischen Domains "st[1-3].contao.org". Zum Glück lässt sich dieses Verhalten im moo_analytics-Template anpassen.

Die Subdomains in Contao nutzen

Dieser Teil ist tatsächlich der Knackpunkt unseres kleinen "Hacks". Auf contao.org habe ich das Problem durch das Hinzufügen eines einfachen Output-Filters gelöst, der den outputFrontendTemplate-Hook verwendet. Sollte sich die Maßnahme bewähren, werden wir sie eventuell als Feature in Contao 2.10 hinzufügen. Für den Moment müssen Sie jedoch mit dem Hook Vorlieb nehmen.

Die Früchte unserer Arbeit ernten

Nachdem der Output-Filter aktiviert wurde, hat sich der Page Speed Score dieser Seite (die, die Sie im Moment lesen) auf 96 von 100 Punkten verbessert. Die Startseite auf contao.org erzielt einen etwas kleineren Wert, weil die meisten Bilder und Icons über CSS eingebunden sind und deswegen über dieselbe Subdomain geladen werden wie das Stylesheet selbst (st2 anstatt st1). Das könnte man jedoch durch die Verwendung absoluter URLs in den Stylesheets beheben.

Selbstverständlich reduziert diese Tuning-Maßnahme nicht die Anzahl der Anfragen, die an Ihren Server ge­sen­det werden, und ist deswegen nicht geeignet, um die Server-Load oder das Transfervolumen zu re­du­zie­ren. Sie dient lediglich der Optimierung der Geschwindigkeit - und das mit Erfolg :)