Typo3 Ladezeitenoptimierung – Tools und nützliche Tipps

Typo3 Ladezeitenoptimierung

Copyright © Shutterstock / Jacob Lund


Seit die Websites nicht mehr nur auf klassischen Computern mit Bildschirm, sondern oft von Smartphones, Tablets oder Laptops aufgerufen werden, die nicht immer über eine schnelle Verbindung zum Internet verfügen, spielt die Ladezeit eine wesentlich größere Rolle als früher. Wie sich die Ladezeiten einer Website auf der Basis von Typo3 optimieren lassen, wollen wir hier zeigen.

Diese Vorteile bringt die Typo3 Ladezeitenoptimierung:

  • Besucher sind ungeduldig: Je schneller sich eine Website aufbaut, desto länger bleiben sie.
  • Das Ranking bei Google hängt ebenfalls von der Geschwindigkeit ab, da Google die sogenannte User Experience hoch gewichtet.

1. Prüfen: Wie schnell ist die Website tatsächlich?

Bevor es um eine Optimierung geht, muss zunächst der Ist-Zustand ermittelt werden, also die aktuelle Geschwindigkeit, mit der sich die Website aufbaut. Dabei hilft das Tool PageSpeed Insights, das Google kostenlos zur Verfügung stellt. Damit lässt sich die genaue Ladezeit nicht nur auf dem klassischen Computer mit schnellem Internetanschluss, sondern auch auf Mobilgeräten bestimmen.

Das Tool wertet insgesamt neun Kriterien und macht Vorschläge zur Verbesserung. Gewertet wird dabei in Punkten, die zwischen 0 und 100 liegen. Je schneller die Website aufgebaut ist, desto höher ist die Punktzahl. Ab 85 Punkten zeigt das Tool ein grünes Ergebnis, mit dem Sie sich zwar zufrieden geben könnten, es jedoch auch weiter optimieren können.

Auch das Tool WebPageTest lässt sich zur Geschwindigkeitsmessung beim Aufbau der Websites nutzen. Sowie der kostenlose Website Speed Test der OSG, welcher nicht nur Ihre Ladezeiten ermittelt sondern auch Handlungsempfehlungen für Sie bereit hält.

Page Speed Test

Copyright @ OSG / Website

2. Hosting

Verschiedene Anforderungen an Typo3 können dazu führen, dass ein Server nicht mehr ausreicht. Viele Nutzer von Typo3 haben den Wunsch mehrere Server gleichzeitig zu nutzen. Dies kann folgende Gründe haben:

  • Leistungssteigerung
  • Ausfallsicherheit
  • Trennung von Auslieferungs- und Redaktionssystem
  • Geographische Verteilung der Last auf mehrere Server

Praktisch sind es oft mehrere Gründe die zu diesem Wunsch beitragen. Mit Leistungssteigerung ist in den meisten Fällen die Anzahl, der möglichen Seitenabrufe gemeint. Typo3 wird pro Seitenabruf einmal angesprochen wohin gegen die Anzahl der Webserverzugriffe oder die Datenmenge von Bildern und Ähnlichem abhängt. Diese sind aber nicht für den Engpass der Serverleistung verantwortlich.

Man sollte nicht nur Page Impressions pro Monat betrachten sondern viel wichtiger sind die Page Impressions, die der Server zu Spitzenzeiten zu bewältigen hat. Die Verkürzung der Antwortzeit des Servers ist ein weiterer Punkt der unter Leistungssteigerung gefasst wird. Unter anderem ist eine hohe Ausfallsicherheit gerade im Business-Bereich sehr wichtig. Denn durch einen Serverausfall nicht erreichbare Seite kann heutzutage sehr teuer werden.

Bei der Trennung von Auslieferungs- und Redaktionssystemen soll in der Regel das Redaktionssystem auf einen nicht öffentlichen Server verlagert werden. Ebenso die Verteilung der Last auf mehrere Server. Dies gilt jedoch nur bei einer global ausgerichteten Seite, welche ein hohes Transfervolumen aufweist.

2.1 Was sollten wir tun wenn ein einziger Server nicht mehr ausreicht?

Man könnte natürlich den aktuellen Server hardwaremäßig hochleistungsfähig und intern redundant auslegen. Die andere Möglichkeit wäre,die Verteilung einer Typo3-Installation auf mehrere Server, das bedeutet man lässt mehrere Webserver auf einen Datenbankserver zugreifen.

Dieser Schritt trägt bereits dazu bei, die Systemleistung zu verbessern. Für die Verteilung der Anfragen auf mehrere Server werden meistens “Network-Load-Balancer” verwendet, welche als Software- oder Hardware-Lösung verfügbar sind. Diese enthalten Verteil-Algorithmen oder die intelligente Fehlererkennung.

3. Einfluss der Bilder auf die Typo3 Ladezeitenoptimierung

Eine Website ohne Bilder ist kaum mehr denkbar. Doch diese sind oft – wenn sie in den falschen Größen hochgeladen werden – für eine Verlangsamung der Website verantwortlich. Daher herrscht in Bezug auf die Bilddateien das größte Potential bezüglich der Typo3 Ladezeitenoptimierung.

Je nachdem, welches Programm für die Grafiken und Fotos genutzt wird, muss auf die entsprechende Größe der Bilder geachtet werden. Auch wenn Photoshop beispielsweise die Funktion “für Web und Geräte speichern” hat, reduziert diese die Größe der Bilder jedoch noch nicht genug. Für die Typo3 Ladezeitenoptimierung sollten zusätzlich weitere Tools genutzt werden. Für Bilder im PNG-Format eignet sich beispielsweise das Tool TinyPNG, welches die Dateien direkt im Browser komprimiert. Das Tool bietet auch ein kostenpflichtiges PlugIn, mit dem sich die Bilder direkt aus Photoshop komprimieren lassen. Weitere Informationen, wie Sie ihre Bilder richtig optimieren finden Sie in unserem Blog Artikel zu Bilder SEO.

TinyPNG Typo3 Ladezeitenoptimierung

Copyright @ Screenshot TinyPNG/Website

Grundsätzlich gilt bei jeder Art von Bildern:

  • die Abmessungen in Pixel nur so groß, wie unbedingt nötig
  • die Größe der Dateien so klein, wie nur irgend möglich

Da viele Nutzer die Qualität einer Website an der Qualität der Bilder messen, sollte die Typo3 Ladezeitenoptimierung jedoch nicht zu Lasten der Bildqualität gehen. Trotzdem können Sie die Bilder auf Ihrer Website entsprechend optimieren und komprimieren. Im einzelnen kommt es dabei auf die Bildgröße, die Dateigröße und das Dateiformat an. Die Formate können Sie an der Endung erkennen: Es gibt .jpg, .gif, .png und webP.

3.1 .jpg oder .jpeg

Das häufigste Format, welches nicht nur für Fotos, sondern auch für andere Bilder im Internet gerne genutzt wird. Das Farbspektrum ist hoch, die Bilder lassen sich einfach und problemlos komprimieren, ohne dass die Qualität darunter leidet.

3.2 .png

Ist ein Format, das in der Regel für Grafiken und transparente Bilder genutzt wird, die mit relativ wenig Farben auskommen. Bei der Komprimierung von Bildern im .png-Format wird die Anzahl der Farben verringert. Je weiter das Bild also komprimiert wird, desto geringer ist schließlich das verwendete Farbspektrum.

3.3 .gif

Für Newsletter und kleine Grafiken eignet sich das .gif-Format, auch wenn die verwendeten 256 Farben für Fotos in der Regel nicht ausreichen. Der Vorteil dieses Formates ist die Bild-Animation.

3.4 webP

Ist ein Grafikformat das Bilder mit Seitenlängen von bis zu 16.383 Pixeln unterstützt. Dieses Format erreicht selbst bei hoher Komprimierung eine höhere Bildqualität pro Datenmenge als JPEG. Außerdem ist es bekannt für verlustbehaftet und verlustfrei komprimierte statische und animierte Bilder.

Tipp

Verwenden Sie auf Ihrer Website möglichst Bilder in gleicher Größe und dem gleichen Seitenverhältnis. Damit wirkt die Website wesentlich übersichtlicher als bei Bildern in vielen unterschiedlichen Größen und Variationen.

Alle Möglichkeiten zur Typo3 Ladezeitenoptimierung nutzen: Zwar bietet Photoshop mit der Funktion “für Web und Geräte speichern” bereits eine Komprimierung der Bilder an, dennoch können diese weiter komprimiert werden. Nutzen Sie dafür die Software TinyJPG: Diese komprimiert Ihre Fotos noch weiter, ohne dass diese an Qualität verlieren. Stattdessen tragen Sie zur Typo3 Ladezeitenoptimierung bei.

4. Nicht benötigte Extensions entfernen

Am Anfang des Webauftritts wird die Website meist mit allen möglichen Extensions ausgestattet. Jedoch ändern sich mit der Zeit die Bedürfnisse und so passiert es häufig das Extensions auf dem System installiert sind, die eigentlich gar nicht mehr gebraucht werden.

Jede Extension verbraucht Rechenzeit auch wenn Sie nicht genutzt wird. Sie sollten also in regelmäßigen Abständen die Extensions, die sie nicht mehr benötigen im Extension-Manager deinstallieren oder gar vom System löschen. Im Extension-Manager können Sie dies im Bereich “Install Extensions” tun.

5. Daten komprimieren für Typo3 Ladezeitenoptimierung

Werden Daten komprimiert, lässt sich darüber ebenfalls die Geschwindigkeit der Ladezeit erhöhen. Außerdem benötigen komprimierte Daten wesentlich weniger Speicherplatz. Im Prinzip funktioniert das Komprimieren der Daten ähnlich wie bei den bekannten Zip-Dateien: Hier können Daten per gzip verkleinert und komprimiert werden. Das dafür zu nutzende Programm 7-Zip ist kostenlos und benötigt nur einen einfachen Code in der htaccess-Datei.

6. Deaktivieren von Typo3-Logs

Es ist sehr praktisch bei der Entwicklung einer Website mehrere Protokollierungs- und Debbuging- Möglichkeiten zur Verfügung zu haben. Das einzige Log, dass in vielen Typo3-Websites aktiviert ist, ist das Deprecation-Log. Dieses kann jedoch sehr schnell wachsen indem die Website mit vielen Anfragen konfrontiert wird und Erweiterungen mit veralteten Funktionen verwendet werden.

Bei jedem Aufruf einer veralteten Funktion wird eine Schreibaktion im Dateisystem ausgeführt. Schlecht gewartete Fremdsysteme im Zuge von Support- und Aktualisierungs-Anfragen können abstürzen, da kein Speicherplatz mehr auf dem Server zur Verfügung steht weil das Deprecation-Log zu stark gewachsen ist. In der neuen Maintance Area von Typo3 bzw. im InstallTool können Sie die Protokollierungs- und Debbuging-Ausgabe reduzieren indem Sie folgende Optionen setzen:

[SYS][exceptionalErrors]=4096
[SYS][belogErrorReporting]=30711
[SYS][systemLogLevel]=3

7. Optimierung des TypoScript-Code

Immer eine gute Idee ist es den TypoScript-Code zu optimieren. Dies können Sie tun indem Sie:

  • Die nicht benötigten TypoScript-Codes entfernen
  • nur erforderliche Vorlagenerweiterungen hinzufügen
  • zusätzliche Räume loswerden
  • die Typo3-Backend-Vorlage für typoScript- und Setup-Dateien vermeiden
  • TSConfig & TypoScript über INCLUDE_TYPOSCRIPT einfügen
  • eine benutzerdefinierte Typo3-Erweiterung für das Templating mit Schreibstruktur erstellen

8. Clientseitigen Cache aktivieren

Die Aktivierung des Clientseitigen Caches trägt ebenfalls zu Minimierung der HTTP-Requests bei. Bei diesem wird dem Client vorgegeben wielange er HTML-Ressourcen nicht neu aufrufen muss. Dies kann man mit der Angabe eines Ablaufdatums erreichen, welches dem Client vorgibt bis wann er sich die Ressource nicht mehr vom Server holen muss sondern die vorhandene nutzen kann.

Ein Nachteil davon ist, dass wenn man eine Änderung an einer Ressource vornimmt der Client trotzdem bis zum Ablaufdatum die gespeicherte Datei ausspielt. Um die Cache bei Typo3 zu aktivieren, aktivieren Sie lediglich nur das interne Typo3-Caching-System.

Wird eine Website nicht nur einmal, sondern mehrmals abgerufen, wiederholen sich einige der dabei notwendigen Abläufe. Für die Typo3 Ladezeitenoptimierung kann sowohl der Server-Cache als auch der Browser-Cache des Webbrowsers genutzt werden. So können die bereits herunter geladenen Bilder oder Texte auf dem Gerät des Benutzers als Kopie im Browser-Cache gespeichert bleiben.

Besucht dieser die Website erneut, brauchen sie nicht noch einmal heruntergeladen werden, sondern können direkt dort abgerufen werden. Ist beispielsweise auf jeder Seite der Website das Logo zu sehen, kann per Code in der .htaccess-Datei festgelegt werden, dass diese Grafik oder das Bild im Browser-Cache gespeichert bleibt.

9. Den Inhalt der Website dort verteilen, wo er abgerufen wird

Richtet sich die Website eines international aufgestellten Unternehmens nicht nur an die in Deutschland ansässigen Kunden, sondern an eine internationale Zielgruppe, ist es sinnvoll, den Inhalt der Website auf unterschiedlichen Servern in den jeweiligen Ländern vorzuhalten. Wird dann die Website aus Hamburg aufgerufen, kommt der entsprechende Inhalt von einem Server aus Deutschland.

Wird die Website in New York aufgerufen, ist dementsprechend ein Server in Amerika derjenige, der die Daten ausliefert. Damit können Sie die Geschwindigkeit beim Laden der Website deutlich steigern.

Das Zauberwort hierzu heißt Content Delivery Networks, CDN abgekürzt. Für diesen Dienst haben Sie die Wahl zwischen mehreren Anbietern, Amazon CloudFront ist einer, Google Cloud CDN ein anderer, es gibt aber auch die OVH GmbH aus Saarbrücken oder Cloudfare aus Amerika, die einen solchen Dienst anbieten.

10. Weiterleitungen für Typo3 Ladezeitenoptimierung

Bei vielen Typo3 Projekten wird die Hauptdomain immer wieder auf eine eigene Startseite weitergeleitet. Das bedeutet der Browser muss den Server zweimal anfragen und dies sollte unbedingt vermieden werden. Die Ursache dafür liegt im Wurzelpfad des Typo3-Projektes. Man erkennt das wenn im Backend von Typo3 die Weltkugel auf eine andere Seite verweist. Um dies zu beheben sollte man wie folgt vorgehen:

  1. Die Wurzelpfadseite muss in den Seiteneigenschaften auf den Typ “Standard” geändert werden
  2. Die Inhalt der eigentlichen Startseite müssen in die Wurzelpfadseite kopiert werden
  3. Wichtig ist auch den Titel der eigentlichen Startseite zu kopieren, damit der Navigationspunkt nicht “root” sondern “Home” lautet
  4. Der Seitentyp der Home Seite muss in den Eigenschaften auf “Verweis” gestellt werden und das Ziel muss die Wurzelpfadseite sein
Typo3 Wurzelpfad

Copyright @ OSG/Screenshot Typo3

11. Java Script in den Footer verschieben

Der folgende Typoscript-Befehl gibt an, dass externe Dateien erst im HTML-Footer der Seite nach den Inhalten angezeigt werden sollen.

includeJSFooter {
file5 =  [Pfad]/MEINE_JAVASCRIPT_DATEI1.js
file10 =  [Pfad]/MEINE_JAVASCRIPT_DATEI2.js
[…] }

Dieser Code muss am Ende der Seite vor dem schließenden Body-Tag gestellt werden.

12. Antwortzeit des Servers reduzieren

Um die Antwortzeit des Servers bei Typo3 zu beschleunigen müssen folgende Maßnahmen getroffen werden:

  1. Serverseitige Cache optimieren
  2. Eine aktuelle PHP-Version verwenden
  3. APCu im Typo3-Installtool aktivieren
  4. Eine einfache, performance-optimierte und serverseitige Programmierung ist wichtig für den Server für die schnelle Erzeugung ihrer Seite

13. Extensions für die Typo3 Ladezeitenoptimierung

13.1 sourceopt – Der Quellcode Bereiniger

Durch diese Typo3 Extension werden Whitespaces, Kommentare und Zeilenumbrüche entfernt und somit der Quellcode der HTML-Ausgabe bereinigt. Sie ermöglicht es auch JavaScript Blöcke zu optimieren. Die Option dieser Erweiterung sollte man jedoch nur mit Bedacht einsetzen, denn nach der Optimierung mit sourceopt sind teilweise die JavaScripte nicht mehr lauffähig. Diese Typo3 Extension sorgt für eine geringere Datenmenge und für eine bessere Google Page Speed Bewertung.

13.2 Static File Cache – Typo3 Turbo

Durch die mächtigen Funktionen gehört Typo3 nicht zu den schnellsten Programmen. Jeder Aufruf verlangt es mehrere Codezeilen abzuarbeiten. Mit der Extension können beliebige nicht-dynamische Seiten als statische HTML Datei in einem Ordner abgespeichert werden. Durch diesen Vorgang wird die Ladezeit deutlich geringer, da bei einem Aufruf nur noch die statische HTML Datei abgerufen werden muss.

13.3 scriptmerger – Zusammenfüger für CSS und Java Script Dateien

Mit dieser Extension werden CSS und Java Script Dateien zu einer komprimierten .gz Datei zusammengefügt. Wenn man mehrere Stylesheet-Dateien verwendet, jedoch nur eine CSS-Datei ausgeliefert werden soll, ist das sehr sinnvoll. Durch das zusammenfügen der Dateien wird die Anzahl der Requests verringert, was aufjedenfall zu einer besseren Performance und einer schnelleren Ladezeit beiträgt.

13.3 t3p_scalable

Durch diese Extension kann eine MySQL-Replikation aufgebaut und auch als Memcached verwendet werden. Dies ist ein unter der BSD-Lizenz veröffentlichter Chache-Server, der zum Hinterlegen und Abholen von Daten aus dem Arbeitsspeicher dient. Dieser Server ist schneller als ein Zugriff des Chaches über das File-System oder die Datenbank.

14. HTML-Kommentare entfernen

Die Extension “css_styled_content” stattet den Quellcode mit vielen HTML-Kommentaren aus, welcher in der Entwicklung der Website praktisch sein können. Jedoch stellen diese einen zusätzlichen Quellcode dar, welcher jedes Mal mit übertragen werden muss. Das entfernen dieses zusätzlichen Quellcodes funktioniert ganz einfach über zwei Zeilen im TypoScript-Setup:

config.disablePrefixComment = 1
lib.stdheader.5.prefixComment >
lib.stdheader.stdWrap.prefixComment >
tt_content.stdWrap.prefixComment >

15. Reverse-Proxys verwenden

Ein Proxy Server trägt erheblich dazu bei die Performance einer Website zu verbessern. Der leistungsfähige Varnish Cache setzt sich langsam aber sicher als Standard durch. Außerdem wird Squid auch sehr häufig als Cache bei vielen zeitkritischen Websites eingesetzt.

16. PHP-Beschleuniger verwenden

Der PHP-Accelerator ist eine Software, die als Optimierer, Beschleuniger und Cache für PHP-Seiten dient. Das PHP wird in einem kompilierten und optimierten Zustand gespeichert und bei Bedarf ausgeliefert. Dadurch wird die Ausführgeschwindigkeit deutlich gesteigert. Vor allem bei PHP-lastigen Seiten, wie es bei Typo3 der Fall ist.

Tipp

Der eAccelerator ist ein kostenloser Open-Source-PHP-Beschleuniger und -Optimierer, welcher sehr unkompliziert zu intallieren und konfigurieren ist.

17. CSS-Sprites verwenden

Mit der scriptmerger-Extension ist es zwar möglich, mehrere CSS Dateien zu einer zusammenzuführen, jedoch bleiben dort referenzierte Grafiken als eigene Assets erhalten, welche vom Server separat angefragt werden müssen.

Dies reduzieren Sie indem sie alle benötigten Grafiken mit einem Grafikprogramm zusammenführen und zwar in einem langen Streifen bei dem sich die benötigten Grafiken untereinander befinden. Man muss für jedes Element die passende Background Position definieren und das Sprite unter dem Element so positionieren, dass die gewünschte Teilgrafik sichtbar wird.

18. Wie messe ich die Ladezeit richtig?

Das Messverfahren, dass ihr Tool einsetzt ist besonders wichtig. Die im Internet angebotenen Tools verwenden nicht alle die gleichen Indikatoren und setzen verschiedene Verfahren ein, Ihre Website Leistung zu messen. Jeder Nutzer kommt unter verschiedenen Voraussetzungen auf ihre Seite, beispielsweise besucht der eine Ihre Website auf einem Mobilgerät, der andere am Desktop. Deshalb ist es wichtig, die Leistung ihrer Seite unter unterschiedlichen Bedingungen zu bewerten.

Durch das veröffentlichen neuer Inhalte, Aktualisierungen oder das hinzufügen neuer Funktionen, ändern sich auch die Leistungen Ihrer Seite. Steigen Sie also falls noch nicht geschehen von der punktuellen Messung der Seitengeschwindigkeit auf regelmäßiges Monitoring Ihrer Leistungen um.

Tipp

Google Analytics lässt sich optimal für das Monitoring nutzen. Sie erhalten verschiedene Berichte, von der Gegenüberstellung der einzelnen Seiten zur durchschnittlichen Ladezeit der Website bin hin zu Empfehlungen zur Optimierung ihrer Ladezeit.

19. Fazit

Die Messung Ihrer Ladezeit sollte unter realistischen und stabilen Bedingungen durchgeführt werden, die für Ihre Nutzer repräsentativ sind. Die technische Leistung ist ein sehr wichtiger Punkt, jedoch sollte die Benutzererfahrung nicht in Vergessenheit geraten. Wenn Sie die oben genannten Punkte bereits berücksichtigen, sollten sich die Ladezeiten Ihrer auf Typo3 basierten Websites bereits deutlich steigern. Schließlich freuen sich nicht nur Ihre Besucher über möglichst kurze Ladezeiten, sondern auch der Google Bot.

Gerne können Sie sich noch weitere Tipps für das Content-Management-System Typo3 in unserem Blog holen und über beispielsweise das Thema Typo3 SEO mehr erfahren. Falls Sie generelle Fragen haben oder interesse an einer Zusammenarbeit haben, dann melden Sie sich gerne jederzeit bei uns!

Zum Kontaktformular E-Mail senden

Kostenloser SEO-Check der OSG



Weitere Inhalte


Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*