10 Schritte zum nachhaltigem Webdesign

Schritt 1: Lesen Sie die WPO-Standards

Schritt 2: Optimieren Sie Ihre Bilder (wirklich)

JPEGS, großartig zum Komprimieren fotografischer Bilder, belastet den Client beim Aufbau der Seiten. Auf Desktop-PCs spielt dies keine Rolle, aber auf Low-Power-Smartphones und Tablets wird ein JPEG, im Vergleich z.B. mit PNG mehr CPU-Zyklen verwenden, um den Bildschirm zu zeichnen und so die Batterie mehr entladen. Deshalb ist PNG das bevorzugte Format für Handys.  Stellen Sie sicher, dass Sie JPEGs nur bei Bedarf verwenden, und stellen Sie die Symbole und Steueremelente Ihrer Benutzeroberfläche um auf PNG-Format oder GIF. Testen Sie, welche Variante die kleineren Dateien erzeugt.

Bitte bachten Sie, dass Photoshop Bilder nicht optimal komprimiert. Sie können die Größe Ihrer Bitmaps noch weiter mit Yahoo! Smush.It oder ähnlichen Tools schrumpfen. Laden Sie einfach Ihre Bilddatei hoch, und das optimierte Bild runter.

Die Einsparungen hier sind in der Regel im Bereich von 6-10%, die auf komplexen Webseiten zu einer nicht unerheblichen Leistungssteigerung führt.

Schritt 3: Verwenden Sie CSS Sprites

Die Verwendung von Sprites in CSS Hintergrundbildern ist seit 2003 Standard, die schrecklichen „segmentierten Bilder“. Kombinieren Sie Ihre Hintergrundbilder in einer Datei. Dabei werden bei der Übertragung der Webseite nur noch ein Request mit einem Response ausgelöst und nicht mehr so viele Requests wie Grafikelemente.

Nun brauchen sie nur noch die CSS Hintergrund-Bildposition im CSS zu integrieren. So zeigen Sie nur den Teil des Bildes, das Sie in einem bestimmten Bereich benötigen. 

# Item1 {background: url ( ’sprite.png‘) 0 0;}
# Item2 {background: url ( ’sprite.png‘) -42px 0;} / * Dia Bild nach links * /
# Item3 {background: url ( ’sprite.png‘) -84px 0;} / * es wieder rutschen * /

Das beste daran ist es, das Sie diese Sprite nun auch einfach für alle anderen Auflösungen verkleinern können und so Ihre Webseite responsiv wird.

Schauen Sie sich doch mal die Hinweise der W3School an.

Schritt 4: Ersetzen Sie auf Ihrer Webseite Bitmaps mit Vektoren

Aber es gibt eine noch bessere Lösung für nicht-fotografische Bilder – SVG oder Scalable Vector Graphics. SVG-Dateien sind Text (XML) und keine binäre Daten. Moderne Browsern können die SVG direkt in Ihrer  Webseite laden und präsentieren, wo es nur einfach nur mehr HTML-Markup wird. Dies reduziert weiter die Anzahl von separaten HTTP-Anforderungen an den Server. SVG-Grafiken skalieren ohne Verlust der Auflösung, also ebenfalls perfekt für responsives Design.

Neuere Versionen von Adobe Illustrator, sowie Open-Source Inkscape können direkt SVG-Dateien erzeugen. Photoshop-Dateien können auch komplett auf SVG konvertiert werden, aber die Bildelemente bleiben Bitmaps – die resultierende SVG-Datei wird eine Sammlung von Inline-Bitmaps sein. 

Schritt 5: Ersetzen Sie viele kleine Bitmaps mit Glyphen

Die meisten Browser können online Schriftdateien (Webfonts) verwenden und diese Schriftdateien können als eine Art sprite-Datei für Vektorgrafiken neu generiert werden. Anstelle von Symbolen, könnten Sie einen benutzerdefinierten Symbolfonts erzeugen. z.B. mit Fontforge , für Schriften die über die Vektorbasis des Schriftsatzes unabhängig von der Auflösung ist.

Ist eine typographisches Userinterface Ihrer Webseite auf diese Weise entstanden, wird Hauptgeschwindigkeit erhöht und weniger Daten übertragen.

Nutzen Sie auch vorgefertigte Zeichensätze wie : FontAwesome. Diese haben bereits mehr als 600 Symbole integriert.

Schritt 6: Cachen Sie Ihre Downloads

Einer der ineffizienten – und unnötige – Eigenschaften nicht nachhaltiger Webseiten-Designs ist die Notwendigkeit, Bilder, CSS-Stylesheets und Code-Bibliotheken, die sich nicht ändern, nochmal zu laden – obwohl sie statisch sind. Dies kann durch Einstellung der .httaccess Datei auf Ihrer Website festgelegt werden. Für WordPress gibt es hier übrigens auch gute Plugins.

Schritt 7: Komprimieren Sie Ihre Downloads der gesamten Webseite

Sie sollten sicherstellen, dass Ihr Webserver die Downloads komprimiert. Die meisten Server können Ihre heruntergeladenen Dateien durch die Verringerung ihrer Dateigröße und so den Datentransfer-Bilanz Ihrer Webseite durch Zippen optimieren. Die notwendige Zeit zum Entpacken auf dem Client ist minimal.

Schritt 8: Verwenden Sie Content Delivery Networks

Noch besser als statisches Caching, lassen sich über Content-Delivery Networks (CDNs) viele Webseiten eine Skriptdatei teilen. Wenn jemand Ihre Website besucht, liest er nur einmal die CDN-Datei. Wenn der Besucher eine andere Website mit dem gleichen CDN besucht, muss er überhaupt nichts herunterladen. Das sind enorme Einsparungen für das gesamte Internet und vereinfacht auch Ihr Webseiten-Setup. Google, Microsoft und andere Unternehmen bieten ihre CDN-Dienste kostenlos an. Dies rechnet sich vor allem für Javascript-Dateien, Boilerplates-CSS und Standard-Webfonts.

Schritt 9: Holen Sie sich eine grüne Webhost

Ein großer Server bei Ihrem Webhosting-Partner saugt so viel Energie wie ein SUV und einem großen Webhoster können leicht das Stromleistungs-Äquivalent von Tausenden von Einfamilienhäusern erzielen. Grüne Hosting Partner minimieren ihre Auswirkungen auf die Umwelt durch den Einsatz erneuerbarer Energie oder den Handel von Energiegutschriften.