Schnellere Websites

Websites sollten unbedingt schnell laden und auf alle Benutzerinteraktionen reagieren. Sinkende Zugriffszahlen, schlechtere Bewertungen bei Suchergebnislisten in Google sowie einbrechende Umsätze auf eCommerce-Websites belegen dies. Und wer wartet 2014 noch gerne auf sich aufbauende Websites, wenn man doch nur schnell etwas Spezifisches sucht oder sich über Jemanden oder Etwas näher informieren möchte?

Dennoch zeigt der Trend: Websites werden immer schwergewichtiger, immer mehr Daten werden geladen. Nun könnte man meinen: "Ist doch kein Problem, Computer werden doch auch immer schneller!". Dabei wird vergessen, dass Websites immer häufiger von unterwegs besucht werden. Der mobile Datenverkehr nimmt noch immer rasant zu. Unterwegs möchte man aber keine Megabyte-schweren Websites ansurfen. Das dauert zu lange und zerrt am Datentarif. "Ist doch kein Problem, es wird bald flächendeckend LTE verfügbar sein!". Da glaube ich noch nicht dran. 2014? In Deutschland? Ausserhalb der Ballungszentren?

Was sollten wir, die an Websites arbeiten, also unternehmen?

Weniger ist mehr

Zunächst einmal: möglichst wenige und kleine CSS-Datein, welche oben im Header stehen. Dann: möglichst wenige und klein gehaltene JavaScript-dateien, welchen im Footer stehen (mit Ausnahme von Polyfills, natürlich). Verwenden wir also ein JavaScript-Plugin für schnöne Dropdowns (dropdowns.js), eins für die Navigation (nav.js) sowie ein weiteres für ein Formular (validate.js), fassen wir diese besser zu einer globalen scripts.js zusammen.

Responsiv umgesetzte Websites

könnten mehrere Stylesheet-Dateien umfassen, welche je nach verfügbarer Bildschirmbreite gerendert werden. Setzen wir aber unsere styles.css mit z.B. einer desktop.css sowie der tablets.css und einer mobil.css untereinander in der Headerbereich, so werden sie alle geladen, unabhängig von der Auflösung. Verwenden wir also lieber eine globale styles.css mit Media Queries drinnen.

Sie wünschen eine grobe erste Kostenindikation für Ihr Webdesign-Projekt? Gerne.
Bitte kontaktieren Sie uns oder lesen Sie unsere Hinweise für Projektanfragen.

Minimieren von Entwicklungsdateien

Natürlich sollen unsere Stylesheets großzügig mit Zeilenumbrüchen und Kommentaren versehen sein. Sonst macht ja auch die Entwicklung einer komplexen Website kaum Spaß. Aber: lasst uns die Dateien mit nützlichen kleinen Tools minimieren. Eine styles.min.css kann schon fast um die Hälfte ihrer ursprünglichen Dateigröße schrumpfen! Gleiches gilt natürlich für die scripts.min.js. Auch CDN-gehostete Scriptbibliotheken wie jQuery liegen als komprimierte Version vor, welche so direkt eingebunden werden kann. Sie ist 65% kleiner! Diese sollen ja auch nur für Maschinen lesbar sein und nicht als Abendlektüre für Webseitenbesucher gelten.

Bilder

Hier ist noch viel mehr rauszuholen, will meinen Platz sparen. Für kleine Symbolbildchen verwendet man mittlerweile praktische Iconfonts, z.B. von den Jungs von IcoMoon. Diese sind klein, mit CSS manipulierbar und wie Vektordateien skalierbar. Eine etwas ältere Technik sind die Image Sprites. Selbst die sparen Server Requests und sorgen für schnellere Ladezeiten. Eine 300kb-Datei ist schneller geladen als 3 mal 100kb. Auch Bilder können und sollten unbedingt komprimiert werden. Schnell sind mehrere hundert Kilobyte gespart, wenn man ein JPG kleiner exportiert. Dazu gibt es ebenfalls kleine praktische Tools. Man sollte nur ein gesundes Verhältnis zwischen Dateigröße und Bildqualität finden. FullHD-Fotos bekommen ich mittlerweile bei sehr guter Bildqualität auf gut 100kb.

Komprimieren der gesamten Website

mit GZip spart oft bis zu 70% der Größe ein. Dafür gibt es verschiedene Dienste, welche über die eigene .htaccess gesteuert werden. Dateien sollten darüber hinaus stets mit einer Art "maximalem Haltbarkeitsdatum" versehen werden.

Fazit

Alle von mir angesprochenen Techniken lassen sich mit wenigen Stunden Zeitaufwand implementieren. Arbeitszeit, welche sich mehr als lohnt! Ergebnisse lassen sich über diverse Online-Dienste kontrollieren.