Eine Verbesserung der Ladezeit kann durch eine Optimierung der Datenübertragung erreicht werden. Dazu lässt sich die Datenmenge durch eine Minifizierung der Inhalte reduzieren und anschließend die Übertragung der Daten per GZIP komprimieren.
Durch die Minifizierung werden Inhalte, die für eine Darstellung im Browser nicht relevant sind, aus Textdateien wie dem HTML-Dokument, den Cascading Style Sheets oder den JavaScripts, entfernt. Die Minifizierung umfasst das Entfernen von Kommentaren, Leerzeichen und Umbrüchen, darüber hinaus wird der Quellcode von Cascading Style Sheets und JavaScripts überarbeitet [WH15]. Die Auszeichnungen in den Stylesheets werden durch das Zusammenlegen gleicher Definitionen, die Verwendung von Shorthands und das Entfernen unnötiger Semikolons optimiert. Die Optimierung der JavaScripts kann soweit gehen, dass unnötiger Quellcode gänzlich entfernt und die Variablen innerhalb der Datei umbenannt werden, um die Dateigröße möglichst stark
zu reduzieren [Ave15].
Die Minifizierung der Dateien lässt sich im Entwicklungsprozess mit Werkzeugen wie CodeKit, Koala oder den YUI Compressor automatisiert durchführen. Weiterhin stehen die Web-Dienste JS Minifer und CSS Minifer zur Verfügung, die den Quelltext optimieren und ausgeben. Das Resultat einer Minifizierung ist für Menschen kaum lesbar. Daher können zur besseren Wartbarkeit zwei Versionen einer Datei existieren, eine minifizierte für das Livesystem und eine normale Dateiversion. An der normalen Dateiversion können später Änderungen vorgenommen werden und anschließend kann eine Minifizierung erfolgen. Statische HTML-Dokumente hingegen lassen sich mittels HTML-Tidy oder HTML Compressor minifizieren. Bei dynamischen Webseiten, die zur Laufzeit durch ein CMS generiert werden, ist die Minifizierung des HTML-Quell-codes nur mit Funktionen seitens des Systems möglich.
Nach der Minifizierung empfiehlt sich eine Überprüfung, ob die Datenübertragung zwischen dem Webserver und den Endgeräten per GZIP komprimiert erfolgt. Durch diese Kombination kann das zu übertragende Datenvolumen am effektivsten reduziert werden [Gri14]. Bei GZIP handelt es sich um ein verlustfreies Komprimierungsverfahren zur Reduzierung der Dateigröße. Mehrfach vorhandene Daten werden in der Datei gesucht und vereinfacht gespeichert [Ave15]. Die Aktivierung der Komprimierung erfordert bei der Verwendung eines Apache Webservers das Modul mod_deflate und kann entweder in der Webserver-Konfiguration oder per HTACCESS, mit dem nachfolgend gezeigten Quellcode, für verschiedene Dateiformate aktiviert werden.
<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>
Unterstützt der Browser des Nutzers eine Komprimierung mittels GZIP, so wird ihm dies in der Anfrage an den Webserver durch einen Request-Header mitgeteilt. Vor der Übertragung erfolgt dann durch den Webserver eine Komprimierung der Dateien und anschließend werden diese, nach der erfolgreichen Übertragung, durch den Browser dekomprimiert. Anhand des HTTP-Headers lässt sich in den Entwickler-Tools des Browsers Google Chrome prüfen, ob die Komprimierung per GZIP aktiviert ist (siehe Abbildung 3.3).
Eine Komprimierung durch GZIP ist nur für unkomprimierte Dateiformate wie HTML, CSS, JavaScript oder SVG vorteilhaft [Ave15]. Bei den bereits komprimierten Dateiformaten JPEG, PNG, WOFF oder PDF kann die Anwendung von GZIP zu einer Vergrößerung der Datei führen und ist dementsprechend zu vermeiden [Ave15]. Wird ein CDN verwendet ist auch hier darauf zu achten, dass die Übertragung per GZIP in den Einstellungen für entsprechende Dateiformate aktiviert ist.
Bei einem Versuch im Rahmen dieser Arbeit konnte eine Reduzierung von 72 Prozent des zu übertragenden Dateivolumens einer CSS-Datei durch die Kombination von Minifizierung und Komprimierung erzielt werden. Aus der Tabelle 3.3 geht hervor, dass die Dateigröße der Ausgangsdatei durch eine Minifizierung von 11,1 Kilobyte auf 8,4 Kilobyte reduziert werden konnte. Anschließend wurde sie mittels GZIP auf eine Größe von 3,1 Kilobyte komprimiert. Ohne Minifizierung erreichte die komprimierte Datei eine Größe von 3,8 Kilobyte, dies entspricht einer Reduzierung um 66 Prozent gegenüber der Ausgangsdatei.
Tabelle 3.3: Reduzierung der Dateigröße durch Minifizierung und Komprimierung
| Datei | Dateigröße | Reduzierung | Verbesserung |
| Original CSS | 11,1 KB | – | – |
| Minifizierte CSS | 8,4 KB | 2,7 KB | 24 % kleiner als Original |
| Original CSS mit GZIP | 3,8 KB | 7,3 KB | 66 % kleiner als Original |
| Minifizierte CSS mit GZIP | 3,1 KB | 8,0 KB | 72 % kleiner als Original |
