Contao 4.4 - Pagespeed-Optimierung

Diese Anleitung löst einen großen Teil der Probleme, die Google für eine hervorragende Pagespeed fordert.

Um Ihre aktuelle Pagespeed zu ermitteln, hat Google ein Tool entwickelt: https://developers.google.com/speed/pagespeed/insights/

Contao Backend-Einstellungen

Im Menüpunkt System/Einstellungen finden Sie zwei Optionen zum Anhaken. Zum einen soll das HTML-Markup vor dem Senden an den Browser komprimiert werden. Zum anderen sollen auch die CSS- und Javascript-Dateien mit mod_deflate in der .HTACCESS automatisch so klein wie möglich gemacht werden. Die Checkbox „Skripte komprimieren“ kann dann unangehakt bleiben.

Wird auf diesem Server mod_deflate nicht unterstützt, wird eine GZIP-Komprimierung als Alternative empfohlen. Dazu dann hier „Skripte komprimieren“ anhaken und Änderungen in der .HTACCESS beachten.

Im Contao-Menü Layout/Themes/Seitenlayout gibt es eine Einstellung, die für das HTTP-Protokoll zuständig ist. Läuft Ihr Server noch unter HTTP1.1, so aktivieren Sie diese Checkbox. Unterstützt der Server bereits HTTP/2, dann ist diese Checkbox nicht zu aktivieren.

Um zu prüfen, ob Ihr Server HTTP/2 unterstützt, googeln Sie eines der Test-Tools. Ich hatte mich für Keycdn entschieden – macht, was es soll und ist einfach zu bedienen: https://tools.keycdn.com/http2-test

.HTACCESS-Einstellungen

Google Pagespeed bemängelt, dass keine Komprimierung aktiviert ist:
Durch die Komprimierung der Ressourcen mit „gzip“ oder „deflate“ kann die Anzahl der über das Netzwerk gesendeten Bytes reduziert werden.

Um an diese Einstellungen zu kommen, benötigen Sie einen FTP-/SFTP- oder SSH-Zugang zu Ihren Dateien auf dem Server.

Die .HTACCESS-Datei ist unter „/web“ zu finden, dem Verzeichnis, das Sie in Ihren Domaineinstellungen (Domain verweist i.d.R. auf dieses Verzeichnis) für das Web freigegeben haben. Die Code-Zeilen habe ich aus der .HTACCESS einer Contao3.5-Version übernommen.

Komprimierung aktivieren:

<IfModule mod_deflate.c>
 #<IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
  #</IfModule>
</IfModule>

Die Zeilen um <IfModule mod_filter.c> können einkommentiert werden, wenn der Server dieser Erweiterung unterstützt. Einfach die # am Zeilenanfang entfernen und Website testen. Die Änderungen an der .HTACCESS können Fehler 500 (interner Serverfehler) hervorrufen, bitte testen und ggf. Änderungen wieder rückgängig machen.

Sollte auf dem Server die Apache-Erweiterung mod_deflate nicht nutzbar sein, geht auch die Alternative mit GZIP:

AddEncoding gzip .gz
<FilesMatch "\.js\.gz$">
AddType "application/javascript" .gz
</FilesMatch>
<FilesMatch "\.css\.gz$">
AddType "text/css" .gz
</FilesMatch>
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

Browser-Caching nutzen
Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.

Um den Dateien, die gecached werden sollen, ein Ablaufdatum zu verpassen, ist folgender Code hilfreich – fügen Sie ihn ebenfalls in die .HTACCESS ein:

# Set cache-control
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 2 days"
        ExpiresByType text/html "access plus 6 hours"
        ExpiresByType image/gif "access plus 3 months"
        ExpiresByType image/jpeg "access plus 3 months"
        ExpiresByType image/jpg "access plus 3 months"
        ExpiresByType image/png "access plus 3 months"
        ExpiresByType image/x-png "access plus 3 months"
        ExpiresByType text/css "access plus 8 days"
        ExpiresByType text/javascript "access plus 7 days"
        ExpiresByType application/x-javascript "access plus 7 days"
        ExpiresByType application/javascript "access plus 7 days"
        ExpiresByType image/x-icon "access plus 3 months"
    </IfModule>

OBACHT! Die .HTACCESS Einstellungen können (beim Safari) in der Entwicklungsphase dazu führen, dass nicht die aktuellen internen Contao-CSS-Anweisungen (trotz Cache löschen) geladen werden! Aktivieren Sie die Komprimierung und den Browsercache nur für den Live-Betrieb.

Contao: Bildgrößen und JPEG-Qualität

Google beanstandet gerne die Bildgrößen und Bildkomprimierungen.

Durch die Komprimierung und Größenanpassung von https://www.ihredomain.com/files......./portrait_521608615_bea.jpg könnten 51,3 KB (88 %) eingespart werden.

Hier muss zwischen zwei Optimierungsmaßnahmen unterschieden werden:

Komprimierung: Früher musste man Bilder schon vor dem Upload auf die Website optimieren. Contao bietet hierfür inzwischen Erweiterungen, die ein gutes Komprimierungsresultat „out of the box“ liefern. Dienste wie z.B. tinypng erledigen das für Sie, in gewissem Maße auch kostenlos. Die Erweiterung, die Ihre Bilder beim Upload in Contao mit tinypng komprimiert, ist von Christian Barkowsky und mit dem Contao-Manager oder manuell zu installieren.
Größenanpassung: Ihre Bilder sind im Inhaltselement im Contao-Backend nicht mit einer Größenangabe versehen oder nicht responsive (für unterschiedliche Bildschirmgrößen) unter dem Menüpunkt Layout/Bildergrößen angelegt. Diese Einstellung kann man nicht automatisiert abfangen. Kontrollieren Sie, wie Ihre Bilder auf der Website eingebunden sind und geben Sie eine möglichst genaue Bildgröße an. Nur so kann Contao automatisch eine gecachte und optimal komprimierte Version Ihrer Bilder an den Browser ausliefern.

In Contao 3.5 gab es noch eine Einstellung für die JPEG-Qualität, mit der das System die Bilder an den Browser ausliefert. In Contao 4.4 ist diese in eine config-Datei ausgegliedert. Diese finden Sie per FTP-/SFTP- oder SSH unter /app/config/config.yml. Falls diese Datei noch nicht existiert, legen Sie sie einfach neu an. Danke an Contao.ninja für diesen und weitere wertvolle Tipps.

# Contao configuration 
contao:
   image:
      imagine_options:
         jpeg_quality: 75

OBACHT! Der Text in dieser Datei darf keine Tabs enthalten! Bei mir spielten das System und der Cache ziemlich verrückt, bis ich herausfand, dass mein Server oder Contao keine Tabs in dieser Systemdatei mag.

Die Einstellung auf 75 ergab bei mir ein gutes Mittelmaß zwischen Qualität und Dateigröße. Die Skala reicht von 0-100. Testen Sie selbst, welche Qualität Sie für Ihr Projekt nutzen möchten. Nach jeder Umstellung den Cache löschen nicht vergessen!

Sichtbare Inhalte priorisieren

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen.

Diese Google-Forderung ist entweder mit Handarbeit zu machen oder mit node.js (gulp/grunt), wer sich damit auskennt. Wir haben uns für die Handarbeit entschieden. Es gilt also das CSS zu sortieren. Die CSS-Anweisungen, die nötig sind, um den Inhalt der Website anzuzeigen, der ohne zu scrollen sichtbar ist, sollen im <head>-Bereich geladen werden, alle weiteren Javascript- und CSS-Anweisungen werden am Ende des HTML-Codes vor dem </body> Tag platziert.

Und so geht es:

1. CSS-Stylesheets vorbereiten

Neues Stylesheet unter dem Menüpunkt Layout/Themes/Stylesheets anlegen und „pagespeed“ nennen.
CSS-Anweisungen für das Grundlayout der Website aus den vorhandenen Stylesheets in das neue Stylesheet „pagespeed“ verschieben.
Stylesheet „pagespeed“ vorerst in das Seitenlayout einbinden.

Die Website muss jetzt noch genauso aussehen wie vorher. Wir haben ja lediglich die CSS-Anweisungen in ein eigenes Stylesheet ausgegliedert.

2. Komprimierte CSS-Stylesheets als Text herauskopieren:

Lassen Sie sich die Stylesheets einzeln auf der Website ausgeben, indem Sie im Seitenlayout die Option „Skripte zusammenfassen“ nicht aktivieren.
Wenn Sie die Website im Chrome „untersuchen“ oder im Safari „Element Informationen“ per rechter Maustaste aufrufen, werden Ihnen verschiedene Tabs angezeigt. Wir benötigen im Chrome den Reiter „Sources“ und im Safari den Reiter „Ressourcen“.
Suchen Sie sich die Stylesheets „reset.min.css“, „layout.min.css“ und Ihr neues „pagespeed.css“ heraus und kopieren Sie die CSS-Inhalte untereinander in eine Textdatei.

Stylesheets Contao Seitenlayout wieder deaktivieren

3. Interne Stylesheets im Seitenlayout wieder deaktiveren:

Nachdem Sie die Stylesheets ausgegliedert haben, müssen Sie die „CSS-Reset“ und die „pagespeed“ wieder im Seitenlayout deaktivieren, sonst werden die CSS-Anweisungen doppelt geladen!

Screenshot von der FE_PAGE - Anfang der Datei

4. Contao-Template „fe_page“ umbauen:

Unter dem Menüpunkt Layout/Templates findet sich das Template „fe_page“ – falls nicht, klicken Sie bitte rechts oben „Neues Template“ und laden Sie sich das Grundlayout in die Liste.
Editieren Sie das Template und kopieren Sie den Inhalt der Textdatei in <style>-Tags in den <head>-Bereich.

Screenshot von der FE_PAGE - Ende der Datei

Die folgenden PHP-Platzhalter wandern nun an das Ende der „fe_page“:
<?= $this->framework ?>
<?= $this->stylesheets ?>
<?= $this->mooScripts ?>
<?= $this->head ?>

5. Testen

Löschen Sie den Cache und prüfen Sie Ihre Seite auf volle Funktionalität. Je nachdem, welche Erweiterungen Sie in Betrieb haben, kann es sein, dass Slider, Animationen und andere Javascripte nicht mehr sauber laufen.

Tipp: Achten Sie darauf, dass die Bibliothek von jQuery als eine der ersten Javascript-Dateien geladen wird.

<script src="assets/jquery/js/jquery.min.js"></script>

Viele Erweiterungen benötigen diese Bibliothek und bauen darauf auf.

Fazit

Mit diesen Einstellungen sollten Sie auf jeden Fall im grünen Bereich sein, also über die 85/100-Marke kommen. Je nach Website und Serverausstattung kann hier auch schon die volle 100/100 erreicht werden.

Bei mir bleiben Google-Scripte von Analytics und Maps in der Pagespeed-Liste übrig. Leider bemängelt Google für den eigenen Analytics Code auch eine fehlende Komprimierung. Zur vollen Optimierung müsste man den Analytics Code lokal speichern und regelmäßig prüfen, ob der Code so noch aktuell ist. Entsprechende Anleitungen findet Google für Sie.

Die Google Pagespeed ist ein wichtiger Erfolgsfaktor für Ihre Suchmaschinen-Optimierung. Welche Faktoren für Google noch wichtig sind, haben wir mit unserem „SEO-Periodensystem“ für Sie aufbereitet.

Zurück

Kommentare

Kommentar von Timo Banaszak | 24.04.2018

Super Artikel,

falls jemand SVG-Dateien verwendet könnte folgende Zeile für das Browser-Caching interessant sein:

ExpiresByType image/svg+xml "access plus 3 months"

Grüße
Timo Banaszak
Agentur Meilenstein

Kommentar von Phil | 13.10.2021

toller Artikel, allerdings werden dadurch auch die Sprachangaben (alternate hreflang) aus dem header entfernt und da gehören sie eigentlich hin. Wie bekommt man die wieder nach oben ?

Schlne Grüße
Phil

Antwort von Kai Dold

Hi, Du kannst die Zeile/n zu einfach nach Wunsch in der „fe_page.htm5“ ergänzen. Contao ist da sehr direkt und pragmatisch. Alternativ kannst Du Meta Tags in Themes > Seitenlayout ergänzen, bei „Zusätzliche <head>-Tags“.