Schneller, höher, weiter

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

Die Verkleinerung von Javascript und CSS durch Minifier lohnt sich auch in Fällen, in denen bereits zur Komprimierung per GZIP komprimiert wurde. Sie sollten nicht darauf verzichten. Wenn Ihnen der Aufwand zu hoch ist, die Skripte selbst über die verschiedenen Tools zu verkleinern, dann greifen Sie zumindest zu den meist vorhandenen komprimierten Versionen der populären Javascript-Bibliotheken wie jQuery, ExtJS, Mootools oder anderen.

Natürlich muss auch klar sein, dass es während des Entwicklungszeitraumes keinen Sinn macht, mit verkleinerten Javascript-Dateien zu arbeiten. Hier ist es wichtig, dass die Dateien sauber formatiert sind und Variablen sprechende Namen besitzen. Daher sollte ein Minifier immer erst dann zum Einsatz kommen, wenn die Version für das Live-System erstellt wird.

Oftmals werden die Minifier in Deployment-Skripte eingebunden, welche die Daten vor dem Upload auf den Produktivserver entsprechend verarbeiten. Ein gutes Beispiel für das ANT-Build-Skript-System und den YUI-Compressor findet man unter

Der Ansatz Javascript on-the-fly, also direkt vor der Auslieferung, durch einen Minifier zu verkleinern, belastet den Server enorm und führt nicht zu schnelleren Ladezeiten, da dieser Vorgang zeit- und ressourcenraubend ist.

HTTP-Requests reduzieren

Jede Anfrage an den Server dauert eine gewisse Zeit. Je nach Netzgeschwindigkeit und Serverauslastung muss der Browser mehr oder weniger lange warten, bis das Ergebnis vom Server geliefert wird. Jeder Zugriff liefert zudem nicht nur die eigentlichen Daten, sondern auch alle Informationen, die zur Kommunikation mittels HTTP benötigt werden, beispielsweise Header-Informationen.

Dadurch erhöht sich die Datenmenge im Vergleich zu einer einzigen Anfrage an den Server. Generell gilt: Je weniger Anfragen an den Server gerichtet werden, desto besser und schneller ist die Ladezeit einer Seite. Auch hier gibt es viele Ansatzpunkte, wie dies erreicht werden kann. Allen gemeinsam ist, dass versucht wird, Daten in gemeinsamen Dateien zusammenzufassen.

Bereits nach kurzem Nachdenken fallen hier wieder die üblichen Verdächtigen Javascript und CSS ein. Da beide vom Browser gecached werden, macht es Sinn, diese zusammenzufassen. Viele Javascript-Frameworks für Web-2.0-Seiten bestehen aus vielen Einzeldateien. Diese lassen sich problemlos zu einem File zusammenfassen. Auch hier gilt wieder dasselbe für CSS.

Performance-Optimierung

© Archiv

Bildbearbeitungsprogramme wie beispielsweise Photoshop erlauben eine komfortable Einstellung und Optimierung von Bilddateien.

Fassen Sie die verschiedenen CSS-Dateien zu gemeinsamen Files zusammen. Auch bei dieser Zusammenfassung ist ein wenig Augenmaß gefordert. Selbstverständlich macht es nicht immer Sinn, alle Javascript-Dateien zu einem großen Monster zusammenzufassen. Nicht auf allen Seiten wird der gleiche Funktionsumfang benötigt. Fassen Sie Teile zusammen, die Sie gemeinsam auf verschiedenen Seiten benötigen.

Allein dadurch gewinnen Sie bereits deutlich an Performance. Moderne Seiten erzeugen eine Vielzahl an Serveranfragen. Dies lässt sich auch nicht durch die genannten Mittel vollständig eindämmen. Das Ziel muss hier sein, die Anzahl der Requests so weit wie möglich zu beschränken.

Bilder optimieren

Was für Textdaten wie Javascript oder CSS gilt, kann auch auf Bilder angewendet werden. Jede Grafik, die auf einer Seite Verwendung findet, wird durch den Browser durch eine separate Serveranfrage geladen. Auf Grafik-lastigen Seiten kommen viele kleine Icons zum Einsatz. Diese lassen sich zu einer Datei zusammenfassen und per CSS weiterverarbeiten.

Das Ergebnis nennt sich CSS-Sprite. Ein CSS-Sprite ist eine Grafik-Datei, in der alle Icons wie in einer Tabelle angeordnet gespeichert werden. Natürlich lassen sich diese Grafiken nicht mehr direkt mit einem Image-Tag anzeigen, da sonst die Gesamtgrafik angezeigt werden würde.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".