blog.t8d.de

Nachdem ich mich im ersten Teil der Serie mit Markup im Allgemeinen beschäftigt habe, behandele ich heute einen Punkt, mit dem man bei der Geschwindigkeit des Seitenaufbaus wirklich etwas rausholen kann: Möglichkeiten, Dateien durch verschiedene Arten von Kompression und sog. Obfuscating zu verkleinern.

• ZIP-Kompression für HTTP Header verwenden
  Zip Kompression für die HTTP-Übertragung beschleunigt den Aufbau von Webseiten teilweise sehr deutlich, ein entscheidender Faktor für den Erfolg einer Website. Dabei werden die Dateien mithilfe des Apache Moduls mod_deflate (früher mod_gzip) ZIP-komprimiert übertragen und erst vom Browser entpackt, was alle modernen Browser unterstützen. Wie sich das Modul auf einem eigenen Server schnell einrichten lässt, erklärt Howtoforge.
  Falls die ausgelieferten HTML Dateien relativ groß sind (ab ca. 15KB), kann es aber zu einem psychologisch negativen Effekt kommen, denn die Seiten werden erst aufgebaut, wenn sie komplett übertragen sind. Wer mit dem Modem surft , sieht im Zweifel einige Sekunden eine weiße Seite. Wenn die Source-Files also sehr groß sind, dann sollte man die Kompression für diese Dateitypen(z.B. php, html) evtl. abstellen. Außerdem benötigt die Kompression CPU-Resourcen auf dem Server. Eine gute Richtlinie, wann man das Modul einsetzten sollte und wie man es weiter konfiguriert (z.B. für Benchmarks) findet ihr bei Forever For Now.
• JavaScript Dateien verkleinern
  In JavaScript-Dateien gibt es normalerweise eine Reihe von Kommentaren, Tabulatoren und Umbrüchen, die je nach Coding-Stil eine Menge Platz verbrauchen. Diese lassen sich aber mit einigen Tools einfach entfernen. Teilweise beherrschen diese auch sog. Obfuscating, d.h. wirkliches Verkürzen von Code durch Umschreiben (z.B. Verkürzung von Variablennamen…). Zu diesen Packern gehört z.B. der Kompressor des Dojoo Toolkits oder Dean Edward’s Packer , mit dem auch die komprimierte Version von jQuery erstellt wird. Er entfernt nicht nur Kommentare und unnötigen Whitespace, er obfuscated auch. Dadurch wird eine JS-Datei ganz schnell mal um 50 Prozent kleiner. Darüber hinaus existieren eine Reihe weiterer Versionen, mit der man die Kompression dynamish durchführen kann, z.B. vor dem Upload auf den Liveserver. Leider ließen sich einige meiner JS-Dateien nicht komprimieren, insbesondere Prototype zeigte sich hier relativ widerspenstig und funktionierte nicht mehr. Wie man diese Probleme im Zweifel lösen kann erklärt Andrew Dupont in Packaging Prototype.
• Leerzeichen, Tabs und Zeilenumbrüche entfernen
  Wer aus irgend einem Grund, die oben beschriebenen Packer-Tools oder mod_deflate nicht einsetzen kann, kann zumindest überflüssige Leerzeichen, Einrückungen und Zeilenumbrüche aus seinen Dateien entfernen, was je nach Coding-Stil die Dateigröße zum Teil noch einmal deutlich reduziert. Für die, die bereits mod_deflate und JS-Packer verwenden, bringt dieser Tipp nichts.

Über 3D Windowmanagement mit Beryl unter Linux wurde an dieser Stelle bereits berichtet. Zur Überbrückung der Zeit bis Flash und Photoshop problemlos unter Linux laufen, stelle ich hier ein paar Tools vor, die einem unter Windows 2000 oder Windows XP das Arbeitsleben vereinfachen.

Auf der Suche nach Vergleichbaren zu Beryl für Windows bin ich auf Yod’m gestoßen. Das Programm organisiert vier virtuelle Desktops in einer 3D Würfel-Ansicht. Da man beim Verteilen der Anwendungen schnell den Ãœberblick verliert, hatte ich Multidesktop-Software bisher immer nach kurzen Testphasen wieder verworfen. Durch die Kombination von 3D Ansicht und Transparenz ist die Orientierung nun kein Problem mehr.

Eine weiteres Tool, dass man als Standardprogramm unter Windows vergeblich sucht, ist die über einen Hotkey gesteuerte Übersicht aller geöffneten Fenster, vergleichbar zu Exposé auf dem MAC. Eine gute Umsetzung unter Windows ist TopDesk (Windows XP, Shareware). Eine ältere Variante, die leider nicht mehr weiterentwickelt wird, dafür aber auch unter Windows 2000 läuft, ist SmallWindows.

Die Freeware WinRoll ist mittlerweile in der Version 2 erhältlich und erlaubt das Minimieren von Fenstern auf Fensterleistengröße per rechten Mausklick auf selbige. Ein einfaches, aber effektives Tool um seine geöffneten Fenster im Überblick zu behalten.

Schließlich noch der Hinweis zu einer Shell Darstellungsvariante, die ich bisher nur unter Linux kennengelernt habe. Transputty von Markus Koskinen ist eine Variante des Telnet/SSH Clients Putty, die dem Terminalfenster Pseudo-Transparenz verleiht. Dabei wird wie unter Linux auf einer Kopie des Desktophintergrundbildes gescrollt. Man sieht also nicht die verdeckten Fenster hinter der Anwendung, sondern einen Ausschnitt des Desktophintergrundes an entsprechender Stelle. Diese Art Transparenz zu simulieren sieht schicker aus als die übliche Vollfarbe, bzw. schwarz und hat den Vorteil, dass sie ressourcenschonend ist.

Der Nachteil all dieser Programme liegt – wie bei fast jeder visuellen Erweiterung – in dem Hunger nach Arbeitsspeicher, den solche Programme an den Tag legen. Yod’m und TopDesk belegen zusammen ca. 40 Megabyte. Hier muss man je nach System abwägen, ob der Nutzen der einzelnen Programme den jeweiligen Speicherbedarf und die damit eventuell verbundene Verlangsamung anderer Programme rechtfertigt. Angesichts des Speicherlochs, dass Firefox reißt (ca. 100 MB bei zwei geöffneten Seiten), relativieren sich solche Zahlen jedoch.

Mit ‘Web 2.0′ haben eine Reihe von JavaScript Frameworks Einzug in die Webentwicklung gehalten. Hier und da wird noch das eine oder andere Plugin dazugeladen und jedes bringt meist eine eigene CSS-Datei mit. Das führt schnell daszu, dass eine große Zahl externer Dateien geladen werden, was den Seitenaufbau spürbar verlangsamen kann, selbst mit einer DSL-Leitung. Deshalb fasse ich hier einmal die besten Tipps, die ich zur zur Optimierung der Ladezeiten von Webseiten kenne, zusammen. Da der Artikel etwas länger geworden ist, habe ich ihn in 4 Teile aufgeteilt: Markup, Komression, Reduzierung von Requests und Caching.

Markup

Über semantisches Markup ist wirklich schon genug geschrieben worden (z.B. bei A-List-Apart) , als dass ich darauf im Ganzen noch eingehen müsste. Nur soviel: Wer Strutktur(HTML), Aussehen (CSS) und Verhalten(Javascript) auf seiner Webseite bisher nicht getrennt hat, sollte dies tun, denn es reduziert u.a. die Größe des Quellcodes ganz erheblich. Hier liegt nach wie vor großes Optimierungspotential für viele Webseiten.

• HTML
  Wer valides Marhup schreibt und auf Semantik achtet (nicht einfach Tabellenwüsten durch DIV-Wüsten ersetzen), macht eigentlich alles richtig. Ich habe nur einen Punkt, der mich zunehmend ärgert: Es ist meiner Meinung nach eine Unsitte geworden, mehrere Inhalte in eine Seite zu laden und die nicht benötigten dann auszublenden. Solche Dinge sollten meines Erachtens asynchron nachgeladen werden, denn auch wenn die Elemente nicht angezeigt werden, so werden sie doch bei vielen Browsern sofort geladen und verlangsamen den Seitenaufbau.
  Wem es auf jedes KB ankommt, der kann vor dem Veröffentlichen seiner Seiten auch noch die HTML-Kommentare entfernen.
• CSS
  CSS Dateien lassen sich relativ gut verkleinern: Wo es geht, sollte man Kurz-Schreibweise verwenden, also z.B. #FFF anstatt #FFFFFF; margin: 0; anstatt margin-top: 0px; margin-bottom: 0px… Außerdem bin ich dazu übergegangen, CSS-Deklarationen pro Definition immer in eine Zeile zu schreiben. Ein nützliches Tool zum Verleinern von CSS-Files ist der CSS Formatter and Optimizer (je nach CSS-Stil und Einstellungen kann das Tool schon mal 50% Ersparnis rausholen) Er basiert auf CSSTidy, das man auch per command-line oder php-script anstoßen kann.
• Javascript
  Neben Kompression und Obfuscation, die ich im nächsten Teil der Serie behandele, sollte man natürlich in erster Linie effizienten Code schreiben. Vor dem Upload von JS-Dateien auf die Live-Umgebung, kann man zumindest die Kommentare und Umbrüche entfernen. Das Aptana-Toolkit bringt Funktionen hierfür mit. Wer ein JS-Framework benutzt, sollte genau analysieren, was er wirklich benötigt. Prototype/Script.aculo.us ist zwar wirklich schön, wer aber nur zwei AJAX-Requests durchführen will, braucht nicht gleich eine 100KB Library. Alternativen sind z.B. jQuery oder mootools oder – selber schreiben.
  Außerdem kann es sich lohnen, für häufig verwendete Funktionen Kurzschreibweisen zu entwickeln (wie z.B. bei vielen JS-Libraries $() = document.getElementById()).