Page-Speed Optimierung

Schritt 1: .htaccess

Folgende Module müssen am Apache-Webserver aktiviert sein:

  • mod_deflate
  • mod_filter
  • mod_expires
  • mod_headers

Ein Beispiel für die .htaccess Konfiguration können Sie hier downloaden. Die .htaccess wird in Contao 4 in /web/ abgelegt.

Schritt 2: Cache Einstellungen

Den Seitencache in den Seiteneinstellungen aktivieren:

Seitenstruktur > Root-Seite (Seitentyp: Startpunkt einer Webseite) bearbeiten > Cache Einstellungen > Cachezeiten festlegen

Schritt 3: Skripte und Markup komprimieren

System > Einstellungen > Skripte und Markup komprimieren > Markup komprimieren & Skripte komprimieren aktivieren

Info: Diese Einstellung wurde in Contao 4.9 entfernt.

Schritt 4: PageSpeed Optimierung aktivieren

1. SEO-Helper aktivieren

Contao Einstellungen > SEO Helfer - Einstellungen > Auslieferung von Daten nach Server-Protokoll:

  • auto (erkennt automatisch das Protokoll)
  • http1 (komprimiert alle Scripte inkl. Scripte aller PCT Module)
  • http2 (komprimiert keine Scripte)

2. Aktivieren des Nativ-Lazy-Loading für <img>

Contao Einstellungen > SEO Helfer - Einstellungen > "loading"-Attribut Einstellung:

  • auto (empfohlen)
  • eager
  • lazy

Hinweis http1: folgende Dateien werden mit Hilfe des Combiners zusammengefasst:

  • framework.css
  • customelements.css
  • customcatalog.css
  • styles.css
  • scripts.js

Bei Änderungen an diesen Files muss nach jeder Änderung der Contao Cache geleert werden. Aus diesem Grund ist empfohlen während der Entwicklungszeit die PageSpeed-Optimierung zu deaktivieren.

Schritt 5: Google Fonts lokal einbinden

Es wird empfohlen Google Fonts lokal einzubinden. Eine Anleitung finden Sie hier.

Schritt 6: Responsive Images

Mit Hilfe von responsive Images können Bilder sowie Hintergrundbilder in unterschiedlichen Größen je nach Endgerät ausgegeben werden. Eine Anleitung finden Sie hier.

Schritt 7: Testen

Erfahrungsgemäß bringen Onlinedienste wie PageSpeed Insights sehr sprunghafte und unzuverlässige Testwerte. Wir empfehlen für einen Pagespeedtest die Audit-Funktion bzw. Lighthouse in Google Chrome. Dieser Test basiert auf der selben Lighthouse-Technologie wie PageSpeed Insights, liefert aber zuverlässigere Werte.