PageSpeed-Optimierung mit TYPO3

Seit Mai 2021 berücksichtigt Google die sog. Core Web Vitals als Ranking-Faktoren im Suchergebnis (siehe: offizieller Blogbeitrag von Google). Die Optimierung von Ladezeiten (sog. Pagespeed) von Websites wird dann noch wichtiger und kann zu einem entscheidenden Wettbewerbsvorteil werden.

Die Core Web Vitals sind drei von Google definierte Kennzahlen, die die Besucherfreundlichkeit ("User Experience") von Webseiten messen sollen:

• LCP: Der Largest Contentful Paint misst die "gefühlte Ladezeit" einer Webseite, konkret: Wie lange dauert es, bis die größte Komponente im sichtbaren Bereich ("Viewport") angezeigt wird. Der Wert sollte unter 2,5 Sekunden liegen. Mehr Infos zum LCP von Google (englisch).
• FID: Der First Input Delay misst die Dauer bis zur ersten Interaktionsmöglichkeit. Das kann z.B. die Betätigung eines Links oder das Schreiben in ein Eingabefeld sein. Die Dauer sollte unter 100 Millisekunden liegen. Mehr Infos zum FID von Google (englisch).
• CLS: Der Cumulative Layout Shift steht für die "Visuelle Stabilität". Damit sind die Verschiebungen des Layouts während des Seitenaufbaus gemeint. Der CLS kann einen Wert von 0(sehr stabil) bis 1(hohe Instabilität) einnehmen und sollte niedriger als 0.1 sein. Mehr Infos zum CLS von Google (englisch). 

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:

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

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.