Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Software & Infrastruktur

Performance für Einsteiger, Teil 3: Frontend-Performance

In unserer Performance-Einsteiger-Serie verraten wir dir, was es zu beachten gilt und wie du leicht selbst die Performance deiner Webseite verbessern kannst. Heute widmen wir uns der Optimierung im Frontend-Bereich.

Das Frontend der Webseite bietet eine Menge Optimierungsspielraum, den jeder Webworker ohne allzu große Anstrengungen ausnutzen kann. Im letzten Teil der Website-Performance-Wochenserie haben wir uns mit Latenzen, HTTP-Overhead und den Grundlagen der Reduktion von Verbindungen zur Optimierung der Webite-Performance auseinandergesetzt. Heute wollen wir uns um die Reduktion der Datenmenge kümmern, denn obwohl eine schlechtere Latenz viel stärkere Auswirkungen auf die Ladezeit unserer Seite hat, ist die zu übertragende Datenmenge ebenfalls ein wichtiger Faktor.

Im Folgenden stellen wir dir verschiedene Ansätze zur Datenreduktion vor, die alleine geringe Auswirkungen haben, aber in Summe in einer messbaren Verbesserung resultieren können.

Bilder optimieren

Bilder nehmen wohl den größten Teil der Gesamtmenge an Daten einer Webseite ein. Die Optimierung von Bildern spart wertvolle Kilobyte und somit Übertragungszeit. Die Optimierung beginnt bei der Wahl des richtigen Bildformates. Je nach Inhalt der darzustellenden Grafik, kann die Wahl des Formates entscheidend über die Dateigröße sein. Als Webworker stehen uns neben JPG, GIF und PNG auch SVG-Grafiken und das neue WEBP Format zur Verfügung. Letzteres wird zwar noch nicht weitläufig unterstützt, sollte aber dennoch nicht ungenannt bleiben.

t3n Logo nach Farbreduktion
t3n-Logo nach Farbreduktion. (Screenshot: t3n.de)

Verschiedene Formate komprimieren verschieden gut, mit unterschiedlicher Bildung von Artefakten. Hier gilt meistens Probieren über Studieren. Benötigt man hochwertige Bilder mit Transparenten Flächen, kann man auf JPG und GIF in der Regel von Vorne herein verzichten. Dafür kann man ohne Bedenken bei der Darstellung eines sehr großen Bildes wohl grundsätzlich auf das JPG-Format zurückgreifen.

Neben der Auswahl des Formates, kann die Reduktion von Farben zu einem optisch kaum wahrnehmbaren, aber in der Dateigröße deutlich messbaren Unterschied führen. Auch die Verstärkung der Kompressionsstufe, während der Generierung eines JPG-Bildes, hilft Kilobyte bei vertretbarer Qualität einzusparen. Im obenstehenden Beispiel erreichen wir durch die Reduktion der Farben eine Kompression von 35 Prozent zum Originalbild.

Überflüssige Daten entfernen

Das Entfernen von Meta-Informationen in Bildern spart zusätzliches Gewicht ein. Immerhin können diese Informationen neben spannenden Werten wir Brennweite, Blende und Belichtungszeit auch komplette Vorschaubilder enthalten, die wir nun wirklich nicht für den Betrieb unserer Webseite benötigten können.

Meistens geben Grafik-Programme mit den entsprechenden Export-Einstellungen bereits gut optimierte Bilder aus. Mit einigen Online-Tools wie TinyPNG, JPEGmin oder dem „Image-Optimizer“ von Dynamic Drive können noch bessere Ergebnisse erzielt werden – vollautomatisch.

CSS statt Bilder

Für die Datenreduktion ist ein gänzlicher Verzicht auf Grafiken noch besser. Dank CSS3 haben wir deutlich bessere Möglichkeiten, um unser Design ohne Bilder zu gestalten. Das hat nicht nur Vorteile für die Datenmenge, sondern resultiert auch in einer besseren Unterstützung für Retina-Geräte. Die Berechnungszeit für CSS3 darf aber nicht unberücksichtigt bleiben. Besonders bei mobilen Geräten könnte dieser Ansatz also unter Umständen problematischer sein, als die Auslieferung von Bildern. Die nachfolgende Grafik des „Smashing-Magazine“ illustriert die Ladezeiten für bestimmte CSS3-Eigenschaften.

CSS3 Performance bei mobilen Geräten.
CSS3 Performance bei mobilen Geräten. (Grafik: Smashing Magazine)

Minifying und Obfuscation

Auch Skripte und Stylesheets bringen einiges auf die Wage – aber auch an dieser Schraube können wir drehen. Zum einen können JavaScript- und CSS-Bibliotheken „minified“ &ndash, also verkleinert – werden. Hierfür werden alle Kommentare, Zeilenumbrüche und nutzlose „Whitespaces“ aus dem Dokument entfernt, um Kilobytes zu sparen. Dadurch entstehen für Menschen beinahe unlesbare Code, denn dieser wird in einer Zeile dargestellt. Für den Browser stellt die Schreibweise kein Problem dar, sodass die Verarbeitung problemlos erfolgen kann.

Minified CSS
Minifixiertes CSS im Text-Editor: Für Menschen unlesbar, für Maschine kein Problem. (Bild: t3n.de)

Mit „Obfuscation“ kann bei JavaScript zusätzlich die Dateigröße verringert werden. Bei dieser Technik werden Funktions- und Variablennamen umgeschrieben und in verkürzter Form dargestellt. So ist eine deutlich kompaktere Schreibweise bei gleichbleibender Funktionalität möglich.

Für die Verkleinerung und „Obfuscation“ eines Skriptes gibt es verschiedene Online Tools wie JSMin, den „YUI-Compressor“, „Minify“ und den „Closure-Compiler“.

Auch „Taskrunner“ wie „Grunt“ bieten euch diese Möglichkeiten. Wir helfen dir die ersten Schritte mit Grunt ohne Probleme zu meistern.

Die Verkleinerung bringt bei CSS in der Regel nicht so viel wie bei JavaScript. Hier optmiert man am besten von Hand und entfernt Redundanzen und unnötige Code-Fragmente. Hierbei kann eine verkürzte Schreibweise von Klassen oder Beispielsweise auch Farbwerten und Größenangaben einen Teil zur Leistungssteigerung beitragen. Das kann schnell in kleinteiliger Arbeit resultieren, sodass wie bei allen Optimierungsmaßnahmen, der Aufwand nicht den Nutzen überwiegen sollte.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst