TYPO3-Pagespeed-Optimierung erfolgreich umsetzen

Eine Website im Nachhinein zu optimieren, ist oft unnötig teuer und aufwändig, die Ergebnisse selten optimal. Erfolgreiche Pagespeed-Optimierung gelingt, wenn sie von Anfang an mitgedacht und konsequent umgesetzt wird. Erfahren Sie, wie Sie Ihren Pagespeed testen, welche Bereiche für die TYPO3-Pagespeed-Optimierung wichtig sind und warum TYPO3 ein ideales Content-Management-System für hervorragende Ladezeiten ist.

Weshalb TYPO3-Pagespeed-Optimierung so wichtig ist?

Immer mehr Webseitenbetreiber wissen, wie wichtig die Ladezeit einer Website ist. Wer zu lange auf den Aufruf Ihrer Webseiten warten muss, bricht den Ladevorgang entweder ab oder ruft weniger Seiten auf. Zudem leidet die sog. „User Experience“ – langsame Websites „fühlen“ sich nicht hochwertig an. Der Pagespeed ist mittlerweile ein Ranking-Faktor und wirkt sich direkt auf die Platzierungen in Google aus. 

Da sich der Stellenwert der Ladezeit von Webseiten herumgesprochen hat, testen immer mehr Webseitenbetreiber, wie schnell die eigene Website oder die Sites der Mitbewerber laden. Insbesondere die Tests von Google werden herangezogen, um den Pagespeed zu ermitteln. Werfen wir also einen Blick auf diese und weitere Testverfahren, um ihre Aussagekraft für die tatsächliche Ladezeit einschätzen zu können. 

Wie sinnvoll sind die Pagespeed-Tests von Google?

Es gibt immer wieder Artikel, in denen es heißt, dass die Tests von Google nicht besonders aussagekräftig sind. In einem Artikel des Hosters RAIDBOXES etwa wird die Website der „New York Times“ dafür als Beispiel herangezogen, da sie in „Google Pagespeed Insights“ tatsächlich sehr schlechte Ergebnisse erzielt, obwohl sie beim tatsächlichen Aufruf einen äußerst performanten Eindruck macht. Was stimmt denn nun? Um es vorwegzunehmen: Die Entwickler haben hier sehr gute Arbeit geleistet! Während die Website lädt, ist der eigentliche Content sofort verfügbar. Entscheidend ist, dass sich die verfälschten Ergebnisse im Pagespeed-Test von Google leicht erklären lassen: Die „New York Times“ nutzt sog. Ads, also Anzeigen, die vergleichsweise spät erscheinen. Die eigentliche Website aber wird in Wahrheit schnell geladen, der Content ist sofort verfügbar. 

Achten Sie auf die gefühlte Ladezeit Ihrer TYPO3-Website

Wie in einem Kommentar unter dem erwähnten Artikel von RAIDBOXES richtig angemerkt wird, ist die „gefühlte Ladezeit einer Website“ von besonderer Bedeutung – und gerade diese Ladezeit ist bei der „New York Times“ sehr gut. Würden wir die Website ohne Ads testen, fielen die Ergebnisse des Pagespeed-Tests vermutlich deutlich besser aus. Skripte, die Anzeigen laden oder das Benutzerverhalten auswerten, gehen in aller Regel zu Lasten der Ladezeit. Kosten und Nutzen sollten stets gegeneinander abgewägt werden, auch und gerade unter Berücksichtigung der Ladezeit. 

Was heißt das jetzt für Pagespeed-Tests?

Selbstverständlich sollten Sie Ihre Projekte in Hinblick auf die Ladezeit optimieren und die empfohlenen „Best Practices“ umsetzen. Dabei ist es wichtig, zu wissen, dass sich Testwerte durch bestimmte Maßnahmen drastisch verändern können. Deshalb realisieren wir für unsere Kunden stets eine hoch performante, optimierte Website als Ausgangsbasis. So kann bei einem neuen Tool oder Script zuverlässig getestet werden, ob und inwieweit sich dadurch die Ladezeit der Website ändert. So kann leicht entschieden werden, ob man den Preis für die jeweilige Maßnahme bezahlen möchte, ob man also über ausreichend „Performance-Budget“ verfügt. Beispielsweise führt eine Einbindung des Tracking-Anbieters Matomo durchaus zu einer Verzögerung der Ladezeit, die zwar im Millisekundenbereich anzusiedeln ist, für den aufmerksamen Betrachter in einem Vorher-Nachher-Vergleich aber durchaus bereits spürbar ist. Je nach Budget kann eine Performance-Optimierung z. B. für Matomo Sinn ergeben.

Was sind die bekanntesten Pagespeed-Tests?

Jeder Pagespeed-Test setzt andere Schwerpunkte und zeigt entsprechend recht unterschiedliche Ergebnisse:

• Test My Site: Dieser Schnelltest von Google ist für Laien zwar einfach zu verstehen, kommt aber zu einem merkwürdigen Fazit: In diesem Test weisen nämlich praktisch alle Websites laut Google bestenfalls eine durchschnittliche Ladezeit auf. Wir können allerdings sagen, dass die schnellsten Websites in etwa zwischen 1,7 und 2,5 Sekunden laden. In diesem Bereich sollte eine optimierte Website nach Möglichkeit liegen. 
• Pagespeed.de: Wer 90 Punkte oder mehr erreichen möchte, muss in der Regel auf notwendige Skripte oder Design-Elemente verzichten; aus unserer Sicht sind derart hohe Werte für die meisten Websites unrealistisch. Schnelle Websites erreichen in diesem Test ca. 80 Punkte und brauchen zum Laden weniger als eine Sekunde. 
• WebPageTest: Dieser Test ist eher für Web-Entwickler geeignet. Seine Ergebnisse lassen sich anhand eines sog. Wasserfallmodells interpretieren. Einen einfachen Score, der die Ergebnisse in einer Kennzahl zusammenfasst, gibt es nicht. 
• PageSpeed Insights: Der nächste Google-Test unterscheidet zwischen der Ladezeit auf Smartphones und Desktop-Geräten. Eine Optimierung für größere Endgeräte ist vergleichsweise leicht möglich. Um deutlich mehr als 90 Punkte für die Ladezeit auf Smartphones zu erhalten, muss man sich schon gehörig anstrengen. 
• Pingdom Tools: Dieser Test weist Ihrer Website einen „Performance grade“ zu, der für Ihre Zielregion idealerweise bei „A“ liegen sollte.  
• Entwickler-Tools in Ihrem Google-Chrome-Browser: Rufen Sie die zu messende Website auf. Klicken Sie oben rechts in Ihrem Chrome-Browser auf die drei vertikalen Punkte, dann auf „Weitere Tools“ und schließlich auf „Entwickler-Tools“. Wählen Sie nun „Network“ aus und laden die Seite, die Sie messen möchten, erneut. Wenn Sie nun weiter nach unten scrollen, sollten Sie z. B. bei der Website von „T3 Guards“ feststellen, dass weitere Bilder nach und nach geladen werden. 

Weitere Pagespeed-Tests finden Sie unter:

• https://tools.geekflare.com/ 
• https://gtmetrix.com/ 
• https://performance.sucuri.net 
• https://tools.keycdn.com/speed 
• https://tinypng.com/analyzer

Nutzen Sie mehr als einen Pagespeed-Test!

Der Test von Pagespeed.de ermittelt u. a. die bloße Masse an Daten, die beim Aufruf einer Website anfällt, also die Bilddaten und wie viel JavaScript- oder CSS-Code geladen wird. Um für diesen Test zu optimieren, sollten Sie die Daten möglichst reduzieren. „Google Test my Site“ hingegen testet u. a. den sog. „First Contentful Paint“, also den Moment, in dem erste Inhalte auf dem Bildschirm zu sehen sind (die deutsche Übersetzung lautet: „Erste Inhalte gezeichnet“). Pingdom schließlich ist ein Ladezeiten-Test, der einen „Performance-Grade“ ermittelt. Ein möglichst vollständiges Bild auf die Ladezeit einer Website erhalten Sie, wenn Sie mehrere Pagespeed-Tests berücksichtigen. Daher optimieren wir nicht bloß für einen Test, sondern behalten mindestens vier der bekanntesten Testverfahren im Blick.

Beispiel für „gefühlte“ Ladezeit

Die gefühlte Ladezeit wird dadurch optimiert, dass die wirklich relevanten Inhalte möglichst schnell verfügbar sind. Ein Beispiel: Wir hatten in unserem Fullscreen-Element zunächst keine Hintergrundfarbe angegeben. Als das Fullscreen-Image etwa aufgrund einer schlechten Internetverbindung einmal langsamer geladen wurde, sah der Nutzer kurzfristig einen weißen Bildschirm. Das Hintergrundbild war schließlich noch nicht verfügbar, sodass ohne Hintergrundfarbe die weiße Schrift nicht zu erkennen war. Daher haben wir uns dazu entschlossen, in den globalen Einstellungen eine Default-Hintergrundfarbe für dieses Element zu vergeben. Das Ergebnis: Selbst, wenn das Bild mal nicht blitzschnell lädt, ist der relevante Content dennoch sofort verfügbar. Die gefühlte Ladezeit konnte auf diese Weise leicht verbessert werden. 

Themenkomplexe in der TYPO3-Pagespeed-Optimierung

In der TYPO3-Pagespeed-Optimierung sind ganz unterschiedliche Bereiche relevant, um in allen bekannten Tests gute Ergebnisse zu erhalten. Zweifellos lassen sich noch viel mehr Details optimieren, im Wesentlichen aber geht es um die folgenden Bereiche:

• Hosting: Ein guter Hoster ist eine Voraussetzung für optimale Ladezeiten. Hier empfiehlt es sich, etwas Recherche zu betreiben oder sich beraten zu lassen. 
• Requests: Requests, also Anfragen an den Server, benötigen Zeit und sollten nach Möglichkeit reduziert werden. 
• Bilder: Bilder sollten so klein wie möglich, je nach Endgerät in unterschiedlicher Größe und nur bei Bedarf ausgespielt werden. 
• Caching: Wer seine Webseiten zwischenspeichert, sorgt dafür, dass sie  schneller laden, da serverseitige Prozesse nicht bei jedem Ladevorgang ausgeführt werden müssen. 
• Skripte: Skripte sollten sorgfältig ausgewählt, angepasst, minifiziert und komprimiert werden, um die Ladezeit zu optimieren. 
• Priorisierung: Wer seine Skripte priorisiert, sorgt dafür, dass zunächst diejenigen Inhalte geladen werden, die beim ersten Aufruf im nicht scrollbaren Bereich („above the fold“) verfügbar sein müssen. 
• Sonstiges: Es gibt zahlreiche Stellschrauben, an denen Sie drehen können. Nutzen Sie moderne Formate für Schriften oder Bilder. Halten Sie Ihr gesamtes System möglichst auf einem aktuellen Stand, um stets moderne Methoden in der Web-Entwicklung nutzen zu können.