SEO in TYPO3 mit Bootstrap 5: CSS, SASS, jQuery und TypoScript

SEO für eine TYPO3 Webseite bedeutet nicht nur, dass man Texte mit Blick auf Suchmaschinenoptimierung gestaltet, Überschriften anordnet und Bilder bearbeitet. Auf der technischen Ebene bindet man CSS und JavaScript Frameworks wie Bootstrap 5 und jQuery ein, um die Webseite responsiv und für mobile Endgeräte nutzbar zu machen. Man macht sich dabei über die Struktur des HTML Source Codes Gedanken und überlegt sich, ob man bei den über TypoScript eingebundenen CSS- und JavaScript-Ressourcen nicht noch ein wenig optimieren kann, vielleicht möchte man einen Precompiler wie SASS oder LESS nutzen. Wenn man mit Google Lighthouse oder anderen Tools zum Überprüfen einer Webseite ab dem Zeitpunkt arbeitet, da diese Seite die Entwicklungsumgebung verlassen hat und auf einem Staging oder Live Server verfügbar ist, stößt man unweigerlich darauf, dass Style Sheets und JavaScript Frameworks wie jQuery eine Menge Ladezeiten mit sich bringen, zu viele Zugriffe erfordern und die Webseite langsam machen. Was man für eine erfolgreiche SEO aus technischer Sicht bei TYPO3 optimieren kann, haben wir in diesem Kapitel für Sie aufgeschrieben. 

SASS Precompiler für CSS und JavaScript Ladezeiten reduzieren

Bei so gut wie jeder Webseite, die ich in den letzten Jahren mit Google Lighthouse auf SEO hin überprüft habe, meckert das Kontrollsystem, dass man zu viel Code im CSS und in JavaScript mit sich rumschleppt. Natürlich gestaltet man seine Webseite heute responsiv und man nutzt Frameworks wie Bootstrap für Layouts und Funktionen auf verschiedenen Bildschirmen und Endgeräten. Da fällt eine Menge Code an! Und was noch hinzukommt: bei der technischen Kontrolle der Suchmaschinenoptimierung mit Lighthouse als eigenständigem Tool und der Erweiterung im Browser bei den Developer Tools sagen einem beide in einer Seite sehr genau, welche Teile des Codes nicht benutzt werden. Nun kann man auf die Idee kommen, diese Teile aus dem Code zu entfernen, und auch dafür gibt es wieder Bibliotheken, mit denen man den Quellcode reduzieren kann. 

Wer aber genauer in den Code reinsieht, gerade in den Entwicklertools seines Browsers, stellt fest, dass das Tool deswegen meckert, weil Formatierungen für Auflösungen mit media Queries im Style Sheet stehen, die für das aktuelle Endgerät nicht benötigt werden. Entfernt man diese aus dem Quellcode und wechselt man zum Testen die Auflösung, funktioniert die Seite nicht mehr. Man sollte also genau darauf achten, was man aus dem Code rausnimmt. Mehr zu jQuery dabei weiter unten. 

Bootstrap mit SASS Precompiler und TypoScript einbinden

Es gibt allerdings andere Möglichkeiten, Quellcode und Ladezeiten zu sparen. Sehen wir uns das mal an: Man bindet in seine TYPO3 Webseite eine ganze Reihe von CSS-Dateien ein und nutzt Kompression und Zusammenfassung (Compress und Concatinate) des TYPO3 Kernel, um Zugriffe und Daten zu reduzieren. Mit einem entsprechenden Framework kann man zudem die Möglichkeit nutzen, die SCSS- oder LESS-Dateien zur Laufzeit kompilieren zu lassen. Nicht unbedingt die beste Lösung, denn man bürdet dem Server mehr Arbeit für den immer gleichen Vorgang auf. Also belassen wir es bei Preprocessor und bauen uns das Style Sheet auf unserer Entwicklungsumgebung aus den SCSS Sourcen selbst zusammen. 

Dafür installiert man sich über den Node.js Paket Manager eine entsprechende Umgebung, näheres dazu unten im Link. Abhängig von der Entwicklungsumgebung, mit der man arbeitet, kann man nun automatisch oder per Tastenkombination den Compiler starten. Das Ergebnis ist im Idealfall eine einzige CSS-Datei. 

Über eine zentrale Datei steuern wir den Precompiler und sagen ihm, welche Dateien zu einem CSS zusammengebaut werden sollen: 

 ### Listing 1
@import "Content/_root";
@import "Content/_fonts";
@import "content/_content";
@import "Content/_navigation";

Das erzeugte Style Sheet bauen wir dann über einen der üblichen Wege mit TypoScript in unser TYPO3 Projekt ein: 

 ### Listing 2
page {
  includeCSS {
    css = EXT:extension/Resources/Public/css/styles.css
    css.media = all
  }
}

Bootstrap SCSS Module zur Compilierung auswählen

An dieser Stelle kommt das Hirn des Entwicklers ins Spiel. Denn nun überlegt man sich: Was brauche ich überhaupt für mein Projekt? Hier erweist es sich als Vorteil, dass Bootstrap neben der Option der direkten Einbindung des Styles Sheets auch die SCSS-Sourcen mitbringt, so dass man sich sein eigenes CSS kompilieren kann. Wir binden dazu einfach die entsprechende Datei aus dem Bootstrap Framework mit ein: 

 ### Listing 3
@import "bootstrap/scss/bootstrap";
@import "Content/_root";
@import "Content/_fonts";
@import "content/_content";
@import "Content/_navigation";

In diesem Fall haben wir die Datei bootstrap.scss eingebunden. Wenn man nur das Grid braucht oder die Utilities nutzen möchte, kann man eine der anderen Dateien einbinden. 

Blickt man nun in den Quelltext der eingebundenen Datei, findet man den Verweis auf weitere SCSS-Dateien, die einzelne Module aus Bootstrap einbinden: 

 ### Listing 4
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
[...]
@import "accordion";
@import "breadcrumb";
@import "pagination";
[...]

Nun lehnen wir uns zurück und überlegen: Was brauche ich davon? Das gute daran ist, dass man in jedes der Module reinsehen und sich ansehen kann, wozu dieser Quellcode dient. Für die Navigation in Bootstrap brauchen wir z. B. Listings. Man sieht sich also das Projekt durch, was an Modulen eingebunden ist. Brauche ich das Accordion? Das Carousel für Slider? Wenn diese nicht vorkommen, kann man Modul für Modul abschalten.

Vergessen Sie dabei Ihre Erweiterungen nicht! Wer z. B. die Extension Cookieman nutzt, braucht das Accordion, um die Auswahl der Cookies zu steuern. An diesem Punkt des Projekts können Sie also eine ganze Menge auf den Prüfstand stellen. Je nach Diskussion mit dem GIT Leiter des Projekts können Sie nun die nicht benötigten Zeilen aus der eingebundenen Datei löschen oder auskommentieren. Letzteres ist meine bevorzugte Methode, denn so lässt sich das Accordion Modul nach dem Wechsel der Cookie Extension leicht wieder zum Leben bringen. 

P.S.: Wenn man die Webseite debuggt, findet man im oftmals in der Console die Fehlermeldung, dass die Mapping Datei für das JavaScript nicht gefunden werden kann. Mit dieser Datei geben Sie Entwicklern die Möglichkeit, den komprimierten Code des JavaScript in der Webseite zu debuggen. Wenn Sie eine eigene kompilierte Datei nutzen, die im von TYPO3 geschriebenen Verzeichnis /typotemp liegt, stimmt der Link aus der ursprünglich eingebundenen Datei von Bootstrap nicht mehr. Wenn Sie also die Datei bootstrap.min.js einbinden, passen Sie den Pfad zur Mapping Datei entsprechend an: 

 ### Listing 5
//# sourceMappingURL=/typo3conf/ext/file/Resources/Public/dist/js/bootstrap.min.js.map

Wählen Sie hier bitte den Pfad zur Datei in Ihrer TYPO3 Webseite ab der Root Ihres Projektes aus.

jQuery mit Bootstrap 5 und TypoScript Templates reduzieren

Sobald man sich für die Arbeit mit Bootstrap 5 entschieden hat, überlegt man sich, ob man die Webseite nicht noch weiter gründlich renovieren soll. Weniger Quellcode, der geladen werden muss, ist natürlich immer gut. Der Vorteil der neuen Version von Bootstrap ist dabei: Das Framework kommt ohne jQuery aus! Egal wie man zu diesem beliebten JavaScript Framework steht, es ist auch in der komprimierten Version ein dicker Brocken und man möchte doch vielleicht gerne darauf verzichten. 

Bootstrap bringt als eigene Bausteine einer Webseite beispielsweise Accordions und Slider mit. Hier sollte man sich mit Grafikabteilung und Marketing kurzschließen, ob die etwas reduzierten Layouts und Funktionen beider Module von Bootstrap für die Webseite nicht ausreichen. Für unser Projekt Georgienseite haben wir genau diese Entscheidung getroffen. Damit konnten wir jQuery aus der Seite entfernen. Einige Funktionen wie der Wechsel des Font Awesome Symbols in der Header Navigation sind nun entweder selbst geschriebene JavaScript Funktionen oder mit CSS3 animiert. 

Für manche Anwendungen auf einer Webseite braucht man aber trotzdem jQuery. Dies gilt z. B. für Bildergalerien, aber auch für Kontaktformulare mit Powermail, denn die Fehlerkontrolle über das JavaScript Framework Parsley braucht jQuery für seine Funktionen. An dieser Stelle können wir die Möglichkeiten von TYPO3 nutzen, Erweiterungstemplates für TypoScript anzubinden. So haben wir für den Seitenbaum mit den Galerien und das Kontaktformular in der Georgienseite die Einbindung von jQuery über ein Extension Template geregelt: 

 ### Listing 5
page {
  includeJSFooterlibs {
    file01 = EXT:provider/Resources/Public/js/jquery-3.6.0.min.js
  }
}

Damit können wir die Ladezeit unserer TYPO3 Webseite weiter senken und technische SEO betreiben. 

Links mit weiteren Informationen

SASS Guide mit Downloads, Tutorial und Syntax:

SASS Lang Guide

Visual Studio Code: Compiler als Task anlegen

Wiki Agentur IBK: SASS und CSS