06082 928047Anfahrt

PageSpeed-Optimierung mit TYPO3

Dieser Artikel befasst sich mit der Optimierung der Ladezeiten(sog. Pagespeed) mit dem Content Management System TYPO3.

Für die Verbesserung der Ladezeiten sprechen zwei sehr wichtige Punkte:

9 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 9 verschiedene Kriterien bewertet und Verbesserungsvorschläge gemacht. Die Bewertung kann zwischen 0 bis 100 Punkten sein. Je höher die Punktzahl, desto leistungsstärker ist die Website. Auch wenn ab einer Punktzahl von 85 das Ergebnis in grün angezeigt wird, Ziel sollte 100 von 100 sein.

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.

2. Den Kern der Website auf Vordermann bringen: HTML validieren

Egal wie schlicht oder komplex eine Website ist: Alle werden mit HTML dargestellt und dieser Code sollte immer und in allen Einzelheiten korrekt sein. Die Struktur wird indes vom World Wide Web Consortium vorgegeben.

Auch wenn eine Website auf dem eigenen Bildschirm korrekt dargestellt ist, bedeutet es nicht zwangsläufig, dass im Code alles in Ordnung ist. Und Fehler tragen zur Verlangsamung der Ladegeschwindigkeit bei. Jede Seite sollte also geprüft werden, bevor sie online gestellt wird, um mögliche Fehler vorab zu erkennen.

Für die Validierung des HTML Codes bietet sich das kostenlose Tool des World Wide Web Consortiums an: https://validator.w3.org/

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:

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.

4. Das Einbinden von externen Elementen möglichst vermeiden

Immer dann, wenn Information auf einem externen Webserver gespeichert ist, muß 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 muß, 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.

In unserem Know-How-Artikel Browsercaching mit TYPO3 erhalten Sie konkrete Tipps zum 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. 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!