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

Die Optimierung der Core Web Vitals (CWV) ist entscheidend für die Verbesserung der Nutzererfahrung und des Suchmaschinen-Rankings. Als Google diese Metriken im Jahr 2020 einführte, machte es die Leistung einer Website durch einheitliche Komponenten messbar. Darüber hinaus können Website-Betreiber ihre Leistungen mit denen ihrer Konkurrenten vergleichen oder - in größerem Maßstab - CMS miteinander vergleichen, um dasjenige auszuwählen, das am besten zu den Bedürfnissen ihres Unternehmens passt und gleichzeitig schnelle Benutzeroberflächen (UIs) und Online-Erlebnisse für ihre Besucher und Kunden bietet. Diese Fallstudie zeigt, wie TYPO3, ein hochleistungsfähiges Enterprise CMS, CWV durch gezielte Verbesserungen effektiv erweitert.

Lesen Sie mehr darüber, wie Sie das Beste aus Ihrer TYPO3-Installation herausholen können, in unserem Blog

TYPO3 steht an der Spitze der Webentwicklung und aktualisiert seine Funktionen alle 18 Monate im Rahmen des Long-Term Support (LTS) Release-Zyklus. Schon vor der Einführung der Core Web Vitals Metriken lieferte der Google Lighthouse Report wertvolle Erkenntnisse für Verbesserungen. Um die wichtigsten Webvitalien zu messen, gibt es Schlüsselindikatoren, auf die Google seine Bewertungen stützt.

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."

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".

Herausforderungen im TYPO3-Kern werden in der Regel durch das Feedback der aktiven TYPO3-Community identifiziert, wodurch sichergestellt wird, dass Performance-Probleme zeitnah angegangen werden. Obwohl TYPO3 seine Mitbewerber oft übertrifft, müssen bestimmte Performance-Probleme noch angegangen werden, um die hohen Standards zu erfüllen und zu übertreffen und gleichzeitig die Core Web Vitals Benchmarks einzuhalten.

Die Rolle der Agenturen bei der Implementierung des Frontends ist entscheidend, um eine optimale Performance zu erreichen. TYPO3 stellt zwar leistungsfähige Werkzeuge zur Verfügung, aber es liegt in der Verantwortung der implementierenden Agenturen, diese Werkzeuge effektiv zu nutzen, um die Core Web Vitals-Testvorgaben zu erfüllen. In der TYPO3-Community finden sich zahlreiche Agenturen, die über fundiertes Know-how bei der Entwicklung von ansprechenden und leistungsstarken Frontends verfügen.

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 umweltbezogene Faktoren

Bei der Optimierung von Core Web Vitals müssen mehrere technische und umweltbezogene 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 Kernentwicklungsteam 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

Auswirkungen auf LCP über verschiedene Versionen hinweg:

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 Einzelnen:

• 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 Einzelnen:

• 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 Kern-Webvital-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 haben sich in greifbaren geschäftlichen Vorteilen niedergeschlagen, z. B. in niedrigeren Absprungraten, höheren Konversionsraten und einer größeren Benutzerzufriedenheit.

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üllt. Die überarbeitete Website der OTH Regensburgsteigerte 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 100 % mobilfreundliche URLs und verzeichnete durch ein umfangreiches TYPO3-Update von Version 6 auf 11 einen deutlichen Anstieg der Impressions und Conversions. Diese Fallbeispiele zeigen, welche Verbesserungen TYPO3 Agenturen in verschiedenen Bereichen erzielen konnten.

Weitere Fallstudien 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.

Erfahren Sie mehr über die Branchen, für die TYPO3 eingesetzt wird

Nehmen Sie Kontakt mit uns auf