Core Web Vitals & TYPO3: So wird Ihre Website zum Google-Liebling

Was hat Google jetzt schon wieder vor?

1. Largest Contentful Paint (LCP) – Wann ist der Hauptinhalt sichtbar?

Was misst LCP?
LCP gibt an, wie lange es dauert, bis der größte sichtbare Inhalt auf Ihrer Seite vollständig geladen ist. Das kann ein großes Bild, ein Video oder ein Textblock sein – also das, was dem Besucher als Erstes ins Auge springt.

Warum ist das wichtig?
Weil Besucher ungeduldig sind. Wenn der Hauptinhalt erst nach 4 Sekunden kommt, ist der erste Eindruck schon ruiniert – und Google merkt das.

Wie kann man den LCP verbessern?

• Große Bilder komprimieren und passend ausliefern (am besten responsive Bilder mit TYPO3 Image Rendering).
• Kritische Inhalte möglichst weit oben im Quellcode platzieren.
• Servergeschwindigkeit optimieren (z. B. über Caching und HTTP/2).
• Third-Party-Skripte so spät wie möglich laden (z. B. Tracking erst nachher).

TYPO3-Tipp:
Nutzen Sie das Bild-Cropping in TYPO3 gezielt für mobile Formate und aktivieren Sie „lazy loading“ nur für untere Inhalte – der LCP braucht ein sofort sichtbares Bild oder Textblock, nicht ein eingeblendetes Menü.

2. First Input Delay (FID) – Wie schnell reagiert die Seite auf Eingaben?

Was misst FID?
FID misst die Zeit zwischen der ersten Nutzerinteraktion (z. B. ein Klick oder ein Tastenanschlag) und dem Moment, wo der Browser darauf reagieren kann.

Warum ist das wichtig?
Eine Seite, die scheinbar da ist, aber nicht auf Klicks reagiert, wirkt langsam und „kaputt“. Für Google heißt das: schlechte Nutzererfahrung.

Wie kann man FID verbessern?

• JavaScript so klein wie möglich halten und aufteilen („code splitting“).
• Unwichtige Skripte erst später laden (Stichwort: defer / async).
• Lange „Main-Thread“-Blockaden vermeiden (z. B. durch schlankere Extensions).

TYPO3-Tipp:
Vermeiden Sie „fette“ Frontend-Frameworks, die alles blockieren, und prüfen Sie Ihre TypoScript-Templates und JS-Bundles auf unnötigen Ballast.

3. Cumulative Layout Shift (CLS) – Wackelt das Layout beim Laden?

Was misst CLS?
CLS bewertet, wie stark sich das Layout beim Laden verschiebt. Klassisches Beispiel: Sie wollen auf einen Button klicken, und plötzlich rutscht ein Werbebanner dazwischen. Nervig, oder?

Warum ist das wichtig?
Weil unerwartete Layout-Verschiebungen die Nutzer irritieren – und bei Google zu Minuspunkten führen.

Wie kann man CLS verbessern?

• Feste Größen für Bilder und Werbebanner definieren.
• Webfonts richtig einbinden (Font Display: Swap).
• Keine nachträglichen DOM-Manipulationen ohne Platzhalter.
• Keine Slider oder sonstigen Bewegungen, die sofort mit Seitenstart geladen werden müssen.

TYPO3-Tipp:
Achten Sie in Ihren Fluid-Templates darauf, Bildelemente immer mit festen Höhen und Breiten einzubauen. Auch bei eingebetteten YouTube-Videos oder iFrames gilt: feste Größen statt Überraschungspakete.

TYPO3 kann das – wenn man weiß, wie

TYPO3 ist ein echtes Power-CMS. Aber es stimmt: Von Haus aus ist es eher auf Stabilität als auf pure Geschwindigkeit optimiert. Das Gute ist – mit der richtigen Konfiguration wird Ihre Seite nicht nur solide, sondern auch richtig schnell.

Was TYPO3 stark macht: Es bringt viele Funktionen bereits mit, die helfen, die Core Web Vitals zu verbessern. Dazu gehören etwa Responsive Images, Lazy Loading, und clevere Caching-Mechanismen. Aber: Diese Tools müssen richtig eingesetzt und sauber konfiguriert werden. Und genau da kommen wir mit Suchmaschinenoptimierung ins Spiel.

Die typischen Bremsen – und wie wir sie lösen

Hier ein paar Klassiker, die wir regelmäßig bei TYPO3-Projekten sehen – und optimieren:

• Bilder sind zu groß oder nicht für mobile Geräte vorbereitet.
• JavaScript-Dateien werden unkomprimiert geladen.
• Caching ist falsch oder gar nicht eingerichtet.
• Das Template ist nicht für Performance gebaut.

Mit gezielten Maßnahmen – wie Bildkomprimierung, CSS-Minimierung, Ladezeit-Optimierung und Server-Tuning – holen wir das Beste aus Ihrer TYPO3-Website raus.