PageSpeed-Bewertung - Platz 4
Der Stachel saß tief. Kürzlich bewertete ostec bei Sputnika die Websites der lokalen Agenturen auf Basis von Google PageSpeed - und tyclipso.net landete nur auf dem undankbaren vierten Platz.
Nachdem wir diese bittere Tatsache die Weihnachtszeit über bedauerten, begann das neue Jahr sogleich mit dem Herauskitzeln der letzten paar Performance-Prozente. Ziel: 100 PageSpeed-Punkte für Desktop und Mobil. Bisher waren es rund 80.
Die wichtigsten Hausaufgaben hatten wir schon zum Relaunch im Sommer erledigt. Bilder optimieren, Ressourcen cachen, CSS und JS minifizieren - all das gehört schon lange zum Standard, vieles macht unser myty schon von selbst.
Ziel der Optimierungen
Um den Google-Olymp zu erklimmen, muss man aber vor allem eine Hürde meistern:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
In der Praxis bedeutet das zum einen, dass JS-Ressourcen möglichst asynchron oder am Ende der Seite eingebunden werden. Zum anderen - und das ist der schwierige Teil - sollten die Styles der beim Seitenaufruf sichtbaren Elemente als <style>-Block im HTML eingebunden sein. Der Browser soll also schon vor dem Laden des Haupt-CSS in der Lage sein, die erste Ansicht zu rendern.
Die Herausforderung bestand darin, herauszufinden, welche CSS-Regeln für "Above-the-fold" relevant sind. Nachdem wir kurz in Erwägung zogen, diese herrliche Aufgabe einem besonders fleißigen BA-Studenten zu überlassen, entschieden wir uns doch für eine maschinelle Lösung.
PageSpeed-Optimierung mit Penthouse
Diese trägt den Namen Penthouse - ein unscheinbares, aber mächtiges Node.js-Modul, was ungefähr folgendes macht:
Eine Website per Headless Browser besuchen.
Das CSS komplett einlesen.
Anhand eines definierten Viewports (Breite, Höhe) ermitteln, welche Elemente "above the fold" sichtbar sind.
Alle Regeln aus dem CSS extrahieren, die für die Darstellung dieser Elemente notwendig sind.
Das Ergebnis kann man dann entweder direkt in seine (statische) HTML-Seite oder - wie in unserem Fall - in eine eigene kleine "critical.css"-Datei schreiben. Diese wird dann im Template inline in einen <style>-Block inkludiert - fertig!
Wir integrierten diesen Schritt in unseren Frontend-Deployment-Workflow, welcher auf Gulp basiert.
Der fertige Gulp-Task sieht so aus:
gulp.task('penthouse', function () { penthouse({ url: ['https://tyclipso.net'], css: 'css/theme.css', forceInclude: [ '.showMobile', '.appMainNavigation .activeNav', '.appMainNavigation .activeNav a', '.container' ], width: 1500, height: 800 }, function (err, critical) { var clean = new cleanCSS().minify(critical); fs.writeFile('css/critical.css', '{literal}' + clean.styles + '{/literal}'); }); });
Dieser Task sollte jetzt also immer ausgeführt werden, wenn man das CSS der Website anpasst. Unsere Entwickler werden durch gulp-notify am Ende des LESS-Tasks daran erinnert.
Nachdem wir nun also unsere "kritischen" CSS-Regeln direkt im Head stehen haben, bleibt nur noch, das Haupt-CSS asynchron zu laden. Einige Browser unterstützen diesen Ansatz bereits, für alle anderen gibt es die kleine Helper-Funktion loadCSS.
Die letzte Hürde zum PageSpeed Olymp
Zitternd vor Aufregung befragen wir nun also das PageSpeed-Orakel erneut demütig, ob wir endlich die Vollkommenheit erreichen. Die Antwort ist sinngemäß:
"Eigentlich schon, aber es gibt trotzdem nur 97 Punkte. Du bindest nämlich Google Analytics ein. Unwürdiger!"
Ja, richtig: Google PageSpeed wertet eine Website ab, wenn sie Google Analytics einbindet. Begründung: Das Browser-Caching für dieses Skript sei zu kurz eingestellt.
Man selbst hat keine Möglichkeit, diese Cache-Laufzeit zu beeinflussen. Es bleibt also nur die halblegale Variante, die Analytics-JS-Datei selbst zu hosten (und per Cronjob dafür zu sorgen, dass sie ständig aktuell ist). Oder der von uns gewählte pragmatische Ansatz: Kein Analytics für PageSpeed-Bots.
<script>
if(navigator.userAgent.indexOf("Speed Insights") === -1) {
//binde Analytics ein
}
</script>
Endlich: Volle Punktzahl!
Was dieser Score bezüglich SEO für eine genaue Bedeutung hat, steht natürlich auf einem anderen Blatt, das höchstens Google selbst kennt. Uns bleibt jetzt jedenfalls nur noch, zu hoffen, dass bei Sputnika bald mal wieder die Agenturen verglichen werden.