Letzte Änderung:
Kurze Ladezeiten, ein stabiler Seitenaufbau und schnelle Reaktionszeiten auf Besucher-Interaktionen sind wichtige Bestandteile einer guten User Experience (UX). Sie stellen damit auch wichtige Erfolgsfaktoren einer Website dar. Eine gute UX führt nicht nur zu mehr Conversions. Sie wird auch von Suchmaschinen durch ein höheres Ranking goutiert. Zur Messung der UX hat Google die Core Web Vitals eingeführt.
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:
Interaction to Next Paint (INP) ist eine neue Core Web Vital Metrik, die ab März 2024 First Input Delay (FID) ersetzen wird. INP bewertet die Reaktionsfähigkeit einer Webseite. Wenn eine Interaktion dazu führt, dass eine Seite nicht mehr reagiert, ist dies ein schlechtes Benutzererlebnis. INP beobachtet die Latenz aller Interaktionen eines Nutzers mit der Seite und meldet einen einzigen Wert, unter dem (fast) alle Interaktionen lagen. Ein niedriger INP-Wert bedeutet, dass die Seite durchgängig in der Lage war, schnell auf alle - oder die überwiegende Mehrheit - der Benutzerinteraktionen zu reagieren.
Der einfachste Weg führt über die Seite PageSpeed Insights von Google. Geben Sie hier eine URL Ihrer Webseite ein (eine Auswertung kann immer nur pro Seite stattfinden, es gibt keine "Gesamtauswertung" für die komplette Website):
Das Tool führt zwei Auswertungen durch: Einmal für die mobile Seite (links im Bild) und einmal für die Desktop-Version(rechts im Bild). Aus den jeweiligen Faktoren (LCP, FID, CLS und First Contentful Paint (FCP)) wird dann jeweils ein Gesamtwert berechnet (in diesem Fall sind beide bei 100, was sehr selten ist).
Eine weitere Möglichkeit, die Core Web Vitals meiner Webseiten zu überprüfen, bietet ein Blick in die Search Console. Hier wird unter dem Punkt Nutzerfreundlichkeit -> Core Web Vitals eine Übersicht der (Achtung: In vielen Fällen werden nicht alle Seiten, die Google indiziert hat, berücksichtigt):
Wenn man auf Bericht öffnen(rechts oben) klickt, kann man sich Details und mögliche Fehler zu den einzelnen Seiten ansehen.
Mit 75% liegt die Ladezeit vor der Intuition(wie schnell finde ich, was ich suche) mit 66 %, der Responsivität(Erscheinungsbild auf dem jeweiligen Gerät), der Einfachheit der Bedienung mit 61% und der Attraktivität also dem Layout bzw. die visuelle Darstellung mit nur 24%.
Die Ladezeit sollte somit ein wichtiger Teil bei der Optimierung der Website für Google (SEO) sein.
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.
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/
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.
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.
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.
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.
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
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.
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.
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.
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.