Effektive Lösungen zur Verbesserung der Website‑Geschwindigkeit mit TYPO3

Die Optimierung der Core Web Vitals (CWV) ist entscheidend, um die Nutzererfahrung zu verbessern und bessere Platzierungen bei Suchmaschinen zu erzielen. Als Google diese Metriken im Jahr 2020 eingeführt hat, wurden Website‑Leistungen erstmals durch einheitliche Komponenten messbar. Damit erhielten Website‑Betreiber die Möglichkeit, ihre eigenen Optimierungen mit denen von Wettbewerbern zu vergleichen oder – auf größerer Ebene – CMS‑Technologien gegeneinander abzuwägen, um die Lösung zu wählen, die sowohl zu ihren Unternehmens‑anforderungen passt, als auch schnelle Benutzer­oberflächen (UIs) und Online‑Erlebnisse für ihre Besucher und Nutzer liefert. Diese Fallstudie zeigt, wie TYPO3, ein leistungsstarkes Enterprise‑CMS, durch gezielte Verbesserungen die Core Web Vitals wirksam steigert.

Lesen Sie im Blog, wie Sie das Optimum aus Ihrer TYPO3-Installation herausholen

TYPO3 ist in der Webentwicklung stets ganz vorne mit dabei und überarbeitet seine Funktionen alle 18 Monate im Rahmen des Long‑Term‑Support‑(LTS‑)Release-Zyklus. Bereits vor der Einführung der Core Web Vitals‑Metriken lieferte der Lighthouse‑Report von Google wertvolle Hinweise zur Verbesserung. Um die Core Web Vitals zu messen, gibt es bestimmte Schlüssel‑Indikatoren, auf deren Grundlage Google seine Bewertungen vornimmt.

Der Chrome UX-Bericht hebt die Verteilung der First Contentful Paint (FCP)-Zeiten über verschiedene CMS-Plattformen hervor, mit Kategorien für schnelle, durchschnittliche und langsame Ladezeiten, die die Seitengeschwindigkeit bewerten. Die Daten zeigen, dass bei den meisten CMS ein erheblicher Teil der Seiten auf dem Desktop schnell geladen wird, während die mobile Leistung im Allgemeinen hinterherhinkt, was die Bedeutung der Optimierung für die Benutzererfahrung unterstreicht. Die Daten aus dem Chrome UX-Bericht und dem HTTP-Archiv zeigen:

"Wenn man die Content-Management-Systeme (CMS) nach ihrer Beliebtheit sortiert, gibt es keine eindeutige Korrelation mit der Leistung, aber es ist trotzdem interessant, die relative Leistung der einzelnen Systeme zu sehen."

So Rick Viscomi, Co-Maintainer des HTTP-Archivs und Web DevRel bei Chrome, im August 2018.

Viscomi fährt fort: "Einige Beobachtungen:

• Drupal hat eine höhere Dichte an schnellen FCP als WordPress
• Wix, Squarespace, Joomla und WordPress haben < 25% schnelle FCP
• Alle CMS haben eine durchschnittliche FCP-Dichte (zwischen 1 und 3s) am 50. Perzentil
• TYPO3 hat die höchste Dichte an schnellen FCP".

Historisch wurden Herausforderungen im TYPO3‑Core durch Rückmeldungen der aktiven TYPO3‑Community identifiziert – so wird sichergestellt, dass Leistungsverluste prompt angegangen werden. Obwohl TYPO3 oft seine Mitbewerber übertrifft, bestehen dennoch gezielte Optimierungsbedarfe, um seine hohen Standards zu erfüllen und die Core-Web-Vitals‑Benchmarks zu übertreffen.

Die Rolle von Agenturen bei der Umsetzung des Frontends ist entscheidend: Auch wenn TYPO3 mächtige Tools bereitstellt, liegt es in der Verantwortung der implementierenden Agenturen, diese Tools effektiv zu nutzen, um die Test‑Benchmarks der Core Web Vitals zu erreichen. Die TYPO3‑Community zählt zahlreiche Agenturen mit tiefgehender Erfahrung in der Realisierung leistungsstarker und nutzerfreundlicher Frontends.

Moderne Frontend-Techniken spielen eine wichtige Rolle bei der Optimierung von Core Web Vitals. Agenturen, die TYPO3 einsetzen, können die folgenden Methoden nutzen:

• Asynchrones JavaScript-Management: Durch asynchrones Laden von JavaScript wird die Verzögerung der ersten Eingabe (First Input Delay, FID) reduziert, da kritische Ressourcen zuerst geladen werden.
• Erweiterte CSS-Techniken: Die Verwendung moderner CSS-Ansätze wie Flexbox und Grid trägt zur Verringerung der kumulativen Layout-Verschiebung (CLS) bei, indem stabile und reaktionsfähige Layouts gewährleistet werden.
• Progressive Verbesserung: Die Sicherstellung, dass die Website auch auf älteren Geräten und unter schlechten Netzwerkbedingungen gut funktioniert, verbessert die Gesamtmetriken von Core Web Vitals.

Automatisierte Bild-Optimierung:

TYPO3 zeichnet sich durch eine automatisierte Bildoptimierung aus, ein entscheidender Faktor für die Verbesserung des Largest Contentful Paint (LCP). Das Medienmanagement von TYPO3 ermöglicht die automatische Größenanpassung und Komprimierung von Bildern und sorgt so für schnelle Ladezeiten und eine reaktionsschnelle Bildwiedergabe auf verschiedenen Geräten. Diese Funktionen tragen direkt zu einer besseren LCP-Bewertung bei.

Technische und infrastrukturelle Faktoren:

Bei der Optimierung von Core Web Vitals müssen mehrere technische und umgebungsbedingte Faktoren berücksichtigt werden:

• Verwendung eines Content Delivery Network (CDN): CDNs verbessern die Ladezeiten erheblich, indem sie Inhalte von geografisch näher gelegenen Servern ausliefern.
• Komprimierungstechniken: Die Komprimierung der übertragenen Daten, einschließlich HTML, CSS und JavaScript, verringert die Bandbreitennutzung und beschleunigt die Ladezeiten.
• Moderne Protokolle (HTTP/2 und HTTP/3): Die Verwendung dieser Protokolle beschleunigt die Bereitstellung von Inhalten und verbessert die Gesamtleistung der Website.
• Server-Side Rendering (SSR) vs. Client-Side Rendering (CSR): SSR kann die anfänglichen Ladezeiten verbessern, insbesondere bei JavaScript-lastigen Anwendungen, indem es die Arbeitslast des Browsers reduziert.

Das Core-Entwickllungsteam von TYPO3 hat in Zusammenarbeit mit der Community mehrere entscheidende Optimierungen über mehrere Versionen hinweg vorgenommen, um den Endbenutzern eine bessere Website-Performance zu ermöglichen

Einfluss auf LCP durch Versionen:

Das Upgrade auf PHP 7 und später auf PHP 8 hat die Gesamtleistung des CMS deutlich verbessert. Diese Upgrades haben die Geschwindigkeit und Effizienz erhöht, was sich positiv auf die Frontend-Performance auswirkt und die LCP-Werte (Largest Contentful Paint) verbessert. Mit TYPO3 v13 LTS wurde die Unterstützung für moderne Bildformate wie WebP und AVIF eingeführt, die die Dateigröße im Vergleich zu JPEG um bis zu 30% reduzieren und gleichzeitig eine hohe visuelle Qualität und Transparenz bieten. Dies führt zu einer deutlichen Verbesserung der LCP-Werte, insbesondere bei bildlastigen Seiten, und trägt zu schnelleren Ladezeiten und insgesamt besseren Core Web Vitals-Werten bei.

Im Detail:

• Leistungssteigerung durch PHP 7 (v8)
• Von Menschen lesbare URLs und natives URL-Routing (v9)
• Integrierte SEO-Funktionen und XML-Sitemaps (v9)
• Webhooks für Integration und Automatisierung (v12)
• Native Unterstützung für WebP- und AVIF-Bildformate (v13)

Auswirkungen auf CLS über alle Versionen hinweg:

Das CLS wurde durch eine bessere Handhabung mobiler responsiver Layouts, die Verbesserung der Stabilität durch automatische Umleitungen und die Reduzierung visueller Verschiebungen verbessert. Die Hinzufügung von Drag-and-Drop und die verbesserten Funktionen zur Bearbeitung von Inhalten haben ebenfalls die visuelle Stabilität erhöht.

Im Detail:

• Standalone Fluid (v8)

Auswirkungen auf INP:

Mit TYPO3 v12 LTS wurde die asynchrone Verarbeitung von Webhooks mit Symfony Messenger eingeführt, was ein Blockieren des Haupt-Threads verhindert und schnelle Antwortzeiten gewährleistet. Das neue Feature "Reactions" ermöglicht eine einfache Konfiguration der eingehenden Webhooks und damit eine nahtlose Integration in Low-Code-Umgebungen und eine effiziente Automatisierung.

Im Detail:

• Webhooks für Integration und Automatisierung (v12)

TYPO3 war der Entwicklung immer einen Schritt voraus. Funktionen wie das Zusammenführen von CSS und JavaScript gibt es bereits seit TYPO3 v4.5 (vor 2008), und Bildkomprimierung und -optimierung sind seit langem Standardverfahren. Seit Januar 2020 werden die Core Web Vitals gemessen, die die beeindruckende Leistung von TYPO3 unterstreichen. Im April 2020 war die meistgenutzte TYPO3-Version v4, mehr als 27% der TYPO3 Websites liefen mit dieser veralteten Version. Drei Versionen befanden sich in ihrem ELTS-Zyklus (v6, 7 und 8; veröffentlicht 2014, 2015 und 2017), wobei Version 9 ihren Bugfixing-Status erreicht hatte und v10 im selben Monat als letztes LTS-Release veröffentlicht wurde. Anhand der Ergebnisse dieses Core-Web-Vital-Audits wird deutlich, dass Website-Besitzer von frühen technologischen Implementierungen profitierten, lange bevor diese sich auf die allgemeinen Webmessungen auswirkten.

• LCP: PHP 7-Verbesserungen, sauberere URLs, integrierte SEO und Webhooks tragen in verschiedenen Versionen zu einem besseren LCP bei.
• CLS: Die Verbesserung der mobilen Layouts und die Reduzierung visueller Verschiebungen haben CLS verbessert.
• INP: Die INP-Metriken wurden durch asynchrone Webhooks und eine optimierte Integration mit Symfony Messenger und "Reactions" verbessert.

Diese technischen Verbesserungen wurden in messbaren Geschäftsvorteilen sichtbar: geringere Absprungraten, höhere Conversions und gesteigerte Nutzerzufriedenheit.

Um das Beste aus einem Content-Management-System herauszuholen, ist es wichtig zu verstehen, welchen Wert Webentwickler-Agenturen für ihre Kunden haben und welche Faktoren sie beeinflussen können, um die Gesamtleistung zu optimieren. Agenturen verfügen über Fachwissen in Bereichen wie der JavaScript-Verwaltung, um die Verzögerung bei der ersten Eingabe (First Input Delay, FID) durch Techniken wie asynchrones Laden zu optimieren, über fortschrittliche CSS-Techniken wie Flexbox und Grid, um die kumulative Layoutverschiebung (Cumulative Layout Shift, CLS) zu verringern, und über Strategien zur progressiven Verbesserung, um sicherzustellen, dass Websites auch auf älteren Geräten und unter schlechten Netzwerkbedingungen gut funktionieren. Außerdem verwalten sie Benutzerinteraktionen und Animationen, um Verzögerungen zu vermeiden und die FID zu optimieren.

In verschiedenen Branchen haben TYPO3-Agenturen erhebliche Verbesserungen mit greifbaren Ergebnissen erzielt. Bei SIMONSWERK, einem führenden Hersteller von Scharnieren, führten TYPO3 Upgrades zu einem Anstieg der Website-Sitzungen um 55,51% und zu einem Anstieg der Nutzerzahlen um 47,21%, dank der verbesserten Geschwindigkeit und Genauigkeit der Website. Der französische Senat verzeichnete einen Anstieg der Besucherzahlen um 28 % auf 14,8 Millionen im Jahr 2023, wobei die Website 79 % der RGAA (französische Standards für Barrierefreiheit) erfüllte. Die überarbeitete Website der OTH Regensburg steigerte die Klickrate von 6,5 % auf 9,9 % und verbesserte damit das Engagement der Studierenden und die Zugänglichkeit der Inhalte erheblich. Steute Technologies erreichte durch ein umfangreiches TYPO3-Update von Version 6 auf 11 100 % mobilfreundliche URLs und verzeichnete einen deutlichen Zuwachs an Impressionen und Konversionen. Diese Beispiele zeigen, welche Verbesserungen TYPO3-Agenturen in verschiedenen Bereichen erzielen konnten.

Weitere Case Studies zu erfolgreichen Webprojekten mit TYPO3

Die Verbesserung der Core Web Vitals erfordert gezielte Optimierungen, und TYPO3 bietet die notwendigen Tools und Funktionen, um hochperformante Websites zu erstellen. Durch die Nutzung dieser Möglichkeiten und der Expertise von TYPO3 Partneragenturen können Websites signifikante Performance-Verbesserungen erzielen. Um exzellente Core Web Vitals zu erreichen, ist ein ganzheitlicher Ansatz erforderlich, der das CMS, die Frontend-Implementierung und die technische Infrastruktur umfasst. TYPO3 bietet zwar eine solide Grundlage, aber erst die Zusammenarbeit mit erfahrenen Agenturen und die Anwendung fortschrittlicher Frontend-Techniken maximieren die Web-Performance und das Nutzererlebnis und können letztlich die Core Web Vitals verbessern.

Branchen, die TYPO3 einsetzen

Kontakt mit uns aufnehmen