Tipps zum Komprimieren von Webseiten

Kleinere Webseiten und Dateien bringen eine bessere Performance beim Aufrufen der entsprechenden Webseite - das ist eine Tatsache, die vielen von euch bekannt sein dürfte, allerdings werden die Aspekte der Optimierung oftmals aus Bequemlichkeit weggelassen oder einfach vergessen. In diesem Artikel möchte ich euch ein paar einfache Tipps zur Optimierung von Webseiten geben, die sich eigentlich bei fast jeder Seite oder auch bei Themes für Content-Management-Systeme anwenden lassen.

  Der erste Tipp beginnt direkt beim Bild-Export aus Photoshop: Hier sollten die Bilder möglichst über die Funktion »Für Web speichern« exportiert werden. Ein einfaches Balkendiagramm mit wenigen Farben könnte zum Beispiel besser als PNG8 oder Gif gespeichert werden, ein JPG ohne Kompression wäre hier eher die falsche Entscheidung.

  Allein mit optimal gespeicherten Bildern kann schon einiges an Traffic eingespart werden. Wenn nun für Icon-Sets oder ähnlich gruppierbare Bilder sogenannte CSS-Sprites verwendet werden, können hier auch noch einige HTTP-Requests eingespart werden. Bei CSS-Sprites liegen z.B. alle Icons in nur einer PNG-Datei und werden über Background-Position in die Webseite eingebunden.

  Auch CSS- und JavaSript-Dateien können einfach zusammengelegt werden. Oftmals verwendet man in einer Webseite mehrere Scripte oder Plug-Ins (jQuery-Plug-Ins). Diese kann man nun alle einzeln einbinden oder zum Beispiel gesammelt aus einer zentralen JavaScript-Datei laden. Damit können weitere HTTP-Requests eingespart werden. Natürlich macht das Ganze nur dann Sinn, wenn die JavaScripte oder CSS-Dateien auch für die gesamte Seite gelten.

  Mein letzter Tipp soll jetzt direkt die Dateigröße reduzieren. Es gibt diverse Online-Tools und auch native Software, um gängige Dateien zu komprimieren; dies geht in der Regel zu Lasten der Lesbarkeit. Ihr solltet also auf jeden Fall eine Sicherung der Dateien erstellen, bevor ihr diese komprimiert. Bei dieser sogenannten Minifikation werden Kurzschreibweisen eingefügt, leere Zeilen entfernt und Codes umgeschrieben. Auf diese Art komprimierte Dateien können teilweise bis zu 60% zur vorherigen Dateigröße einsparen.

  Neben einer minified Version können einige Tools auch noch eine komprimierte GZIP-Version erstellen, die noch ein paar KB mehr einsparen kann.

  Mein Favorit zum Komprimieren von Dateien ist Smaller App, eine native Anwendung für Mac OS. Natürlich gibt es auch diverse Online-Tools; hier eine kleine Liste:

  http://smallerapp.com/ http://www.csscompressor.com/ http://javascriptcompressor.com/ http://jscompress.com/  

 

[patrick_l]

Mit CSS-Sprites spart man in der Tat einiges an Traffic. Was auch noch den ein oder anderen Byte sparen kann, wenn man mit PNGcrush PNG weiter "zusammen staucht". Zwar nur minimal, aber summiert sich ja. Ansonsten noch HTTP/CSS und JS Kompression durch entsprechende Tools und od. Scripte.- YUI Compressor für CSS/JS: http://yui.github.com/yuicompressor/Ansonsten fällt mir noch eines der einfachsten Mittel rein. Schlanker Code Unnötige Notierungen vermeiden, Kurzschreibweise verwenden und anschließend CSS und Co komprimieren (Compressor+GZip). Was Grafiken angeht, wie du ja schon sagtest, den "Für Web speichern" Dialog verwenden. Dort dann auch öfter die einzelnen Formate miteinander vergleichen und für JPG die Qualität reduzieren. Liebe Grüße, Patrick