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.