Contao Performance optimieren: Der Speed-Guide für das CMS

Wenn Sie Contao als CMS gewählt haben, haben Sie bereits die erste gute Entscheidung getroffen. Dank der modernen Architektur und dem zugrundeliegenden Symfony-Framework ist Contao von Haus aus deutlich schlanker als viele Konkurrenten. Doch auch der beste Motor stottert, wenn er falsch eingestellt ist.

Viele Website-Betreiber übersehen, dass das System ab Werk oft eher auf "Kompatibilität" als auf "Höchstgeschwindigkeit" eingestellt ist. Wenn wir die Contao Performance optimieren wollen, müssen wir tiefer in die Konfiguration eintauchen. Es geht hier nicht um Plugins, die man blind installiert, sondern um die clevere Nutzung der mächtigen Bordmittel, die das CMS bereits mitbringt. In diesem Guide schauen wir uns die drei wichtigsten Hebel an: Caching, Medien-Handling und System-Tuning.

Bild mit KI generiert.

1. Caching: Den Symfony-Turbo einschalten

In Teil 5 unserer Serie haben wir gelernt, wie wichtig der Server (TTFB) ist. Contao hat hier ein geniales Feature: Den internen HTTP-Cache. Wenn dieser aktiv ist, muss Contao die Seite nicht mehr aus der Datenbank zusammenbauen, sondern liefert sie direkt als statisches HTML aus. Das senkt die Antwortzeit drastisch.

So aktivieren Sie den Cache richtig:

1. Im Seitenbaum (Startpunkt): Gehen Sie in die Einstellungen des "Startpunkts einer Website". Setzen Sie die "Cache-Zeit (TTL)" auf mindestens 24 Stunden (86400 Sekunden).

2. Einzelne Seiten: Sie können (und sollten) für dynamische Seiten (z.B. Warenkorb oder Kontaktformular) den Cache individuell deaktivieren, damit nichts veraltet.

3. Such-Indexierung: Stellen Sie sicher, dass der Suchindex im Hintergrund mitläuft, damit der Cache automatisch neu aufgebaut wird.

Praxis-Tipp: Nutzen Sie den Contao Manager, um nach großen Updates den "Anwendungs-Cache" (Symfony Cache) einmal komplett zu leeren und neu aufzuwärmen.

Bild mit KI generiert.

2. Praxis-Tutorial: Das perfekte Responsive Image in Contao

Viele Contao-Nutzer lassen das Modul "Bildgrößen" links liegen, weil es komplex wirkt. Doch genau hier liegt das größte Performance-Gold vergraben.

Das Problem in der Praxis: Wir haben eine Blog-Übersicht. Auf dem Desktop (großer Monitor) zeigen wir drei Beiträge nebeneinander (3-Spalter). Das Bild ist dort ca. 400px breit. Auf dem Smartphone brechen wir das Layout um. Die Beiträge stehen untereinander (1-Spalter). Das Bild füllt die ganze Breite des Handys aus und muss plötzlich 750px breit sein.

Wenn wir keine Contao-Bildgröße definieren, lädt das Smartphone das kleine 400px-Desktopbild und skaliert es hässlich und unscharf hoch. Hier ist die exakte 1:1 Anleitung, wie Sie das in Contao 5 (und 4.13) perfekt lösen:

Schritt 1: Die Basis-Größe (Für den Desktop)

Gehen Sie im Backend auf Layout > Bildgrößen und erstellen Sie eine neue Größe:

• Titel: Blog Teaser (16:9)

• Breite: 400

• Höhe: 225 (Das ergibt ein exaktes 16:9 Format)

• Größenanpassungsmodus: Exaktes Format (Contao schneidet zu große Bilder automatisch passend zu, Redakteure müssen nichts vorab bearbeiten)

• Pixeldichte (Zoom): 1x, 2x (Ganz wichtig! Contao generiert automatisch eine 800px-Version für hochauflösende Retina-Displays)

• Format konvertieren: WebP (Spart ca. 30% Dateigröße)

• Lazy Loading: Aktiviert (Da die Liste oft weiter unten auf der Seite ist)

Schritt 2: Die Tablet-Größe (Zusätzliche Größen)

Klicken Sie nun oben rechts auf "Zusätzliche Größen verwalten" und fügen Sie einen neuen Media-Query hinzu:

• Media-Query: (min-width: 768px) and (max-width: 1023px) (Tablets)

• Breite: 360

• Höhe: 202

• Größenanpassungsmodus: Exaktes Format

Schritt 3: Die Mobile-Größe (Der entscheidende Trick)

Fügen Sie einen weiteren Media-Query für Smartphones hinzu:

• Media-Query: (max-width: 767px) (Mobile)

• Breite: 750 (Hier ist das Bild größer als auf dem Desktop!)

• Höhe: 422

• Größenanpassungsmodus: Exaktes Format

• Pixeldichte: 1x, 2x

Was passiert nun unter der Haube (Der HTML-Code)?

Wenn Sie diese Bildgröße nun im News-Modul auswählen, generiert Contao ein hochmodernes <picture>-Element. Der Redakteur lädt ein 5 MB großes Originalbild hoch, und Contao macht das hier daraus:

1<picture>
2  <source srcset=".../​blog-mobile.webp 1x, .../​blog-mobile@2x.webp 2x" media="(max-width: 767px)" type="image/​webp">
3
4  <source srcset=".../​blog-tablet.webp 1x, .../​blog-tablet@2x.webp 2x" media="(min-width: 768px) and (max-width: 1023px)" type="image/​webp">
5
6  <img src=".../​blog-desktop.webp" srcset=".../​blog-desktop@2x.webp 2x" width="400" height="225" loading="lazy" alt="Mein Blogpost">
7</​picture>

Das Ergebnis:

1. Der CLS-Wert (Layout-Stabilität) ist perfekt, weil Breite und Höhe feststehen.

2. Der LCP-Wert (Ladezeit) auf dem Handy ist exzellent, weil das iPhone kein 4K-Bild mehr herunterladen muss, sondern die exakt zugeschnittene Mobile-Version bekommt.

3. Der Redakteur hat 0% Mehraufwand.

Profi-Tipp: Wenn der Speicherplatz auf Ihrem Server knapp ist, aktivieren Sie in den Contao-Einstellungen die Option Deferred Image Resizing. Dann werden diese verschiedenen Bildgrößen erst bei Bedarf berechnet, wenn der erste Besucher die Seite aufruft, und nicht alle sofort beim Upload.

Bild mit KI generiert.

3. System-Tuning: Den Ballast abwerfen

Contao ist sehr sauber programmiert, aber im Laufe der Zeit sammeln sich Daten an. Hier sind die besten Quick-Wins im Backend:

• Skripte zusammenfassen (Minification): In den Layout-Einstellungen gibt es Checkboxen für "Skripte zusammenfassen" und "Stylesheets zusammenfassen". Aktivieren Sie diese unbedingt! Contao macht dann aus 10 kleinen CSS-Dateien eine einzige komprimierte Datei.

• Systemwartung: Gehen Sie regelmäßig auf Systemwartung. Leeren Sie die Tabelle tl_log (System-Log) und tl_version (Versionen). Eine riesige Versionstabelle bremst die Datenbank aus.

• PHP-Version checken: Contao 5 liebt aktuelles PHP. Stellen Sie beim Hoster sicher, dass Sie mindestens PHP 8.1 oder besser 8.2 nutzen. Das alleine macht das System oft um 20% schneller.

Bild mit KI generiert.

4. Profi-Level: Die Apache-Konfiguration tunen (.htaccess)

Das beste Contao-Setup nützt nichts, wenn der Apache-Webserver die Daten ungeschickt an den Browser schickt. In der Standard-Installation bringt Contao eine .htaccess-Datei im public/-Ordner mit, die bereits sehr gut vorkonfiguriert ist. Wenn Sie Ihre Contao Performance optimieren wollen, müssen Sie diese Datei öffnen und drei entscheidende Hebel aktivieren (Kommentare # entfernen).

Trick 1: Gzip & Brotli Kompression aktivieren (mod_deflate)

Textdateien (HTML, CSS, JavaScript, XML) bestehen aus viel "Luft". Der Apache-Server kann diese Dateien packen, bevor er sie sendet. Der Browser entpackt sie dann beim Nutzer. Das spart oft 70% der Datenmenge.

Suchen Sie in Ihrer .htaccess nach <IfModule mod_deflate.c> und stellen Sie sicher, dass dieser Code aktiv ist:

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

Trick 2: Den Browser-Cache steuern (mod_expires)

Google PageSpeed liebt es, wenn statische Dateien (Bilder, Schriften, JS) ein Verfallsdatum haben, das weit in der Zukunft liegt. So muss ein wiederkehrender Besucher das Logo nicht jedes Mal neu herunterladen, sondern lädt es direkt aus dem eigenen Speicher.

Suchen Sie nach dem mod_expires Block und setzen Sie großzügige Werte (mindestens einen Monat):

1<IfModule mod_expires.c>
2    ExpiresActive On
3    ExpiresByType image/​webp "access plus 1 month"
4    ExpiresByType image/​avif "access plus 1 month"
5    ExpiresByType image/​png "access plus 1 month"
6    ExpiresByType text/​css "access plus 1 month"
7    ExpiresByType application/​javascript "access plus 1 month"
8    ExpiresByType font/​woff2 "access plus 1 year"
9</​IfModule>

Trick 3: Den "Vary: Accept-Encoding" Header senden

Das ist ein technisches Detail für fortgeschrittene SEOs. Zwischen Ihrem Server und dem Besucher sitzen oft Proxy-Server (oder Caches). Diese müssen wissen, ob sie die gepackte oder die ungepackte Version einer Datei weitergeben sollen. Senden Sie mit mod_headers das richtige Signal:

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

Wichtiges Update für Contao 5 (Was Sie NICHT mehr tun sollten)

In alten Contao-Anleitungen wird oft empfohlen, "Cookie-freie Subdomains" (z.B. st1.contao.org) für Bilder einzurichten, um das Limit für gleichzeitige Downloads zu umgehen. Tun Sie das heute nicht mehr! Moderne Server nutzen das HTTP/2- oder HTTP/3-Protokoll. Diese Protokolle können hunderte Dateien gleichzeitig über eine einzige Verbindung laden (Multiplexing). Ein Aufteilen auf Subdomains (Domain-Sharding) macht Contao 5 heute sogar langsamer, da für jede Subdomain ein neuer Sicherheits-Handshake (SSL) gemacht werden muss.

Bild mit KI generiert.

Fazit: Weniger Plugins, mehr Bordmittel

Die beste Nachricht ist: Sie brauchen fast keine Drittanbieter-Tools, um die Contao Performance optimieren zu können. Im Gegensatz zu anderen CMS, wo man für jede Kleinigkeit ein "Pro"-Plugin kaufen muss, sind die stärksten Optimierungstools bei Contao bereits ab Werk integriert. Nutzen Sie den Cache, definieren Sie Bildgrößen und aktualisieren Sie PHP. Ihre Core Web Vitals werden es Ihnen danken.

Doch was passiert, wenn wir gar kein CMS mehr nutzen, sondern eine komplett individuelle High-End Web-Applikation bauen? Für die absoluten Performance-Fanatiker unter den Entwicklern gibt es eine Stufe über Contao: Laravel.