In einer modernen Webanwendung oder Webseite werden oft sehr viele verschiedene CSS und Javascript Dateien eingebunden. Das führt zu einer erhöhten Anzahl an Requests und somit zu einer höheren Ladezeit der Webseite. Der Browser kann nur eine bestimmte Anzahl an Dateien zur selben Zeit laden und benötigt deshalb mehrere Anfragen, um die komplette Webseite zu laden.
Dies kann durch die Zusammenführung und Komprimierung der Dateien enorm verringert werden. Dabei gibt es mehrere Möglichkeiten:
Die erste Lösung ist brauchbar, nur muss dabei jede einzelne Datei minimiert werden und die einzelnen Dateien zusammengefasst werden. Bei kleineren Projekte ist diese Möglichkeit brauchbar, aber nicht optimal.
Die zweite Lösung würden wir nur bei einer einzigen kleinen Datei nutzen, die verbrauchte Zeit ist einfach zu schade. Zum Lernen und im Hobbybereich sicherlich ok, aber nicht im Livebetrieb.
Es gibt es einige Tools, die Dir diese Arbeit abnehmen können. Das kann gut klappen, aber Du hast keine Kontrolle darüber, in welcher Reihenfolge die Dateien verbunden werden. Das kann gerade bei CSS zu einem zerstörtem Design führen. Stell Dir vor, normalize.css wird als letztes eingebunden und überschreibt alle vorherigen Setting mit Standardwerten.
Auf die vierte Lösung gehen wir hier genauer ein, da wir diese Lösung am besten und effizientesten finden. Vor allem bei der Entwicklung eines eigenen Themes solltest Du vor der Auslieferung alles Dateien zusammenfassen. Durch die Installation von Erweiterungen kommen immer noch viele CSS und JS Dateien dazu. Und die Optimierung der Ladegeschwindigkeit beginnt schon bei der Planung der Seite. Lieber vorher 5 Stunden mehr planen als später 20 Stunden fixen.
GRUNT ist ein sogenannter Task Runner, der mehrere Arbeiten mit einem Aufruf ausführen kann. Grob beschrieben ist es ein Script, welches bestimmte Funktionen in einer definierten Reihenfolge ausführt.
GRUNT ist Open-Source und kann deshalb frei verwendet werden. Da es auf Javascript basiert, wird zwingend NPM benötigt. Zum Download und Installation NPM.
Sobald NPM installiert und funktionsfähig ist, können wir GRUNT installieren.
Wir installieren GRUNT immer im Wurzelverzeichnis der Entwicklungsumgebung, damit passen auch alle Pfade gleich. Du kannst selbstverständlich die Dateien auch außerhalb der Webseite bearbeiten und dann an die passenden Stellen kopieren. GRUNT wird mit folgendem Befehl installiert:
sudo npm install --location=global grunt-cli
npm install grunt
Nach der Installation befindet sich das Verzeichnis "node_modules" in deinem Projektordner. Dieser Ordner beinhaltet die grundlegenden Dateien von Grunt. Jetzt hast du Grunt erfolgreich installiert und wir können uns um die die Konfiguration kümmern.
Da es sich bei dieser Anleitung um ein GRUNT Einsteiger Tutorial handelt, werden wir nur auf das minimieren und zusammenfassen von CSS und JS Dateien befassen. Das ist für das Thema Pagespeed Optimierung vollkommen ausreichend.
Die GRUNT Basiskonfiguration besteht aus zwei Dateien: gruntfile.js und package.json
In der package.json werden die erforderlichen Pakete und Abhängigkeiten definiert. Diese müssen natürlich an deine Bedürfnisse angepasst werden. Unsere Datei sieht so aus:
// package.json
{
"name": "greyboard",
"version": "1.1.0",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-htmlmin": "latest",
"grunt-contrib-jshint": "latest",
"grunt-contrib-less": "latest",
"grunt-contrib-uglify": "latest",
"grunt-contrib-watch": "latest",
"jshint-stylish": "latest"
}
}
Hier wird einfach nur der Name und die Version, welche im Kopf der komprimierten JS Datei erscheint, definiert sowie die erforderlichen Versionen der Komponenten angegeben. Diese Datei kann für das verkleinern und zusammenführen von CSS und JS Dateien komplett übernommen werden.
Die zweite Datei "gruntfile.js" ist dagegen etwas komplizierter aufgebaut. Hier werden die Pfade zu den Quelldateien und die Zieldatei angegeben sowie alle Funktionen aufgerufen:
// Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Minify all css files
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: [{
src: [
'css/mdb.min.css',
'css/all.min.css',
'css/default.css',
'css/template.css'
],
dest: 'css/styles.min.css'
}]
}
},
// Minify all js files
uglify: {
options: {
banner: '/*! <%= pkg.name %> v<%= pkg.version %>, <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
files: [{
src: [
'js/jquery-3.3.1.min.js',
'js/mdb.min.js',
'js/highlight.pack.js',
'js/template.js'
],
dest: 'js/scripts.min.js'
}]
}
},
});
// ============= // CREATE TASKS ========== //
grunt.registerTask('default', ['cssmin', 'uglify']);
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
Wir gehen in diesem Beispiel davon aus, dass die rohen CSS und JS Dateien im Verzeichnis 'source/css/' bzw. 'source/js/' liegen und die minimierten Dateien in 'min/css/' und 'min/js/' erstellt werden sollen.
Diese Pfade kannst / musst Du selbstverständlich an Deine Bedingungen anpassen. ACHTUNG: Durch das *.css werden alle CSS und JS in alphabetischer Reihenfolge minimiert und zusammengeführt. Kontrolliere also, ob die Reihenfolge passt. Wir schauen uns immer den HTML-Quellcode an und benennen die CSS und JS Dateien einfach in 1_normalize.css, 2_bootstrap.css und 3_template.css um. Somit wird garantiert die richtige Reihenfolge beim Zusammenführen der CSS Dateien eingehalten. Dasselbe machst Du am besten auch mit den JS Dateien. Somit kann nichts schiefgehen.
In der Zeile 'banner' werden die Variablen aus der Datei package.js als Name und Version verwendet. Nun muss nur noch GRUNT mitgeteilt werden, welche zusätzlichen Pakete installiert werden müssen. Da wir diese in der package.json schon definiert haben, reicht ein kleiner Aufruf von:
grunt install
Kommen wir nun zu der Erstellung der minimierten CSS und JS Dateien. Dazu rufst Du im Wurzelverzeichnis "grunt" auf und wenn nichts schiefgeht, sollte die Ausgabe wie folgt sein:
Running "cssmin:build" (cssmin) task
>> 1 file created. 269.47 kB → 264.97 kB
Running "uglify:build" (uglify) task
>> 1 file created 374.01 kB → 254.34 kB
Done.
In der Ausgabe siehst Du nun, dass zwei Dateien erfolgreich erstellt worden sind und auch die Summe der Größe aller Dateien und die Größe der erstellten Datei. Gerade am Beispiel der Javascript Dateien, kannst Du sehen wie hoch die Einsparung ist: 119,67kB. Das ist nicht wenig und macht sich in der Ladegeschwindigkeit der Webseite bemerkbar. Noch spürbarer ist der Erfolg, da weniger Requests vom Webserver benötigt werden.
Diese erstellten Dateien kannst Du jetzt ganz normal in Dein Projekt einbinden und es werden nur noch 2 anstelle von 20 Request oder mehr für CSS und JS benötigt. Selbstverständlich kannst / solltest Du auch die JS Dateien, welche in den Header oder in den Footer gehören, trennen und separat einbinden. Dann ist es jeweils nur eine CSS und JS Datei im Header und eine JS Datei im Footer. Im Footer kannst Du diese auch gleich mit dem Parameter 'dever' oder 'async' einbinden.
Durch den Einsatz von GRUNT zur Optimierung von CSS und Javascript Dateien kannst Du einiges an Ladegeschwindigkeit herausholen. Es erfordert am Anfang etwas Konfiguration, welche sich am Ende aber bezahlt macht. Wenn Du das Template oder die Webseite an den Kunden übergibst, liefere immer die Quelldateien mit, aber binde die minimierten Dateien ein. Somit hat der Endkunde die Möglichkeit, selbst auf einfache Weise Änderungen am Template vorzunehmen.
Wir hoffen die kurze Anleitung für Einsteiger war hilfreich und wenn sie Dir gefallen hat, teile diese doch bitte in Deinen Netzwerken. Wenn Du Schwierigkeiten mit der Optimierung von CSS und JS Dateien hast, kannst Du uns gerne eine Anfrage stellen und wir schaue mir die Sache mal an.