Bootstraps CSS optimieren

Die Webseite unseres Chors (gospeladlershof.de) besteht im Grunde nur aus einer einzigen Seite. Alle Informationen sind auf einer Webseite zusammengefasst und damit leicht für die im Browser interne Suchfunktion zu finden.

Ich hab mich nun daran gesetzt die Ladezeiten zu optimieren. Die Ergebnisse kann man sich bei Googles Pagespeed oder bei GTMetrix.com ansehen. In meinem ersten Schritt habe ich die nötigen CSS-Dateien konkateniert, also alle Stylesheets in eine Datei zusammengefasst. Weniger HTTP-Anfragen bedeuteten früher weniger Wartezeiten. Das stimmt mit HTTP/2 zwar so nicht mehr, aber wie man unten noch sieht spielt das für mich keine Relevanz.

Ich benutze für solche Aufgaben Gulp, der entsprechende Gulptask sieht so aus:

gulp.task('concat', function() {
	return gulp.src(['static/css/opensans.css', 'static/css/font-awesome.min.css', 'static/css/bootstrap.min.css'])
	.pipe(concat('concat.css'))
	.pipe(gulp.dest('./tmp/css/'));
});

UnCSS – Unnötiges CSS entfernen

Der zweite Schritt wird interessanter, hier entfernen wir unbenutzte CSS-Selektoren und verschlanken so unseren Code. Dafür benutzen wir die Bibliothek UnCSS von giakki aus Github, bzw. es gibt eine Version für Gulp. UnCSS funktioniert so:
Wir lesen unsere CSS-Datei(en) ein, spidern dann unsere  HTML-Seiten und schauen, welche CSS-Anweisungen wir benutzt haben. Diese speichern wir, der Rest kommt weg. Wird ja eh nicht benutzt!

Dieser Ansatz ist durchaus problematisch. Die Seite unseres Chors ist mit Bootstrap gestylt, ein riesiges CSS-Framework. Bootstrap ist komplex und hat viele verschiedene Module und Komponenten, manche davon können nur im Zusammenspiel mit JavaScript eingesetzt werden. Und hier ist auch schon das erste Problem. UnCSS erkennt nicht, wenn bestimmte CSS-Klassen erst durch Manipulationen im DOM gebraucht werden.
Ein Beispiel für so eine Manipulation wäre das Toggeln der Navigationsleiste auf mobilen Geräten mit sehr kleinen Bildschirmen, aber auch Modale sind betroffen.

Der Gulptask

Damit diese weiter wie bisher funktioniert, muss man in der Gulpdatei Selektoren angeben, die von UnCSS ignoriert werden. Diese habe ich unten in dem Gulptask angegeben.
Außerdem reduzieren wir weiterhin die Größe der entstehenden Stylesheet-Dateien durch sogenanntes Minifying. Dabei werden Leerzeichen und Kommentare entfernt, Selektoren zusammengeführt und so ungenutzte Zeichen entfernt und die Größe der entstehenden Datei weiter verkleinert.

gulp.task('uncss', function() {
	return gulp.src('tmp/css/concat.css')
		.pipe(uncss({
		html: ['public/*.html', 'public/impressum/*.html'],
		ignore: ['.text-right', '.text-left', '.affix', '.navbar-default.affix',
			/\w\.in/,
			'.fade',
			'.collapse',
			'.collapsing',
			/(#|\.)navbar(\-[a-zA-Z]+)?/,
			/(#|\.)dropdown(\-[a-zA-Z]+)?/,
			/(#|\.)(open)/,
			'.modal',
			'.modal.fade.in',
			'.modal-dialog',
			'.modal-document',
			'.modal-scrollbar-measure',
			'.modal-backdrop.fade',
			'.modal-backdrop.in',
			'.modal.fade.modal-dialog',
			'.modal.in.modal-dialog',
			'.modal-open',
			'.in',
			'.modal-backdrop'
		]
		}))
		.pipe(cssnano({discardUnused: false}))
		.pipe(gulp.dest('./tmp/uncss'));
});

Inlinen

Am Ende habe ich mich noch eines Tricks bedient. Da unsere Webseite eh nur aus einer Seite besteht ist die Ladegeschwindigkeit auch davon abhängig, wie schnell die CSS-Datei geladen wird.
Deswegen inline ich das gesamte Stylesheet und füge so die CSS-Regeln direkt in den Header der Webseite ein. (Daher ist auch HTTP/2 in dieser Hinsicht für uns von nicht so großer Bedeutung, siehe oben.)

Generell wird von dieser Praxis des Inlinen abgeraten, da bei mehrmaligem Besuch die CSS-Datei aus dem Cache geladen werden kann. Eingebettetes CSS kann nicht gecached werden. Daher wäre die Seite für wiederkehrende Besucher schneller. Eine Anfrage, die gar nicht erst gestellt werden muss, ist definitiv schneller, als das erneute Übertragen der nötigen CSS-Regeln bei jedem Laden der Webseite.
Allerdings sehe ich das nicht als Problem, da wir die meisten Besucher eh nur kurz vor unseren Konzerten verzeichnen. Wer weiß, wie lange sich die CSS-Datei im Cache hält? Ich glaube nicht, dass sie sich für ein halbes Jahr und länger hält.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

× 4 = twelve