SEO mit CSS und JavaScript für TYPO3

CSS und JavaScript komprimieren und verketten

Wenn man heutzutage eine Webseite aufbaut, kommt man um den Einsatz von JavaScript meist nicht herum. Man installiert sich dazu ein JavaScript Framework wie Bootstrap oder Foundation und nutzt dessen Techniken, um die Webseite zu gestalten. 

Der wichtigste Aspekt dabei ist meist die Navigation. Ein zeilenweiser Aufbau der gesamten Seite und die Anordnung von Inhaltselementen in einer Seite in Abhängigkeit von der zur Verfügung stehenden Anzahl an Pixeln lässt sich mit ein wenig CSS erledigen. Wenn es jedoch darum geht, die Navigation in Abhängigkeit von der zur Verfügung stehenden Breite in eine andere Ansicht umzuschalten und aus Links Dropdown Menus zu machen, kommt in der Regel JavaScript zum Einsatz. 

Dieser Einsatz eines JavaScript Frameworks nimmt uns meist mehrere Wochen an Arbeit ab. Wenn man dann in die Dokumentation eines Frameworks wie Bootstrap hineinsieht, stellt man fest, dass es noch mehr Möglichkeiten gibt als nur die Navbar und die Grid Technologie. 
Der Nachteil dabei: man lädt eine Menge Quelltext für die Webseite. Das CSS von Bootstrap in der Version 4.5 kommt mit 194 KB. Dazu kommt noch das JavaScript mit 134 KB. Das ist eine Menge Holz! Und wer macht sich schon auf den Weg, das JS zu entschlacken und alles rauszuwerfen, was man nicht braucht? 

Doch TYPO3 ist ein ausgereiftes Content Management System und bietet uns mehrere Möglichkeiten an, aus diesem Sachverhalt herauszukommen. Das wichtigste ist dabei: Setzen Sie Ihre Daten auf Diät! 

Die Strategie heißt daher: 

  • Komprimieren Sie die Daten! 
  • Fassen Sie die Daten zusammen! 
     

Gründe zur Reduzierung der Datenmenge

Warum will man überhaupt die Datenmenge reduzieren, die beim Aufruf der Webseite übertragen wird? Nun, dafür gibt es mehrere Gründe: 

  • Für jede Datei, die der Browser nachladen muss, erfolgt eine Anfrage an den Webserver – das kostet jedesmal Zeit und diese wird spürbar reduziert 
  • Durch die Kompression wird die zu übertragende Datenmenge oft um mehr als 50% reduziert, meist noch stärker. Bei den heutigen Frameworks wie Bootstrap können dies bei mobilen Endgeräten mehrere Sekunden Ladezeit bedeuten 
  • Und nicht zu vergessen: für Konkurrenten ist es schwieriger, Einblicke in den Code unserer Webseite zu nehmen 

Die ersten beiden Gründe berücksichtigt Google in seinem Page Rank. Sie müssen immer daran denken, dass Google die 2015 verkündete Mobile First Strategie seit 2020 konsequent umsetzt. Webseiten werden also nun nur noch in ihrer mobilen Version gecrawlt. Wenn Sie dies nicht berücksichtigen, droht Ihnen ein Absturz im Page Rank. 

Komprimieren Sie CSS und Javascript

Kommen wir zum ersten Punkt: Wir möchten die Daten reduzieren. Nun, ein ausgereiftes JavaScript und CSS Framework wie Bootstrap bietet uns per se bereits eine Möglichkeit dazu: Sowohl die einzubindende CSS- als auch die JavaScript-Datei liegen in einer normalen und einer minimierten Variante vor. Das bedeutet: Bei der minimierten Version der Datei werden Zeilenumbrüche und Einrückungen entfernt, Zeichen wie das letzte Semikolon beim CSS verschwinden und Zahlenwerte werden teilweise durch exponentielle Werte ersetzt. Bei JavaScript werden zudem oft Funktionen bearbeitet. Dies reduziert die Datenmenge enorm! Bei Bootstrap, um bei diesem Beispiel zu bleiben, nimmt die JavaScript Datei von 134 KB auf 59 KB ab. Das auf Diät gesetzte CSS schrumpft immerhin von 194 KB auf 157 KB. Bei jQuery, der sehr oft genutzten JavaScript Bibliothek, die Bootstrap als Grundlage braucht, ist der Effekt noch gewaltiger. Bei der Version 3.5.1 schrumpft die Datenmenge von 281 KB auf 88KB! 

Die Einbindung in Ihr TypoScript Setup kann dann wie folgt aussehen: 

 page.includeJSFooterlibs {
    file10 = EXT:provider/Resources/Public/js/jquery-3.5.1.min.js
    file20 = EXT:provider/Resources/Public/js/bootstrap/js/bootstrap.min.js
}

Hier gibt es allerdings einen Haken: Wenn man an einer Webseite arbeitet, möchte man meist sehen, wie die Scripte arbeiten und in welcher Zeile im CSS ein Style steht. Dann ist man froh, wenn man im Inspector seines Browsers „Zeile 334, Zeichen 12“ liest und nicht „Zeile 2, Zeichen 9.993“. Also nimmt man für die Entwicklungsversion der Webseite die nicht minimierten Varianten der eingebundenen Dateien. Diese könnte man nun im System vorhalten. 

Die Einbindung im TypoScript Setup Ihrer Webseite kann dann so aussehen: 

 page.includeJSFooterlibs {
    file10 = EXT:provider/Resources/Public/js/jquery-3.5.1.js
    file20 = EXT:provider/Resources/Public/js/bootstrap/js/bootstrap.js
}

Man sieht: Der Unterschied ist gering. Aber man sollte nicht vergessen, vor dem Livegang der Webseite wieder die minimierten Versionen der Scripte einzubinden. Zudem gibt es eine Möglichkeit, dies in der Entwicklungs- und Live-Version der Webseite unterschiedlich zu handhaben. TYPO3 kann uns dies abnehmen. Doch dazu weiter unten. 

Was ist mit Ihrem eigenen Code? Wenn Sie sicher gehen möchten, dass Ihre selbst erstellen CSS- und JavaScript-Dateien auch in der minimierten Version korrekt arbeiten, können Sie diese selbst minimieren. Hier eine Auswahl von Tools, die dieses für uns erledigen: 

►https://javascript-minifier.com/
►https://jscompress.com/
►https://www.minifier.org/

Dieser Schritt ist nicht unbedingt notwendig, erlaubt uns aber die volle Kontrolle über den gesamten Quellcode, der in unsere Webseite eingebunden wird. 

Einbindung mit TypoScript steuern

Wenn wir uns ansehen, wie TYPO3 den Quelltext unserer Webseite aufbaut, werden wir so etwas wie diesen Code vorfinden: 

 <link rel="stylesheet" type="text/css" href="/[...]/css/kontakt.css?1592650755" media="all">
<link rel="stylesheet" type="text/css" href="/[...]/css/navigation.css?1594587996" media="all">

Was an diesem Code auffällt: Jede eingebundene Datei hat hinter dem Link eine angefügte Zahl. Dabei handelt es sich um einen Timestamp, also die Zahl von Sekunden seit dem 1. Januar 1970, dem Beginn der so genannten UNIX-Periode. Diese Zahl spiegelt wider, an welchem Datum eine Datei zuletzt aktualisiert worden ist. 

Wenn Sie nun eine Webseite zu einem wiederholten Mal aufrufen, dann prüft Ihr Browser, ob Sie dies zuvor schon getan haben und welche Dateien möglicherweise im Cache Ihres Endgerätes gespeichert sind. Dabei läuft der Prozess ungefähr ab wie folgt: 

  • Sie besuchen eine Webseite, die Sie eine Woche zuvor schon einmal aufgerufen haben 
  • Ihr Browser stellt fest, dass er im Cache eine CSS-Datei hat, die genauso heißt wie die auf dem Webserver stehende, die er herunterladen soll 
  • Anhand des Timestamp sieht Ihr Browser, dass die Datei auf dem Webserver älter ist als die im Cache Ihres Gerätes 
  • Der Browser nimmt also die CSS-Datei aus dem Cache und erspart sich die Verbindung und Übertragung vom Webserver 

Somit können wir mit den ganz normalen Bordmitteln von TYPO3 durch den Einsatz der TypoScript Objekte 

 page.includeCSS {}

und 

 page.includeJSFooterlibs {} 

einiges erreichen, um unsere Webseite schneller laden zu lassen. TYPO3 geht aber noch einen Schritt weiter. 

Fassen Sie die Dateien zusammen!

In den guten alten Zeiten des Internet war es Standard, das man versucht hat, die Anzahl der Dateien zu minimieren, die beim Aufruf einer Webseite in den Browser geladen werden, zu minimieren. Dies galt in erster Linie für das  HTTP/1.1 Protokoll. Mit der Unterstützung für HTTP/2 ist dies nicht mehr unbedingt notwendig, denn dieses erlaubt einem Browser das Laden mehrerer Dateien bei einer einzigen Verbindung. Auch bei Einsatz dieser Technologie ist es vorteilhaft, alle Dateien möglichst zusammenzufassen, um Suchmaschinenoptimierung zu betreiben. Denn ein SEO Faktor ist die technologische Ausgestaltung der Webseite im Hinblick auf die Kommunikation mit ihrem Webserver. 

Dafür bietet TYPO3 die Option des concatenateCss und des concatenateJs an. Beide Befehle bewegen unser CMS dazu, alle CSS- und JavaScript-Dateien soweit wie möglich zusammenzufassen. 

Wie oben bereits angesprochen, gibt es dabei die Option, zwischen der Entwicklungs- und der Live-Umgebung des Webservers zu unterscheiden. Deshalb ist dieser Punkt der Konfiguration in TypoScript einer der wenigen, die man nicht in einer TypoScript-Datei ablegt und über mehrere Instanzen hinweg per Quelltext verwaltet, sondern man legt dies direkt in der Datenbank beim Setup des Root Template ab. 

Legen Sie Dateien lokal ab!

Eine weitere Strategie bei der Gestaltung des TypoScript Setup einer TYPO3 Webseite sollte es sein, möglichst viele Dateien lokal abzulegen. Dafür gibt es zwei Argumente: 

  • SEO 
  • Datenschutz 

Aus Sicht erfolgreicher SEO sollte man Dateien für CSS und JavaScript auf dem eigenen Webserver ablegen, um sie komprimieren und verketten zu können. Weniger Dateien und weniger Datenmenge bedeuten geringere Ladezeiten und weniger Zugriffe, dies bezieht Google in den Page Rank mit ein und deswegen ist dies ein wichtiger Faktor für die Suchmaschinenoptimierung. 

Ein zweiter und seit Ende 2019 sehr wichtig gewordener Faktor ist jedoch der Datenschutz. Denn es ist auf der einen Seite sehr bequem, Schriftarten von dem Server der Google Fonts einzubinden. Beim Besucher erzeugen Sie damit jedoch jedes mal eine Weitergabe der IP-Adresse des Besuchers zu Google und damit kann Google natürlich mehr Daten über Ihre Besucher sammeln. Dies müssen Sie zudem in der Datenschutzerklärung vermerken. 

►Erfahren Sie hier, wie man Google Fonts lokal einbindet

Um sich den Aufwand zu sparen, die Webseite alle paar Wochen von den technischen Grundlagen auf den neuesten Stand zu bringen, ist es eine gute Taktik, den Code für bestimmte Bibliotheken nicht direkt auf dem eigenen Server zu lagern, sondern diesen aus einem Content Delivery Network (CDN) zu laden. Dies macht man z. B. auch gerne bei speicherintensiven Anbindungen wie Bildern und Videos. 

Der Webserver eines CDN ist eigentlich strohdumm. Er rechnet keine Inhalte aus der Datenbank zusammen, er holt keine HTML-Bausteine aus einem Cache. Solch ein Server bekommt einfach die Anforderung, ein Bild oder den Stream eines Videos von seiner Festplatte zu packen und auf die Reise zu der IP-Adresse eines Besuchers zu schicken. Dafür macht er dies sehr schnell. Und genau deshalb nutzt man ein CDN, um den eigentlichen Webserver von solchen Arbeiten zu entlasten. 

Mit den Anforderungen an einen verbesserten Datenschutz ist es heute jedoch nicht mehr unbedingt die beste Variante, ein CDN einzusetzen. Wer eine Webseite mit einer Unmenge extern eingebundener Bilder oder Videos betreibt, für den ist ein CDN natürlich eine schicke Sache. Wenn man den Code Server von jQuery jedoch bislang genutzt hat, um immer die aktuellste Version dieser JavaScript-Bibliothek herunterladen, sollte man nun darüber nachdenken, dies in Zukunft auf dem eigenen Server abzulegen. 
Und damit kommen wir zum Kern der Sache. Angenommen, Sie nutzen Content Delivery Networks zur Einbindung externer Sourcen. Dann haben sie beispielsweise folgende externe Zugriffe: 

  • Google Fonts 
  • code.jquery.com 
  • Bootstrap CDN 
  • Youtube 

Für jede Quelle macht der Browser eine eigene Verbindung auf. Diese externen Einbindungen kann TYPO3 nicht zu einer Verbindung zusammenfassen. Damit können Sie also die Option der Verkettung nicht komplett nutzen. Überlegen Sie also, was Sie in Ihrem Projekt auf dem eigenen Server ablegen können. 

Für das Nervenkostüm von Entwicklern zudem wichtig: Man weiß immer genau, welche Version von jQuery oder Bootstrap man eingebunden hat. Unliebsame Überraschungen beim Sprung einer Version bleiben Ihnen somit erspart. 

Extensions nicht ab Root Template einbinden

Im Rahmen einer durchdachten SEO in einer Webseite mit TYPO3 sollten Sie noch eine weitere Überlegung anstellen. Diese betrifft die Extensions, die Sie in Ihre Webseite einladen. 

Eine mächtige Extension wie Powermail kommt oft mit eigenen CSS- und JavaScript-Dateien, die alle in Ihre Webseite eingebunden werden wollen. Stellen Sie nun einmal vor: Sie haben 500 Seiten in Ihrer Webseite. Kontaktformulare auf der Basis von Powermail haben Sie jedoch nur in einem Verzeichnis mit allen Kontaktmöglichkeiten Ihres Unternehmens. Warum also sollten die CSS- und JavaScript-Sourcen der Extension in allen Seiten eingebunden werden? 

Hier ist die Überlegung statthaft, dass man bei der Einbindung von Powermail ein Erweiterungs Template anlegt und dort zusätzlich die Plugin Objekte ins System lädt. Der gesamte Quellcode für CSS und JavaScript bei allen anderen Seiten außerhalb des Kontaktbereichs Ihrer Webseite bleibt damit schlank. 

Diese Verhaltensweise sollten Sie dann anwenden, wenn Sie genau wissen, ab welcher Stelle in Ihrer Webseite eine bestimmte Extension zum Einsatz kommt. Beachten Sie dabei bitte auch, dass dafür bei der Kompression und Verkettung Ihrer CSS- und JavaScript-Dateien jeweils neue Dateien geschrieben werden müssen. 

TypoScript für Kompression und Verkettung

Die Konfiguration für Kompression und Verkettung in TypoScript setzen Sie am Besten im Setup Ihres Root Template in der Datenbank. Damit stellen Sie sicher, dass jeder Server ein individuelles Setup bekommt.

Entwicklungsumgebung: Keine Komprimierung und Verkettung

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

Liveumgebung: Komprimierung und Verkettung aktiviert

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

Thomas Berscheid ⧉ 06.08.2020