Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial von Stefan Trost | Letztes Update am 10.05.2021 | Erstellt am 02.08.2011
Auch in Zeiten von DSL-Breitband-Internet-Verbindungen zahlt es sich aus auf Dateigröße und Ladezeiten einer Internetseite zu achten. Nicht zuletzt, weil die Ladezeiten inzwischen auch ein Kriterium für Suchmaschinen geworden sind - auch die Besucher der Seite bleiben länger und haben ein schöneres Erlebnis, wenn sich die Seiten schnell aufbauen und sie nicht ewig darauf warten müssen, dass alles geladen ist.
Eine sehr einfache aber dafür umso effektivere Methode ist die Komprimierung von CSS und JavaScript-Dateien mit GZip. CSS- und JS-Dateien lassen sich mit GZip um 70 bis 80 Prozent verkleinern. Eine vormals 13 KB große Datei lässt sich so leicht auf etwa 3 KB reduzieren, was sich in deutlich niedrigeren Ladezeiten bemerkbar macht, die dann im gleichen Verhältnis verringert wird.
In diesem kleinen Tutorial möchte ich euch zeigen wie ihr eure JS- und CSS-Dateien komprimiert ausliefern könnt ohne dabei die Browser zu vernachlässigen, die keine GZip-Komprimierung erlauben.
Die .htaccess Datei
In euer .htaccess Datei im Stammverzeichnis eurer Website müsst ihr folgende Zeilen hinzufügen:
<Files *.css.gz> AddType "text/css" .gz AddEncoding gzip .gz </Files> <Files *.js.gz> AddType "application/javascript" .gz AddEncoding gzip .gz </Files> RewriteBase / RewriteEngine On RewriteCond %{HTTP:Accept-Encoding} .*gzip.* RewriteRule ^(.*)\.css$ $1.css.gz RewriteRule ^(.*)\.js$ $1.js.gz
Es passiert nun folgendes: Im unteren Teil hinter "RewriteEngine On" schauen wir als erstes in einer Rewrite-Bedingungen (RewriteCond), ob der anfragende Browser die GZip-Komprimierung überhaupt unterstützt.
Wenn ja, wandeln wir anschließend in den letzten beiden Zeilen die Endung aller Dateien, die auf .css enden in .css.gz um. Alle Dateien, die angefragt werden und auf .js enden, werden in .js.gz umgeschrieben. Fragt der Browser nun zum Beispiel nach style.css, liefern wir dem Browser stattdessen die Datei namens style.css.gz aus. Diese Dateien sind unsere komprimierten Dateien. Wie wir die erstellen, schauen wir uns später an.
Zuerst blicken wir aber auf den ersten Teil unserer .htaccess-Datei. Da unser Server nicht wissen kann, wie er mit den Dateien mit der Endung .gz umgehen soll, teilen wir es ihm an dieser Stelle mit. Wir wissen, dass alle Dateien mit der Endung .css.gz CSS-Dateien sind und GZip-komprimiert sind. Daher fügen wir zu der Anfrage nach dieser Dateisorte als Typ "text/css" hinzu und geben die Encodierung gzip mit auf den Weg. Ähnlich machen wir es bei den JS-Dateien. Hier definieren wir aber als Typ "application/javascript". Wenn wir dies nicht machen wüsste, wüsste der Browser unter Umständen nicht, wie er mit den entsprechenden Dateien umgehen sollte.
Die komprimierten Dateien
Um sowohl die Browser zu unterstützen, die eine GZip Komprimierung unterstützen als auch die Browser zu unterstützen, die dies nicht tun, liegen auf unserem Server im gleichen Verzeichnis immer zwei Varianten jeder CSS und jeder JS Datei. Einmal die unkomprimierte Datei, zum Beispiel "script.js" und einmal die komprimierte Datei, zum Beispiel "script.js.gz". Die Dateien müssen genau gleich heißen, nur dass hinter der komprimierten Datei noch ein .gz steht.
Die komprimierten Dateien können wir ganz einfach mit dem Programm 7-Zip erzeugen. Wir können einfach mit der rechten Maustaste auf unsere Originaldatei klicken, dann auf 7-Zip und dann auf "Zu einem Archiv hinzufügen". Hier wählen wir das Archivformat "gzip" aus und klicken auf "OK". Schon haben wir unsere komprimierte Datei, die wir zusammen mit der Originaldatei auf den Server laden können.
Einbindung in HTML
Im Quellcode der HTML-Seite müssen wir nichts ändern oder anpassen. Hier reicht es, wenn wir unsere Dateien nach wie vor so einbinden, wie wir es immer getan haben. Also zum Beispiel:
<link type="text/css" rel="stylesheet" href="styles.css" /> <script type="text/javascript" src="meinscript.js"></script>
Die komprimierte Datei mit der Endung .gz taucht hier nicht auf.
Die Vorgehensweise
Jedes Mal wenn nun ein Browser eine CSS oder JS Datei anfragt, schaut der Code in der .htaccess Datei nach, ob der Browser eine gzip Komprimierung unterstützt oder nicht. Wenn nicht, passiert nichts und das Original wird ausgeliefert. Falls doch, wird die Anfrage von .css auf .css.gz umgeleitet und dem Browser mitgeteilt, dass es sich bei .css.gz um eine komprimierte CSS handelt. Die CSS wird dann komprimiert übertragen und wir sparen jede Menge Traffic.
Test: Funktioniert es?
Wenn wir testen möchten, ob es funktioniert können wir uns den Entwickler-Tools in Chrome oder dem Addon Firebug in Firefox bedienen. Beide Tools haben einen Reiter namens Netzwerk, in dem angezeigt wird, welche Dateigröße übertragen wurde. Hier können wir leicht testen, ob es funktioniert hat.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
PHP: Dateien GZip-Komprimieren mit PHP
Tipp | 1 Kommentar
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
Website Performance: Caching und Expires Header von Bildern, CSS und JavaScript
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.