Web Performance Optimization - Teil 2

18.02.2013 10:15

Datenmenge minimieren

Greift man bei der Programmierung einer Website auf JavaScript-Frameworks oder andere frei verfügbare Bibliotheken zurück, sollte man in jedem Fall die minimierten Versionen dieser Quelldateien in die Seiten einbinden. Minimierte Quelldateien unterscheiden sich von den normalen dadurch, dass sämtliche für den Computer unwichtige Zeichen daraus entfernt wurden. Ein sehr wichtiges Element für die Übersichtlichkeit von Quellcodes im Entwicklungsprozess bilden Zeilenumbrüche und Einrückungen. Die meisten Entwicklungsumgebungen übernehmen diese Formatierungsaufgaben sogar selbstständig. Für einen Browser macht es hingegen überhaupt keinen Unterschied, ob ein Quellcode sehr übersichtlich strukturiert und gut lesbar ist oder nicht. Für ihn ist einzig und allein wichtig, dass der Code keine Fehler enthält. Man kann einer JS-Datei also ruhigen Gewissens alle überflüssigen Umbrüche, Tabulatoren und Leerzeichen entfernen lassen, bevor man sie für den Produktivbetrieb einsetzt. Für diese Minimierung gibt es viele kostenfreie Tools im Netz sowie Add-Ons für Firefox. Im Übrigen lassen sich nicht nur JavaScript-Dateien minimieren. Stylesheets können auf die gleiche Weise komprimiert werden. Auch hier kosten unnötige Zeilenumbrüche, Einrückungen und Leerzeichen nur Zeit, ändern aber nichts an der Validität des Inhalts.

Wenn man noch einen Schritt weiter gehen will, können auf JS-Dateien zusätzlich so genannte „Obscuring“-Techniken angewendet werden. Obscuring bedeutet eigentlich „Verschleierung“ und ist eher dafür gedacht, die eigenen hart erarbeiten Quellcodes für Dritte nicht nur unleserlicher, sondern zudem unverständlicher zu machen. Hierbei kommen unter anderem Methoden zum Einsatz, bei der Variablen und Funktionen mit kryptischen Bezeichnern umbenannt werden, um somit für Verwirrung bei der Interpretation des Codes zu sorgen. Dieses Vorgehen kann aber auch für die Minimierung zweckentfremdet werden. Lange Variablen- und Funktionsnamen können auf diese Weise mit sehr kurzen Bezeichnern umbenannt werden. Im Falle von umfangreichen Dateien, in denen zudem noch sehr lange Bezeichner verwendet wurden, lassen sich damit sicherlich einige Prozent an Größe einsparen.

Eine weitere Möglichkeit, die Datenmenge zu reduzieren, die vom Server auf den Client-Rechner übertragen werden muss, ist sehr simpel und wird dennoch gerade von unerfahrenen Web developern häufig missachtet. Wann immer man Grafiken auf einer Webseite verwendet, sollten diese nur so groß gespeichert werden, wie sie auch auf der Seite angezeigt werden. Abgesehen davon, dass ein Downsizing durch den Browser, das via HTML bzw. CSS realisiert wird, nicht wirklich zu optisch ansprechenden Ergebnissen führt, lassen sich gerade bei größeren Bildern Unmengen an Daten einsparen. Als Beispiel sei eine Fotogalerie genannt, in der zunächst nur eine Übersicht mit Thumbnails zu sehen ist. Hier sollte man sich auf jeden Fall die Arbeit machen, diese Thumbnails auch tatsächlich als kleine Bilder zu erzeugen und nicht einfach die großen Originalbilder in einem kleineren Maßstab auf der Seite zu zeigen. Ein solches Vorgehen kostet Unmengen an Transfervolumen und fordert jeden Benutzer dazu auf, ihre Seite zu verlassen, der nicht mit einer schnellen DSLVerbindung unterwegs ist. Unzählige Tools für eine einfache und automatisierte Erstellung von Thumbnails findet man kostenfrei im Netz.

 

Etwas professionellere Vorgehensweisen, um Datentransfer einzusparen, setzen direkt an der  Konfiguration des Webservers bzw. in den PHP-Skripten an. So kann man etwa Apache anweisen, Dateien komprimiert an den Client zu senden, falls Module wie mod_gzip oder mod_deflate zur Verfügung stehen. Nahezu alle modernen Browser kommen damit zurecht, wenn sie auf diese Weise komprimierte Inhalte empfangen. Folgendes Beispiel zeigt einen Eintrag in der Datei .htaccess, der dafür sorgt, dass alle HTML-Dateien aus dem Verzeichnis docs komprimiert gesendet werden:

<Directory "/pfad/zu/docs">
                AddOutputFilterByType DEFLATE
                Text/html
</Directory>

Sollen generell alle Dateien mit der Endung .html komprimiert werden, wird das durch folgende Zeilen erledigt:

<Files *.html>
                SetOutputFilter DEFLATE
</Files>

Falls diese Module nicht vorhanden sind, gibt es auch Lösungen auf PHP-Basis. So können Sie an den Anfang jeder Datei die PHP-Anweisung ob_start("ob_gzhandler"); schreiben. Falls das zu aufwendig ist, weil das Projekt einfach schon aus zu vielen Dateien besteht, kann man auch hier wieder die .htaccess bemühen, um sich das Leben zu erleichtern. Dafür legt man zunächst eine kleine Datei enable_gzip.php an, die lediglich den Inhalt

<?php
ob_start("ob_gzhandler");
?>

hat. In .htaccess kann man nun den Befehl erteilen, dass der Inhalt dieser Datei enable_gzip.php an den Beginn bestimmter Dateitypen gesetzt wird. Etwa so:

<FilesMatch "\.(php)">
                php_value auto_prepend_file /pfad/zu/enable_gzip.php
</FilesMatch>

Übrigens funktioniert das nicht nur mit PHP-Dateien. Man kann auf diese Weise z. B. auch CSS-Dateien komprimieren lassen. In diesem Fall muss gezielt der Typ „PHP-Applikation“ erzwungen werden:

<FilesMatch "\.(css)">
                ForceType application/x-httpd-php
                php_value auto_prepend_file /pfad/zu/enable_gzip.php
</FilesMatch>

Als nächstes sollen Tipps beschrieben werden, die für eine Performanceoptimierung unabhängig von der Geschwindigkeit der momentanen Internetverbindung sorgen können. Sie haben also nichts mit der Übertragung von Daten zwischen Client und Server zu tun, sondern betreffen die Erzeugungsgeschwindigkeit einer Webseite auf dem Server und die Reaktionszeiten bei Benutzerinteraktionen, durch die JavaScript-Code ausgeführt wird.

Lesen Sie dazu Teil 3 der Reihe Web Performance Optimization

 

Haben Sie den Anfang der sechsteiligen Reihe verpasst? Hier „Web Performance Optimization“ komplett lesen >>


Autor Timo Krotzky

Timo Krotzky ist freier Entwickler, Berater und Autor mit den Schwerpunkten PHP, MySQL und Java. Seine Erfahrung im Bereich Web Technologies erstreckt sich mittlerweile über mehr als 10 Jahre. Vor seinem Studienabschluss absolvierte der Diplom-Bioinformatiker eine Ausbildung zum staatl. gepr. Assistent für Wirtschaftsinformatik und war 9 Jahre lang für die AFS-Software GmbH & Co. KG tätig, wo er zuletzt für die Entwicklung von E-Commerce Lösungen sowohl im Front-End- als auch im Back-End-Bereich verantwortlich war. Seit einigen Jahren schreibt er regelmäßig für Fachzeitschriften wie Web & mobile Developer zu den Themengebieten Datenbank, Web Development und SEO.

Timo Krotzky

Developer Week in Social Media

Folgen Sie uns auf:

Aussteller & Sponsoren

Infos anfordern

Infos anfordern
  • Florian Bender
  • Projektleitung
  • Tel.: +49 (89) 74117-206
  • Fax: +49 (89) 74117-448
  • E-Mail: florian.bender@nmg.de

Medienpartner