Grunt Tutorial - CSS und JS Optimierung

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:

  • CSS manuell minimieren durch ein CSS Minify Online Tool
  • CSS und JS manuell im Editor bearbeiten und verkleinern
  • Plugins z.B. in Wordpress benutzen, die diese Arbeit übernehmen
  • Eine Software wir GRUNT verwenden und alles automatisieren

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ürde ich 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.

Für Wordpress gibt es einige Tools, die dir diese Arbeit abnehmen. 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 wir als letztes eingebunden und überschreibt alle vorherigen Setting mit Standardwerten. 

Auf die vierte Lösung gehe ich hier genauer ein, da ich diese Lösung am besten und effizientesten finden. Vor allem bei der Entwicklung eines eigenen Themes sollte man vor der Auslieferung alles Dateien zusammenfassen. Durch die Installation von Plugins in Wordpress 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... 

Was ist Grunt und wie wird es installiert

Grunt ist ein so genannter 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 OpenSource 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.

Ich installiere 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 Stelle kopieren. Grunt wird mit folgendem Befehl installiert:


npm install grunt --save-dev

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.

Grunt Konfiguration für den Einstieg

Da es sich bei diese Anleitung um ein Grunt Einsteiger Tutorial handelt, werde ich 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. Meine Datei sieht so aus:


{
  "name": "greyboard",
  "version": "1.1.0",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-htmlmin": "^2.4.0",
    "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: {
            'min/css/style.min.css': 'source/css/*.css'
                }
            }
        },
    // Minify all js files
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> v<%= pkg.version %>, <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
            src: 'source/js/*.js',
            dest: '/min/js/script.min.js'
        }
        },
    });
    // ============= // CREATE TASKS ========== //
    grunt.registerTask('default', ['cssmin', 'uglify']);

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Ich gehe in diesem Beispiel davon aus, das 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. Ich schaue mir immer den HTML Quellcode an und benenne 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 schief gehen.

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

CSS und JS Dateien minimieren und zusammenführen

Komme ich nun zu der Erstellung der minimierten CSS und JS Dateien. Dazu rufst du im Wurzelverzeichnis "grunt" auf und wenn nichts schief geht 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, das 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 nun 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.

Fazit CSS und JS Optimierung mit Grunt

Durch den Einsatz von Grunt zur Optimierung von CSS und Javascript Dateien kannst Du einiges an Ladegeschwindigkeit rausholen. Es erfordert am Anfang etwas Konfiguration, welche sich am Ende aber bezahlt macht. Wenn du das Theme 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 Theme vorzunehmen. 

Ich hoffe 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 dem Optimierung von CSS und JS Dateien hast, kannst du mir gerne eine Anfrage stellen und ich schaue mir die Sache mal an.