10 Schritte für eine schnellere TYPO3-Website
1. IST-Stand analysieren
Als erstes gilt es den Status quo zu ermitteln. Mit dem kostenlosen Tool PageSpeed Insights von Google wird die Ladezeit einer Website sowohl auf Mobilgeräten als auch auf Desktop PCs gemessen und ausgewertet. Dabei werden verschiedene Kriterien bewertet und Verbesserungsvorschläge gemacht. Die Bewertung kann zwischen 0 bis 100 Punkten sein. Je höher die Punktzahl, desto schneller wird die Website geladen. Als Zielwerte sollten Sie sich mindestens 90/100 sowohl mobil als auch für den Desktop vornehmen.
Ein weiteres Tool zur Messung ist das Tool WebPageTest, mit dem sich die effektive Ladezeit ermitteln läßt. Die ausgelieferte Grafik ist sehr detailliert und lässt die Abfolge der Datenabfrage sowie die einzelnen Ladezeiten präzise erkennen. Das Tool bietet insgesamt auch mehr bzw. bessere Informationen zu den Core Web Vitals.
Wertvolle Ergebnisse liefern auch die Entwicklertools der jeweiligen Browser. Insbesondere für Webseiten, die nicht öffentlich erreichbar sind.
2. Optimierung des Quellcodes HTML/CSS/JavaScript
Um eine Website darzustellen, werden dem Browser HTML-/CSS- und JavaSript-Code bereit gestellt. Dieser Code sollte möglichst "sauber" sein, d.h. fehlerfrei und möglichst schlank. Sehr viele und tiefe Verschachtelungen im HTML- und CSS-Code führen zu einem verlangsamten Seitenaufbau. Das gleiche gilt für überflüssigen oder gar blockierenden JavaScipt-Code.
Der Quellcode sollte außerdem minifiziert werden, d.h. sämtliche unnötigen Zeichen (Leerzeilen, Kommentare, usw.) werden entfernt. CSS- und JavaScript-Dateien können außerdem konkatiniert werden, d.h. sie werden jeweils zu einer (größeren) CSS bzw. JavaScript-Datei zusammengefasst und übertragen.
3. Bilder für das Internet optimieren
Eine Website soll nicht nur informativ sein, sondern auch attraktiv. Und dafür ist Bildmaterial nötig. Dies ist eines der wichtigsten und zugleich einfachsten Schritte bei der Optimierung der Ladezeit einer Website.
Für die Darstellung von Bildern im Internet geht es immer um diese Faktoren:
- Dateigröße so klein wie möglich (KB keine MB!)
- Abmessungen so groß wie nötig (px)
Tinypng.com ist ein kostenloses Tool mit dem sich die Dateigröße schnell und einfach verringern lässt. Ausführliche Informationen zu dem Thema Bildoptimierung haben wir für Sie in einem PDF Dokument zusammengestellt.
Bilder unbedingt displayabhängig bereitstellen! Achten Sie unbedingt darauf, dass Bilder nur in den erforderlichen Ausmaßen bereitgestellt werden. Für Smartphones sind deutlich kleinere Bilder ausreichend als für Desktops. Das Gute: Sie müssen nicht jedes Bild in unterschiedlichen Größen hochladen. TYPO3 kann Bilder automatisch "runterrechnen". Allerdings müssen Sie dies in Ihrem TYPO3-Template berücksichtigen. Hier erfahren Sie wie Bilder in TYPO3 je nach Display-Auflösung ausgespielt werden.
TYPO3 bietet Ihnen außerdem die Möglichkeit, Bilder automatisch in das hocheffiziente Bildformat webp zu konvertieren. Hierzu erfahren Sie mehr in unserem Artikel Bildotimierung mit TYPO3.
4. Das Einbinden von externen Elementen möglichst vermeiden
Immer dann, wenn Information auf einem externen Webserver gespeichert ist, muss beim Laden der eigenen Website eine zusätzliche Anfrage gemacht werden. Und diese kostet Zeit. Daher sollten externe Elemente möglichst vermieden werden. Ob Bilder oder Sozialnetzwerke (z.B. Facebook-Buttons, Google+), Werbebanner oder andere externe Anzeigen: Sie bremsen die Ladezeit der Website.
5. Websichere Schriftarten verwenden
Schriftarten sind wie die Handschrift: sehr, sehr vielfältig. Bei der Gestaltung von Websites wird von manchen viel Wert auf eine individuelle Schriftart gelegt. Technisch ist das möglich, in dem so genannte Webfonts eingebunden werden. Das sieht im besten Fall auch ganz hübsch aus. Aber . . . Sie ahnen es bestimmt schon: Dies geht auf Kosten der Ladezeit. Denn die Schriftarten-Dateien sind groß und diese werden beim Aufrufen der Website mit heruntergeladen. Auch Google stellt einige kostenlose Schriftarten zur Verfügung, die über CSS eingebunden werden können.
Die beste Lösung ist es auf websichere Schriftarten zurückzugreifen. Das sind Schriftarten, bei denen man annehmen kann, dass sie bereits auf jedem Rechner installiert sind und somit 0,00% Ladezeit kosten.
6. Daten komprimieren
Datenkomprimierung ist laut Duden die „Veränderung von Daten oder Zeichen mit dem Ziel, den Bedarf an Speicherplatz zu verringern oder die Übertragungsgeschwindigkeit zu erhöhen“.
Das Verfahren der Datenkomprimierung ist von ZIP-Dateien bekannt. Bei einer Website lässt sich das Verfahren ebenfalls anwenden. Dateien lassen sich per GZIP komprimieren, um die Dateiübertragung zwischen Browser und Server zu verkleinern. Das Kompressionsprogramm ist kostenlos und bietet einen guten Kompressionsgrad. Um das Modul zu nutzen, wird ein einfacher Code in der .htaccess-Datei eingefügt.
Wie Sie mit TYPO3 CSS- und JavaScript-Dateien komprimieren, erfahren Sie in unserem Artikel Datenkomprimierung mit TYPO3
7. Caches nutzen
Beim Abruf einer Website gibt es viele Abläufe die sich wiederholen. Damit dies nicht immer von der Pike auf gestartet werden muss, gibt es zwei Pufferspeicher: den Browser-Cache des Webbrowsers und den Server-Cache.
Im Browser-Cache werden bereits abgerufene Ressourcen (z. B. Texte oder Bilder) auf dem Rechner des Benutzers als Kopie gespeichert. Wird diese Ressource später erneut benötigt, ist sie aus dem Cache schneller abrufbar, als wenn sie erneut heruntergeladen werden müsste. Jedes Mal, wenn für die Darstellung einer Seite die Inhalte zu einer URL benötigt werden, wird zuerst im Cache nachgesehen, ob diese bereits vorhanden sind.
Ein gutes Beispiel ist das Logo, dass meistens auf jeder Seite einer Website zu finden ist. Damit nicht bei jedem Seitenaufruf diese Datei immer wieder heruntergeladen wird, kann man sich wieder der .htaccess Datei bedienen und einen einfachen Code dort einfügen.
Erfahren Sie her mehr über das TYPO3-Cache-Management.
8. Content Delivery Networks (=CDN)
Die Nutzung des Content Delivery Networks ist da sinnvoll, wo die Zielgruppe einer Website international ist. Das CDN hat ein einfaches Prinzip. Die Website wird auf verschiedenen Servern in verschiedenen Ländern im Cache behalten und lokal verteilt. Wird die Website von Frankfurt aufgerufen, liefert ein lokaler deutscher Server den Inhalt aus. Wird die Website in LA aufgerufen, so liefert ein amerikanischer Server aus. Das Ergebnis? Tempo beim Laden.
Es gibt verschiedene Anbieter von Content Delivery Networks, wie z.B. die OVH GmbH (Saarbrücken), Cloudfare (USA), Google Cloud CDN oder Amazon CloudFront.
9. LazyLoading nutzen
Mit LazyLoading läd der Browser immer nur die Bilder, die er gerade benötigt (die also im sichtbaren Teil des Browser liegen). Das beschleunigt den Aufbau der Seite enorm.
LazyLoading können Sie relativ einfach in TYPO3 installieren (Wie das geht, erfahren Sie hier). Ab TYPO3 Version 10 wird LazyLoading von Haus aus gesetzt. Dabei wird über das "loading"-Attribut des img-Tags das sogenannte browsernative LazyLoading aktiviert.
10. Weiterentwicklung: HTTP/2
Seitdem die erste Seite ins Internet gestellt wurde - im Jahr 1991 - kommunizieren Browser und Server über das Hypertext Transfer Protocol (=HTTP), um Webseiten anzufordern beziehungsweise zu verschicken.
Lange Zeit bestanden Websites hauptsächlich aus HTML und ein paar Bildern. In den vergangenen 25 Jahren hat sich da sehr viel getan, nur HTTP blieb so, wie es schon immer war. Das Problem im Hintergrund: Mit HTTP entsteht beim Laden moderner Websites Leerlauf. Und Leerlauf bedeutet langsameres Laden. Mit HTTP/2 soll dem beigekommen werden, die Übertragung beschleunigt und optimiert werden.
HTTP/2 bietet unter anderem die Möglichkeit des Zusammenfassens mehrerer Anfragen und eine weitergehende Datenkompression. Die meist verbreiteten Browser unterstützen HTTP/2, allerdings müssen viele Provider noch nachziehen. In Sachen TYPO3 gibt es hier keinen Handlungs- bzw. Änderungsbedarf. Informieren Sie sich, ob Ihr Hostingpartner http2 unterstützt oder finden Sie es am besten unter diesem Link gleich selber raus!
Mit dem Viewhelper <f:spaceless> können Sie unnötige Leerzeichen aus dem Quellcode entfernen.
Mit
config {
compressCss = 1
concatenateCss = 1
compressJs = 1
concatenateJs = 1
}
können Sie JavaScript- und CSS-Sourcen jeweils zu einer Datei zusammenhängen und komprimieren(unnötige Zeichen entfernen).
Nutzen Sie die Extension sourceopt für weitere Komprimierungen.
