Google Lighthouse und Pagespeed Insights: SEO TYPO3 Webseite

Die beiden Tools Google Lighthouse und Pagespeed Insights machen aus SEO für eine TYPO3 Webseite oftmals eine langwierige Angelegenheit. Man hat eine Webseite komplett fertig gestaltet, sie sieht wunderbar aus, hat alle zum Start benötigten Inhalte und diese ist sehr schnell geladen. Mit der Live Seite oder vielleicht auch erst der Staging Umgebung auf einem externen Webserver geht man an den Google Lighthouse Viewer, wartet ungefähr eine halbe Minute und beißt dann in die Tischplatte seines Schreibtischs. Google Lighthouse als sagt einem geneigten Betrachter nämlich, dass die Webseite noch eine ganze Reihe von Problemen aufweist. Pagespeed Insights als Teil von Lighthouse auch alleine nutzbar zeigt Möglichkeiten der Optimierung zur Ladezeit der Webseite auf. Nun fängt die Arbeit der technischen Suchmaschinenoptimierung erst richtig an. Es gibt jedoch einige Standards, die man bei der SEO bereits im Vorfeld erledigen kann. 

TYPO3 Extensions für serverseitigen Cache einbinden

Der serverseitige Cache ist ein wichtiger Bestandteil der Technik einer TYPO3 Webseite. Teile der Webseite, CSS und JavaScript-Dateien sowie SQL-Abfragen aus der Datenbank werden auf dem Webserver bzw. in der Datenbank zwischengespeichert. Dies vermindert die Zugriffszeiten für die Webseite rapide! Als Standard kommt TYPO3 bereits mit einem leistungsfähigen serverseitigem Cache. Um diesen weiter zu optimieren, kann man zusätzliche Extensions einbinden. Diese Erweiterungen sorgen für einen aufgeräumten Quelltext der Webseite und speichern die aus der Datenbank generierten Inhalte aus TYPO3 in statischen Seiten.

Extension Source Optimization

Mit der Extension Source Optimization straffen Sie den Quellcode der fertig generierten Seite. Diese Extension formatiert den Source Code zu einer einfacher lesbaren Variante. Zudem können Kommentare entfernt werden. Damit legen Sie eine gute Grundlage für einen einfacher lesbaren Code Ihrer Webseite. Und erreichen bereits eine Reduktion der Datenmenge. 

TYPO3 Extension: Source Code Optimization

Extension Static File Cache

Die im Source Code optimierten Seiten Ihrer Webseite werden von der TYPO3 Extension Static File Cache auf Ihrem Webserver zwischengespeichert. Die Programmierer der Extension beschreiben den Prozess so, dass eine Seite bei einem Aufruf fertig geladen wird und TYPO3 gar nicht mehr selbst anspringen muss. Dies beschleunigt die Seitenzugriffe erheblich! Bei der Georgienseite haben wir eine Reduktion der Zugriffszeiten der Seiten von ca. 0,3 s auf 0,08 s und weniger gemessen! 

Zu der Installation der Extension gehört die Bearbeitung der .htaccess Datei auf Ihrem Webserver. Damit sagen Sie dem Server bereits beim ersten Aufruf, dass er nach einer gecachten Version der Seite suchen soll. 

Der Cache selber kann über die normalen Routinen im TYPO3 Backend gelöscht und wieder neu aufgebaut werden. Für einzelne Seiten, deren Inhalte nicht gecached werden sollen, lässt sich dieser auch abschalten. Dies empfiehlt sich für Suchergebnisse, Listenansichten, Kontaktformulare und alle weiteren nicht statischen Inhalte Ihrer TYPO3 Webseite. 

TYPO3 Extension Static File Cache

Dokumention Extension Static File Cache

Preload von Fonts: Google und Font Awesome

Wenn man das Design einer Webseite umsetzt, bindet man heutzutage in den meisten Fälle externe Ressourcen in die Seite ein. Neben CSS und JavaScript Frameworks wie Bootstrap nutzt man Schriftarten wie Google Fonts oder Font Awesome, die ein eigenständiges Aussehen der Seite ermöglichen. Beide Sourcen kann man von externen Servern laden, besser ist jedoch meist der eigene Webserver, vor allem wegen des besseren Datenschutzes für die Besucher Ihrer Webseite. 

Um die Schriftarten aber vom Ladeprozess der Seite zu trennen, empfiehlt Google das Vorladen der Dateien. Sinn dieser Technik ist dabei, dem Endgerät bereits bei einem frühen Stadium des Ladens der Webseite zu sagen, dass im weiteren Verlauf noch Dateien benötigt werden und der Browser diese bereits parallel zum weiteren Quelltext vom Server anfordern kann. In der Zwischenzeit kann man Texte wie z. B. Überschriften mit einer Standardschrift darstellen, über das swap-Attribut im CSS wird dann die Headline in der gewünschten Schriftart dargestellt, sobald diese geladen ist. 

Die Einbindung im TypoScript kann wie folgt aussehen:

 page {
  headerData { 
    10 = TEXT
    10.wrap = <link 
      rel="preload" 
      href="/extension/Resources/Public/fonts/fa-regular-400.woff2" 
      as="font" 
      crossorigin>
  }
}

Eine ausführliche Beschreibung des Preload von Fonts finden Sie an diesen Stellen auf unserer Webseite: 

Google Fonts lokal und mit preload laden

Font Awesome Icons lokal speichern und mit preload laden

Caching Richtlinie mit .htaccess: browserseitigen Cache nutzen

Vielleicht ruft ein Besucher aber nicht zum ersten Mal Ihre Webseite auf, sondern hat dies bereits zuvor getan und kommt nun wieder. In diesem Fall können wir den Browser-Cache auf dem Endgerät des Benutzers nutzen, um damit nur die frischen Inhalte und der gesamte HTML-Code der Webseite zu laden. Schriftarten wie Google Fonts oder Symbole auf Font Awesome Basis hingegen hat sich das Endgerät bereits heruntergeladen. An dieser Stelle können wir den browserseitigen Cache des Endgerätes nutzen, was Google Lighthouse ausdrücklich als Umsetzung einer Caching Richtlinie empfiehlt. 

Der Gedanke dahinter: Wenn jemand Ihre Webseite zum wiederholten Male mit dem Smartphhone oder dem Desktop-Rechner besucht, sieht der Browser auf dem Endgerät nach, ob bereits bestimmte Bestandteile der Webseite auf dem Gerät vorliegen. Befindet sich das Header Bild bereits im Zwischenspeicher? Sind die Font Awesome Dateien bereits heruntergeladen? Dies überprüft der Browser beim Laden der Seite. 

Wenn Sie TYPO3 standardmäßig installieren, schreibt das Content Management System eine eigene .htaccess Datei auf Ihren Server, die eine ganze Menge an Verhaltensweisen des Webservers regelt. Ein Bestandteil der .htaccess ist dabei die Steuerung des Browser Cache auf dem Endgerät des Benutzers. Für eine ganze Reihe von Dateien, die vom Browser beim Laden der Seite angefordert werden, ist diese Zeit auf eine Woche begrenzt. Google Lighthouse empfiehlt die Ausweitung des Zeitraums, in dem diese Dateien gecacht werden sollen, auf ein Jahr. Der Source Code in der .htaccess sieht dann etwa wie folgt aus: 

 <IfModule mod_expires.c>
  [...]
  ExpiresByType audio/ogg            "access plus 1 year"
  ExpiresByType image/gif            "access plus 1 year"
  ExpiresByType image/jpeg           "access plus 1 year"
  ExpiresByType image/png            "access plus 1 year"
  ExpiresByType image/svg+xml        "access plus 1 year"
  ExpiresByType image/webp           "access plus 1 year"
  ExpiresByType video/mp4            "access plus 1 year"
  [...]
</IfModule>

Eine ausführliche Schilderung des Quellcodes in einer .htaccess finden Sie auch im Wiki unserer Agentur: 

Caching Richtlinie umsetzen

CSS und JavaScript Dateien komprimieren und zusammenfassen

Das Content Management System TYPO3 kommt als Standard bereits mit der Möglichkeit, die CSS- und JavaScript Ressourcen zum Aufbau einer Webseite zu reduzieren. Dabei spielen zwei Faktoren eine Rolle: 

  • Die Komprimierung (compress) der Dateien löscht Leerzeichen, unnötige Zeichen und optimiert den Quellcode von CSS- und JavaScript-Dateien 
  • Die Zusammenfassung der Dateien (concatenate) schreibt den Quellcode in möglichst wenige einzelne Dateien, was die Anzahl der Netzwerkzugriffe reduziert 

Beide Maßnahmen zusammen können wir in TYPO3 recht einfach über das TypoScript zur Konfiguration der Seite steuern: 

 config {
  compressCss = 1
  compressJs = 1
  concatenateCss = 1
  concatenateJs = 1
}

Wenn die Dateien nun vom Webserver Ihrer TYPO3 Webseite ausgeliefert werden, sehen Sie hinter dem Link zur automatisch generierten CSS- oder JS-Datei eine Zahl. Dabei handelt es sich um einen Timestamp, also die Zahl der Sekunden seit dem Beginn der UNIX-Periode Anfang 1970. Ein Endgerät vergleicht die Zeitangabe mit der eigenen der Datei, die es im Browser-Cache findet. Ist die Datei im Cache des Browser jünger als im Timestamp angegeben, nimmt der Browser dieses CSS oder JavaScript aus dem eigenen Cache und spart sich den Zugriff ins Internet. Wenn die Datei auf dem externen Server, z. B. nach Laden und Neuaufbau des serverseitigen Caches, jedoch jünger ist, wird die alte Datei auf dem Endgerät gelöscht und die neue heruntergeladen. Damit bringt TYPO3 eine hervorragende Möglichkeit zur Steuerung der Zugriffe mit. 

Farben von Schriften auf Hintergrund

Schließlich gibt es einen Punkt, der bei Webdesignern gerne für Aufregung sorgt. Google Lighthouse rendert eine zu überprüfende Webseite und überprüft eine Vielzahl von Optionen. Eine davon ist die Farbgebung der Seite. Sind Links auf einer Webseite überhaupt lesbar? Dazu überprüft Lighthouse die Farbgebung von Schriften auf ihrem Hintergrund. Dies führt z. B. bei Buttons oder bei einem Footer mit einer abgetönten Farbe dazu, dass man vor einem zu geringen Kontrast gewarnt wird. Was im PDF oder Adobe XD Dokument gut aussah, erfordert vor dem Livegang der Seite noch Nacharbeit. 

Zudem sollten Sie die Vorschläge der Google Search Console bedenken, wenn sich z. B. bei einer Navigation die Textlinks zu nah beieinander befinden. Auch dies kann dazu führen, dass man ein fertiges Design nachträglich bearbeiten muss.