Google bietet seit längerer Zeit schon einen Service an, mit dem die Performance von Website getestet werden kann. Das Tool nennt sich PageSpeed Insights und kann hier aufgerufen werden. Nach der Analyse zeigt das Tool unterschiedliche Optimierungsmöglichkeiten an. Für ein paar dieser Optimierungen nutze ich den Javascript-Taskrunner Grunt.
HTML, CSS und Javascript reduzieren
HTML minimieren
Die Minimierung des ausgegebenen HTML-Codes der Website kann ganz einfach durch eine TYPO3-Erweiterung nachgerüstet werden. Diese TYPO3-Extension nennt sich HTML Minifier (html_minifier, https://typo3.org/extensions/repository/view/html_minifier) und funktioniert sofort nach der Installation. Es sind keine weiteren Konfigurationen notwendig. Die Erweiterung entfernt alle unnötigen Leerzeichen und leere Zeilen im Code, wodurch einige Kilobyte eingespart werden können. Ich empfehle die Extension erst in der Finalisierungsphase zu installieren, da der reduzierte HTML-Code die Leserlichkeit verringert und so das Debugging schwieriger macht.
Etwas komplizierter wird es bei den externen Scriptdateien und Stylesheets, die in TYPO3 eingebunden werden. Jetzt kommt der auf Node.js basierende Javascript-Taskrunner Grunt ins spiel.
CSS minimieren
Ich setze aus verschiedenen Gründen bei meinen Projekten auf LESS anstatt purem CSS. Damit habe ich die Möglichkeit, meine Stylesheets sinngemäß in mehrere Dateien aufzuteilen und trotzdem nur eine CSS-Datei für die gesamte Website einzubinden. Dies spart unnötige HTTP-Requests und lässt somit die Website schneller laden. Zum Kompilieren der LESS Dateien in die fertige CSS-Datei nutze ich das Node Paket grunt-contrib-less (https://github.com/gruntjs/grunt-contrib-less), welches die CSS Datei bereits fertig bereinigt und minimiert. Um die Kompilierung nicht immer selbst anstoßen zu müssen, wird mittels grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch) die Kompilierung nach jedem Speichern durchgeführt.
Javascript minimieren
Ähnlich wie bei den Stylesheets werden auch die unterschiedlichen JavaScript-Files beim Speichern (grunt-contrib-watch) mittels Node Paket grunt-contrib-uglify (https://github.com/gruntjs/grunt-contrib-uglify) minimiert. Die minimierten JavaScript-Dateien werden dann anstatt der Source-Files in das TYPO3 Projekt integriert.
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
Verwendet man nur eine CSS-Datei, die im <head> der Webseite geladen wird, blockiert dieser Stylesheet das Laden der Seite. Google bestraft die Website dann mit einer schlechteren Bewertung. Ziel dieser Optimierung ist es, das CSS der Seite in 2 Bereiche aufzuteilen. Der erste Bereich beinhaltet die CSS Definitionen für die sofort sichtbaren Elemente der Website. Dieser CSS Code wird am besten minimiert und inline in den <head> der Website geschrieben. Der zweite Teil des CSS beinhaltet den Rest der Definitionen und wird erst am Seitenende angefügt und am besten mit JavaScript nachgeladen, damit dieser das Rendern der Webseite nicht blockiert.
Mit dem Node Package CriticalCSS (https://github.com/filamentgroup/criticalCSS) kann man sich mittels Grunt die CSS-Definitionen, die für den „above the fold“ Inhalt benötigt werden, ganz einfach generieren lassen. Das Ergebnis wird dann mittels grunt-contrib-cssmin (https://github.com/gruntjs/grunt-contrib-cssmin) minimiert und per typoscript inline in den <head> der Webseite eingefügt.
Bilder optimieren
Mit dem Node Package grunt-image (https://www.npmjs.com/package/grunt-image) kann man per Kommandozeile alle Bilder (JPG, GIF, PNG, SVG,…) optimieren lassen. Diesen Schritt führe ich manuell für jedes Projekt aus, sobald neue Bilder im fileadmin von TYPO3 angelegt wurden. Die Optimierung dauert je nach Projekt zwischen 5 und 15 Minuten. Wichtig dabei ist, dass man auch die bereits von TYPO3 neugerechneten Bilder unter den Processed Files in die Optimierung miteinbezieht.
Fazit
Wie stark der PageSpeed Performance Index von Google in die Berechnung des Rankings miteinbezogen wird, darüber kann man natürlich nur spekulieren. Google lässt sich nicht in die Karten schauen, wie die Suchmaschine ihre Rankings berechnet. Die oben angeführten Performance-Optimierungen dienen aber nicht alleine der Suchmaschinenoptimierung. Letzen Endes lädt die Website schneller und beschert dem Benutzer eine deutlich bessere Nutzererfahrung.
