CSS und JavaScript kommen auf fast jeder Website vor. Diese Technologien sind ein Segen: musste man früher bei einem Relaunch noch jede einzelne Seite des Internetauftritts anpassen, lässt sich dank CSS heute mit wenigen Handgriffen das Erscheinungsbild der gesamten Website verändern.
JavaScript war schon totgesagt, doch in Verbindung mit HTML5 wird die Skriptsprache heute wieder häufig genutzt. Mit HTML5 und JavaScript lassen sich sogar Apps für mobile Betriebssysteme entwickeln, zum Beispiel für iOS und Android. Das zeigt, welches große Potential sich hinter dieser Kombination verbirgt. Und das lässt sich auch für Websites nutzen.
Was Webdesigner lieben, treibt hingegen manchem SEO Sorgenfalten auf die Stirn. Denn unbedacht eingesetzt verlangsamen CSS und JavaScript eine Website mitunter erheblich.
Schlechter PageSpeed durch CSS und JavaScript. Das sind die möglichen Ursachen:
Wer den PageSpeed erhöhen möchte, sollte bei der Optimierung von CSS-Anweisungen und JavaSkripten einige Dinge beachten. Der erste Schritt besteht darin, all diese Elemente, die global auf der gesamten Website eingesetzt werden, in externe Dateien auszulagern. Im Quellcode der einzelnen Seiten wird dann ein Verweis auf diese externen Dateien eingebunden. Dieser sieht so aus:<link rel="stylesheet" type="text/css" href="mein.css">
Der Vorteil hierbei: Sobald die externen Dateien einmal vom Webbrowser geladen wurden, befinden sie sich in seinem Cache auf dem Gerät des Nutzers und sind von dort aus schnell geladen. Oft werden Verweise auf externe Dateien im HEAD-Bereich der Seite eingebunden und so direkt zu Beginn mitgeladen. Insbesondere CSS, weil es meistens für die korrekte Anzeige der Seite essentiell ist. Nun kommt aber dazu, dass durch die Einbindung der gesamten Datei im Seitenkopf die Ladezeit ebenfalls verzögert wird – insbesondere beim ersten Aufruf der Website, wenn sich die Anweisungen und Skripte noch nicht im Cache befinden. Aber auch hierfür gibt es eine Lösung: Und zwar CSS in zwei separate Dateien auszulagern. Innerhalb der einzelnen Seiten wird auf die erste Datei direkt im Seitenkopf verwiesen; sie enthält nur die Anweisungen, die für die korrekte Darstellung der Seite unbedingt notwendig sind. Alle anderen Anweisungen kommen in die untere Datei. Sie wird erst am Seitenende eingebunden. Auch die ausgelagerten JavaSkripte sollten erst am Seitenende eingebunden werden, sofern dadurch nicht die Funktionsfähigkeit der Website beeinträchtigt wird. JavaScript kann außerdem asynchron geladen werden. Hierdurch werden die ausgelagerten Skripte unabhängig vom Seitenquelltext geladen, wodurch die Ladezeit weiter optimiert wird:<script src="mein.js" async></script>
CSS und JavaScript minifizieren
Jetzt gehen wir noch einen Schritt weiter: Und zwar kann der Code in den externen Dateien weiter optimiert werden, indem unnötige Leerzeichen und Leerzeilen entfernt werden. Dadurch wird die Ladezeit noch weiter gesenkt. Um sich händische Arbeit zu sparen, gibt es im Internet eine Vielzahl an kostenlosen Tools hierfür, beispielsweise dieses: https://www.minifier.org/ Kopiert Eure CSS-Anweisungen und JavaSkripte hier herein und übernehmt anschließend den minifizierten Code. Wichtig ist, dass Ihr hinterher prüft, ob Eure Website noch korrekt dargestellt wird und ob alle Scripts noch funktionieren – gerade JavaScript ist naturgemäß einigermaßen empfindlich gegen eine Minifizierung. Treten Fehler auf, solltet Ihr auf eine Minifizierung verzichten oder sie händisch vornehmen. Checkliste: Betreffend der Vorgehensweise könnt Ihr Euch an der folgenden Checkliste orientieren:- Lagert CSS- und JavaScript-Anweisungen in externe Dateien aus
- Bindet die Datei mit essentiellen CSS-Anweisungen im Seitenkopf ein
- Bindet die Datei mit den übrigen CSS-Anweisungen am Seitenende ein
- Bindet die JavaScript-Datei idealerweise am Seitenende ein
- Ladet die JavaScript-Datei asynchron
- Minifiziert Eure CSS- und JavaScript-Dateien
- Leert den Cache Eures Webbrowsers (so funktioniert es)
- Prüft, ob das Seitenlayout noch korrekt dargestellt wird
- Prüft, ob Eure JavaScript-Funktionen noch einwandfrei funktionieren