Schneller, höher, weiter

Teil 2: Homepage-Optimierung: Geringe Ladezeiten, gute Performance

Auf der Client-Seite muss nichts beachtet werden. Die Webbrowser erkennen anhand eines HTTP-Headers automatisch, dass der Inhalt komprimiert übertragen wurde und verarbeiten diesen entsprechend.

Während Textdaten wie HTML, CSS und Javascript dankbare Ziele für eine Kompression mittels GZIP sind, macht diese bei Binärdaten, die auf einer Webseite vorkommen, in der Regel keinen Sinn. Bilder liegen beispielsweise bereits in komprimierter Form vor.Eine GZIP-Komprimierung bewirkt hier dann das Gegenteil: Die Dateien werden geringfügig größer. Aus diesem Grund sollte man immer in der Serverkonfiguration die Komprimierung auf Textinhalte beschränken.Die Komprimierung von Bildern sollte immer mit Augenmaß durchgeführt werden. Viele moderne Bildbearbeitungsprogramme unterstützen das Speichern von Grafiken für das Web. Meist kann hier gezielt auf das Format und die Qualität Einfluss genommen werden.

© Archiv

Das von Yahoo kostenlos zur Verfügung gestellte YSlow-Plugin für das Benchmarking einer Seite gibt Verbesserungsvorschläge.

Diese Arbeit sollte man nicht automatisieren, da dies in der Regel immer eine Gratwanderung zwischen Dateigröße und Bildqualität ist und ein Mensch dies besser beurteilen kann als eine Maschine. Beachten Sie dabei auch, dass sich die verschiedenen Formate nur für unterschiedliche Bildtypen eignen.

Während bei Fotos die besten Ergebnisse mit JPEG erzielt werden (sowohl in Bezug auf Qualität als auch Dateigröße), werden gezeichnete Bilder normalerweise mit den Formaten PNG oder GIF gespeichert.

Verschleierungstaktik

Javascript und CSS machen heute einen großen Teil einer Webseite aus. Daher lohnt es sich hier, zusätzlich zur bereits beschriebenen serverseitigen Komprimierung mit GZIP, noch weitere Optimierungen einzusetzen.

Wie in jeder anderen Programmiersprache versuchen Webentwickler auch in Javascript sauber formatierten und gut dokumentierten Quellcode zu schreiben, der auch nach einigen Monaten noch vernünftig gewartet werden kann. Variablen werden sprechend benannt, Klammern gesetzt, Zeilen eingerückt und mit Kommentaren wird nicht gegeizt.

© Archiv

YSlow zeigt statistische Auswertungen über eine Seite und die Nutzung des Caches.

Was für einen Entwickler wichtig ist, interessiert einen Browser überhaupt nicht. Für ihn sind diese Mittel überflüssig. Auch in Hinblick auf die Reduzierung der zu übertragenden Datenmenge macht sich ein Entfernen aller überflüssigen Zeichen positiv bemerkbar. Zwei Lösungsansätze können dabei unterschieden werden.

Die einfachste Lösung besteht darin, alle syntaktisch nicht notwendigen Zeichen zu entfernen. Hierdurch lassen sich alle Kommentare, viele Leerzeichen und Zeilenumbrüche einsparen. Das folgende Listing zeigt eine einfache Javascript-Funktion mit Formatierung und Kommentaren.

// Wunderbare Testfunktion
function hallo() {
var ausgabetext = ,Hallo Welt';
alert (ausgabetext);
}

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.