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.

Performance-Optimierung

© 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.

Performance-Optimierung

© 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 zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…