Contao-News

Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.

Contao für Google Page Speed optimieren

von

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 iNet Robots-Webpakete 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.

<IfModule mod_deflate.c>
  <FilesMatch "\.(css|js|xml)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

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.

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

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.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800
</IfModule>

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:

##
# Explicitly send a 404 header if a file on st[0-9].contao.org is not
# found. This will prevent the start page (empty URL) from being loaded.
##
RewriteCond %{HTTP_HOST} ^st[0-9]\.contao\.org [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* - [R=404,L]

##
# Do not dispatch dynamic resources via st[0-9].contao.org.
##
RewriteCond %{HTTP_HOST} ^st[0-9]\.contao\.org [NC]
RewriteCond %{REQUEST_FILENAME} \.(php|html)$
RewriteRule .* - [R=404,L]

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.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
<span style="color: #629300;">_gaq.push(['_setDomainName', 'www.contao.org']);</span>
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

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 :)

Zurück zur News-Übersicht.

Kommentare

Kommentar von Druckerei & Print-Office |

Das ist wohl die beste und vollständigste Anleitung derzeit im Web, zur Optimierung der Websitegeschwindigkeit, die ich kenne. Gratulation für diesen sehr gut geschriebenen Artikel.

Gruß,
Claudio.

Kommentar von Gaj |

Wow Leo,
Super Artikel!

Kommentar von Marc |

Die Punkte bei Page Speed sind ja gut und schön - sicherlich kann man sich daraus auch einen schönen Button bauen wie früher mal die "Valid HTML"-Buttons … Aber was brachten denn die Optimierungen konkret? Gibt es Messungen der Ladezeit vor und nach den Spielereien? Kommen mehr Besucher? Klicken sie mehr Seiten an? Also mit anderen Worten: Hat sich irgendetwas außer den Punkten bei Page Speed verändert?

Kommentar von Thomas Scholz |

Kompression geht einfacher:

AddOutputFilterByType DEFLATE text/xml application/atom+xml application/javascript

Dann sendet der Apache auch die passenden Vary-Header.

Kommentar von Tilo |

Code:

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

FileETag None

<IfModule mod_expires.c>
  ExpiresDefault A86400
  ExpiresByType image/x-icon A604800
  ExpiresByType application/x-shockwave-flash  A604800
</IfModule>

Ich ereiche jetzt mit diesen zusätzlichen Einstellungen in YSlow Level A und in GSpeed 91/100, warte noch auf die Cookieless-Domaineinstellungen. YSlow meckerte noch bei den ETags und den ExpiresHeaders sowie den favicon.ico und der cron.php. Der Sache mit der Cron.php konnte ich nicht beikommen.

There is 1 static component without a far-future expiration date. "....url/cron.php"

Gruß Tilo

Kommentar von Franz |

Um das YSlow-Etag-Problem zu lösen einfach folgendes in die htacces packen: "FileETag none" :-)

Kommentar von Tilo |

Startseitenproblem: Einmal ist die Startseite über http://domain.de und zum anderen über http://www.domain.de/index.html(.php oder /), auch start.html usw. zu erreichen. Mir stösst das immer sauer auf. Ich habe dazu folgende Regel angelegt.

Code:

RewriteCond %{QUERY_STRING} ^$
RewriteCond %{THE_REQUEST} /index\.html
RewriteRule ^index\.php http://www.domain.de/ [R=301,L]

Wahlweise muss index mit der Alias laut Startseite ausgetauscht werden.

Gruß Tilo

Kommentar von Tim |

Super Artikel, vielen Dank dafür!

Kommentar von Oliver |

Ein toller Artikel. Ich habe es damit und mit ein bisschen mehr geschafft, alle Seiten einer Webseite auf 96-98 Punkte zu bringen.

Kommentar von Eiko |

Super Artikel! Aber bei HostEurope braucht's mal wieder eine Alternativlösung, da mod_expires nicht installiert ist. Hiermit funktioniert es:

Code:

#### Alternative zu mod_expires
<IfModule mod_headers.c>
  <FilesMatch "\.(ico|pdf|js|css|gif|png|jpg|jpeg)$">
  Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
</IfModule>

Kommentar von Katarina |

Vielen Dank für die tolle Erklärung! Konnte damit in guten zehn Minuten meinen Pagespeed von 73 auf 96 verbessern!

Kommentar von Andy Pillip |

Scheinbar ist die Arbeit in Contao 2.10 bereits eingeflossen. Statt dem Hook finden sich die Einstellungen jetzt (komischerweise) im Bereich Backend-Einstellungen in den Systemeinstellungen. Die Einstellungen für Kompression, Vary: Accept-Encoding Header und Den Browser-Cache finden sich schon in der .htaccess-default. Lediglich den Teil für die Steuerung der Subdomains muss man noch einbauen.

Tausend Dank für den gelungenen Beitrag!

Kommentar von Marcus Morczinietz |

Danke für diesen Artikel!

Kommentar von Andreas |

Wer nach "aktuelleren" Tipps zum Verbessern des PageSpeed Scores sucht, wird auch bei uns fündig: https://361.de/blog/2123-contao-ladezeit-optimieren-anleitung-und-tipps.html

Kommentar von Atilla Wohllebe |

Vielen herzlichen Dank für diesen wirklich sehr umfangreichen Artikel! Ich bin mal gespannt, wie weit ich das Spiel mit meiner Website treiben kann! Beste Grüße

Einen Kommentar schreiben

Was ist die Summe aus 7 und 2?