Reduzierung und Komprimierung der Datenübertragung

Eine Verbesserung der Ladezeit kann durch eine Opti­mierung der Datenüber­tra­gung erre­icht wer­den. Dazu lässt sich die Daten­menge durch eine Minifizierung der Inhalte reduzieren und anschließend die Über­tra­gung der Dat­en per GZIP kom­prim­ieren.

Durch die Minifizierung wer­den Inhalte, die für eine Darstel­lung im Brows­er nicht rel­e­vant sind, aus Text­dateien wie dem HTML-Doku­ment, den Cas­cad­ing Style Sheets oder den JavaScripts, ent­fer­nt. Die Minifizierung umfasst das Ent­fer­nen von Kom­mentaren, Leerze­ichen und Umbrüchen, darüber hin­aus wird der Quell­code von Cas­cad­ing Style Sheets und JavaScripts über­ar­beit­et [WH15]. Die Ausze­ich­nun­gen in den Stylesheets wer­den durch das Zusam­men­le­gen gle­ich­er Def­i­n­i­tio­nen, die Ver­wen­dung von Short­hands und das Ent­fer­nen unnötiger Semi­kolons opti­miert. Die Opti­mierung der JavaScripts kann soweit gehen, dass unnötiger Quell­code gän­zlich ent­fer­nt und die Vari­ablen inner­halb der Datei umbe­nan­nt wer­den, um die Dateigröße möglichst stark
zu reduzieren [Ave15].

Die Minifizierung der Dateien lässt sich im Entwick­lung­sprozess mit Werkzeu­gen wie CodeK­it, Koala oder den YUI Com­pres­sor automa­tisiert durch­führen. Weit­er­hin ste­hen die Web-Dien­ste JS Minifer und CSS Minifer zur Ver­fü­gung, die den Quell­text opti­mieren und aus­geben. Das Resul­tat ein­er Minifizierung ist für Men­schen kaum les­bar. Daher kön­nen zur besseren Wart­barkeit zwei Ver­sio­nen ein­er Datei existieren, eine minifizierte für das Livesys­tem und eine nor­male Dateiver­sion. An der nor­malen Dateiver­sion kön­nen später Änderun­gen vorgenom­men wer­den und anschließend kann eine Minifizierung erfol­gen. Sta­tis­che HTML-Doku­mente hinge­gen lassen sich mit­tels HTML-Tidy oder HTML Com­pres­sor minifizieren. Bei dynamis­chen Web­seit­en, die zur Laufzeit durch ein CMS gener­iert wer­den, ist die Minifizierung des HTML-Quell-codes nur mit Funk­tio­nen seit­ens des Sys­tems möglich.

Nach der Minifizierung emp­fiehlt sich eine Über­prü­fung, ob die Datenüber­tra­gung zwis­chen dem Web­serv­er und den Endgeräten per GZIP kom­prim­iert erfol­gt. Durch diese Kom­bi­na­tion kann das zu über­tra­gende Daten­vol­u­men am effek­tivsten reduziert wer­den [Gri14]. Bei GZIP han­delt es sich um ein ver­lust­freies Kom­prim­ierungsver­fahren zur Reduzierung der Dateigröße. Mehrfach vorhan­dene Dat­en wer­den in der Datei gesucht und vere­in­facht gespe­ichert [Ave15]. Die Aktivierung der Kom­prim­ierung erfordert bei der Ver­wen­dung eines Apache Web­servers das Mod­ul mod_deflate und kann entwed­er in der Web­serv­er-Kon­fig­u­ra­tion oder per HTACCESS, mit dem nach­fol­gend gezeigten Quell­code, für ver­schiedene Dateifor­mate aktiviert wer­den.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Unter­stützt der Brows­er des Nutzers eine Kom­prim­ierung mit­tels GZIP, so wird ihm dies in der Anfrage an den Web­serv­er durch einen Request-Head­er mit­geteilt. Vor der Über­tra­gung erfol­gt dann durch den Web­serv­er eine Kom­prim­ierung der Dateien und anschließend wer­den diese, nach der erfol­gre­ichen Über­tra­gung, durch den Brows­er dekom­prim­iert. Anhand des HTTP-Head­ers lässt sich in den Entwick­ler-Tools des Browsers Google Chrome prüfen, ob die Kom­prim­ierung per GZIP aktiviert ist (siehe Abbil­dung 3.3).

Abbil­dung 3.3: Response und Request Head­ers geben an, dass GZIP aktiviert ist und genutzt wurde

Eine Kom­prim­ierung durch GZIP ist nur für unkom­prim­ierte Dateifor­mate wie HTML, CSS, JavaScript oder SVG vorteil­haft [Ave15]. Bei den bere­its kom­prim­ierten Dateifor­mat­en JPEG, PNG, WOFF oder PDF kann die Anwen­dung von GZIP zu ein­er Ver­größerung der Datei führen und ist dementsprechend zu ver­mei­den [Ave15]. Wird ein CDN ver­wen­det ist auch hier darauf zu acht­en, dass die Über­tra­gung per GZIP in den Ein­stel­lun­gen für entsprechende Dateifor­mate aktiviert ist.

Bei einem Ver­such im Rah­men dieser Arbeit kon­nte eine Reduzierung von 72 Prozent des zu über­tra­gen­den Dateivol­u­mens ein­er CSS-Datei durch die Kom­bi­na­tion von Minifizierung und Kom­prim­ierung erzielt wer­den. Aus der Tabelle 3.3 geht her­vor, dass die Dateigröße der Aus­gangs­datei durch eine Minifizierung von 11,1 Kilo­byte auf 8,4 Kilo­byte reduziert wer­den kon­nte. Anschließend wurde sie mit­tels GZIP auf eine Größe von 3,1 Kilo­byte kom­prim­iert. Ohne Minifizierung erre­ichte die kom­prim­ierte Datei eine Größe von 3,8 Kilo­byte, dies entspricht ein­er Reduzierung um 66 Prozent gegenüber der Aus­gangs­datei.

Tabelle 3.3: Reduzierung der Dateigröße durch Minifizierung und Kom­prim­ierung

Datei Dateigröße Reduzierung Verbesserung
Orig­i­nal CSS 11,1 KB - -
Minifizierte CSS 8,4 KB 2,7 KB 24 % klein­er als Orig­i­nal
Orig­i­nal CSS mit GZIP 3,8 KB 7,3 KB 66 % klein­er als Orig­i­nal
Minifizierte CSS mit GZIP 3,1 KB 8,0 KB 72 % klein­er als Orig­i­nal