Welche Faktoren sorgen dafür, dass eine Website so schnell wie möglich geladen wird?

Laut der Toolster-Statistik zur Ladezeit von Websites aus dem Jahr 2024 dauert das Laden von Websites auf Mobilgeräten durchschnittlich 11,48 Sekunden, was deutlich länger ist als die zwei Sekunden, die es auf dem Desktop dauert. Dies stellt für Entwickler und Website-Betreiber in einer Welt, in der Mobilgeräte an erster Stelle stehen, ein echtes Problem dar. Es wird zu wenig darüber diskutiert, was nötig ist, um schnellere Websites zu erstellen. Während einige Elemente der Website-Performance außerhalb deiner Kontrolle liegen, wie das Endgerät und das Mobilfunknetz des Benutzers, stehen dir die meisten Hebel zur Optimierung der Geschwindigkeit zur Verfügung – insbesondere, wenn du ein Open-Source-CMS wie TYPO3 verwendest.

Wir haben einen Leitfaden zu den wichtigsten Faktoren zusammengestellt, die die Leistung beeinflussen. Auf der Grundlage unserer umfassenden TYPO3-Entwicklungskompetenz bieten wir Lösungen an, die auf jahrelanger Erfahrung basieren. Während die Grundprinzipien der Leistungsoptimierung im Wesentlichen unverändert bleiben, bieten neue Technologien immer wieder neue Möglichkeiten. Bei b13 sind wir immer auf der Suche nach Innovationen, die es uns ermöglichen, die Leistung noch weiter zu steigern.

Was sind die grundlegenden Bereiche der Geschwindigkeit von Websites, die sich nie ändern?

• Dein Server: Der Knotenpunkt, auf dem deine Anwendung ausgeführt, Inhalte generiert und Ausgaben produziert werden.
• Das Netzwerk: Der Pfad, der deinen Server mit dem Gerät des Benutzers verbindet und die Datenübertragung ermöglicht.
• Der Browser des Benutzers: Das Gateway, das die Rohdaten vom Server in eine vollständig gerenderte Webseite umwandelt, die für den Benutzer sichtbar ist.

Bevor wir uns mit den Einzelheiten befassen, ist es gut zu verstehen, dass diese grundlegenden Bereiche zusammenarbeiten, um zu beeinflussen, wie schnell deine Website geladen wird. Jedes Element, von der Effizienz des Servers bis hin zur Art und Weise, wie der Browser des Benutzers mit Daten umgeht, arbeitet zusammen, um ein schnelles Website-Erlebnis zu bieten.

Was sorgt dafür, dass eine Website so schnell wie möglich geladen wird?

Es gibt 15 Faktoren, die du im Auge behalten solltest:

• Serverleistung:
  Achte auf die Effizienz des Betriebssystems, des CMS und der Datenbank deines Servers.
• Netzwerkleistung:
  Minimiere die Entfernung zwischen dem Server und dem Benutzer.
• Browser-Caching:
  Speichere häufig verwendete Daten lokal.
• Content-Delivery-Caching:
  Speichere Kopien von Website-Inhalten an verschiedenen globalen Standorten.
• Bildoptimierung:
  Verwende kleinere, gut komprimierte Bilder. Wenn sinnvoll gib Bildvarianten in unterschiedlichen Auflösungen für unterschiedliche Endgeräte und Bildschirmgrößen aus.
• CSS- und JS-Dateioptimierung:
  Dateien minimieren und optimieren.
• JavaScript:
  JavaScript-Nutzung einschränken und optimieren.
• Caching:
  Caching-Strategien für schnelleren Abruf implementieren.
• Lazy Loading von Bildern:
  Bilder erst dann laden, wenn sie benötigt werden.
• Weiterleitungen:
  Unnötige Weiterleitungen reduzieren.
• Internetgeschwindigkeit:
  Schnellere Internetverbindungen führen zu kürzeren Ladezeiten.
• Schlechtes Hosting:
  Führe ein Upgrade auf bessere Hosting-Dienste durch, um die allgemeine Geschwindigkeit der Website zu verbessern.
• Übermäßige Plugins oder Skripte:
  Entferne unnötige Plugins und Skripte.
• Überladener Code oder Design:
  Bereinige ineffizienten Code und vereinfache das Design.
• Veraltete Geräte:
  Optimiere die Website so, dass sie auch auf älterer Hardware reibungslos funktioniert.

Steigende Erwartungen der Benutzer an die Ladezeiten von Websites

In den 90er Jahren stellte die Nielsen Norman Group fest, dass Nutzer das Interesse verlieren, wenn eine Website länger als 10 Sekunden zum Laden benötigt. Heute haben ein schnelleres Internet und verbesserte Technologie die Erwartungen der Nutzer erhöht. Im Jahr 2024 ist man sich allgemein einig, dass eine Ladezeit von 2 Sekunden oder weniger am besten ist, insbesondere für E-Commerce-Websites. Man muss nicht lange suchen, um Artikel mit Kennzahlen und Benchmarks zur Geschwindigkeit und Optimierung von Websites zu finden. Wir wollen dich nicht mit den vielen und unterschiedlichen Statistiken überhäufen – es genügt zu sagen, dass Google herausgefunden hat, dass bei einer Seitenladezeit von bis zu 5 Sekunden die Wahrscheinlichkeit, dass der Webbesucher abspringt, um 90 % steigt. Und Amazon hat bekanntlich herausgefunden, dass jede 100 ms Latenzzeit 1 % Umsatz kostet.

Optimierung der Geschwindigkeit deiner Website: Praktische Lösungen

Nachdem wir nun die wichtigsten Faktoren und Benutzererwartungen erläutert haben, wollen wir uns mit praktischen Lösungen befassen. Wie bereits erwähnt, ist Geschwindigkeit kein einzelnes Element, sondern das Ergebnis mehrerer Optimierungen auf Server-, Code- und Netzwerkebene.

Serverseitige Optimierungen

Eine effiziente Serverkonfiguration ist die Grundlage für eine gute Website-Geschwindigkeit. TYPO3 CMS beispielsweise kann sofort nach dem Einrichten eine außergewöhnlich gute Leistung erbringen. Fehlkonfigurationen oder benutzerdefinierte Erweiterungen können die Leistung jedoch beeinträchtigen. Ineffiziente Datenbanken und falsche Cache-Einstellungen können die Leistung negativ beeinflussen, noch bevor Daten Ihren Server verlassen.

Bei b13 nutzen wir Tools wie Blackfire, um Anwendungen zu prüfen und zu profilieren. Blackfire hilft dabei, Leistungsengpässe zu lokalisieren und Entwickler zu Bereichen zu führen, in denen Code-Optimierungen zu erheblichen Verbesserungen führen. Für ein tieferes Verständnis der Caching-Mechanismen von TYPO3 empfehlen wir unsere dreiteilige Blog-Reihe, die Frontend-Caches, Cache-Varianten mit cHash und fortgeschrittenere Caching-Techniken behandelt.

Nutzung von Browser- und Content-Delivery-Caching

Sobald dein Server optimiert ist, ist der nächste Schritt die Netzwerkleistung. Dein Nutzerkreis könnte Verzögerungen erleben, wenn er sich in großer Entfernung vom Server befindet. Durch die Verwendung eines Content Delivery Network (CDN) wird diese Verzögerung verringert, indem statische Inhalte auf Servern gespiegelt werden, die sich in geografischer Nähe zu deinen Nutzern befinden. CDNs entlasten auch statische Assets und optimieren die Bereitstellung durch Protokolle wie HTTP/2, wodurch Anfragen beschleunigt werden.

Front-End-Performance-Optimierungen

Allgemeine Hinweise für Entwickler und Website-Betreiber

• HTML-Optimierung:
  Vereinfache deine HTML-Struktur, um Dateigröße zu sparen. Durch das Entfernen optionaler Tags, HTML-Kommentare oder Container kann die Dateigröße um 5–20% reduziert werden.
• Reduziere die Verwendung von JavaScript:
  Durch die Minimierung von JavaScript und die Verwendung von CSS für das Styling kann die Leistung drastisch verbessert werden.
• Bildoptimierung:
  Verwende optimierte Bildformate wie WebP und setze Lazy Loading-Techniken ein, um die Ladezeiten zu verbessern.
• CSS und Schriftarten:
  Füge kritisches CSS in den Code ein und minimiere benutzerdefinierte Schriftarten für eine bessere Leistung.

b13 und TYPO3-spezifische Hinweise

Die Flexibilität von TYPO3 unterstützt fortgeschrittene Front-End-Optimierungen. Die Verwendung von Fluid-Templates ermöglicht es an vielen Stellen, HTML zu minimieren und die Abhängigkeit von JavaScript zu reduzieren, was häufig zu einer langsamen Darstellung führt.

Bei b13 bevorzugen wir Vanilla JavaScript für wesentliche Funktionen und vermeiden umfangreiche Bibliotheken wie jQuery. Wir priorisieren auch die Bildoptimierung, indem wir Dienste wie Tinify nutzen und auf Formate wie WebPumsteigen, wodurch die Dateigröße reduziert wird.

Technologische Entwicklung und Geschwindigkeit: Ein Grund für den Niedergang von AMP

Google führte 2015 Accelerated Mobile Pages (AMP) ein, um die Leistung des mobilen Webs durch die Begrenzung von JavaScript und CSS zu verbessern und einen globalen AMP-Cache für schnelles Laden zu verwenden. Ursprünglich in den Suchergebnissen bevorzugt, hat AMP an Relevanz verloren, insbesondere mit dem Aufkommen der Core Web Vitals, die sich auf die Seitengeschwindigkeit und das Nutzererlebnis konzentrieren.

Als mich vor einiger Zeit ein Kunde nach AMP fragte, antwortete ich klar und deutlich: „Wir verwenden AMP schon länger nicht mehr und keine unserer Websites basiert noch darauf.“ Diese Veränderung zeigt, wie schnell sich die Technologie weiterentwickelt, wie wichtig es ist, mit Entwicklern zusammenzuarbeiten, die ihre Meinung ändern können, und warum wir es lieben, direkt mit unseren Kunden zu kommunizieren!

Hinzufügen von Core Web Vitals für eine optimale Benutzererfahrung

Die Optimierung für Core Web Vitals ist jetzt unerlässlich, um schnelle, benutzerfreundliche Erlebnisse zu bieten. Kennzahlen wie Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) wirken sich direkt darauf aus, wie Besucher Geschwindigkeit und Benutzerfreundlichkeit wahrnehmen. Um mehr darüber zu erfahren, wie TYPO3 diese Kennzahlen unterstützt und wie sie verbessert werden können, schau dir unsere Core Web Vitals-Einführung für TYPO3-Benutzer an.

Mache Performance zu einer Anforderung für dein Projekt

Wenn du ein neues Webprojekt in Auftrag gibst, sollte die Website-Performance ganz oben auf deiner Anforderungsliste stehen. Sie sollte bei jedem Schritt berücksichtigt werden, und zwar von Anfang an. Lass die Entwickler bereits in die Gespräche über das grundlegende Design und die Konzeptentscheidungen mit einbezogen werden. Sie werden wertvolle Beiträge zur Performance-Auswirkung leisten. Teste deine Infrastruktur frühzeitig und häufig. Führe einen Geschwindigkeitstest deiner Templates durch und korrigiere, was sich auf die Browser-Darstellung auswirkt, bevor du Frontend-Templates in deinem CMS implementierst. Setze die Tests fort, sobald der endgültige Inhalt fertig ist.

„Behandle eine langsame Website wie einen Bug“

Benni Mack, mein Kollege und Geschäftspartner seit 20 Jahren, verwendet oft den Satz: „Behandle eine langsame Website wie einen Bug. Wenn du Beschwerden von deinen Benutzern erhältst, Verzögerungen feststellst, unerwartete Absprungraten siehst oder einfach nur den Verdacht hast, dass deine Website langsamer wird, führe eine Leistungsprüfung durch. Beginne auf Serverebene und arbeite dich bis zum endgültigen Front-End-Rendering vor. Die Behebung der leicht zu behebenden Probleme wird sich auszahlen.

Wenn du nicht weißt, wo du anfangen sollst, bitte um Hilfe. Wir schauen uns das gerne an und helfen dir, Bereiche mit Verbesserungspotenzial zu identifizieren. Als TYPO3-Partneragentur können wir mit deinen Entwicklern oder deiner Agentur zusammenarbeiten, um zu zeigen, wie wir Blackfire einsetzen, das Laden von Bildern optimieren, ein CDN für deine Website konfigurieren oder die Leistung und Geschwindigkeit bestimmter Landing Pages – oder deiner gesamten Website – verbessern.