3 Tipps für eine schnellere Website

Die Geschwindigkeit einer Website spielt in der heutigen Zeit eine entscheidende Rolle. Sie beeinflusst das Nutzererlebnis, das Ranking bei Suchmaschinen und nicht zuletzt auch Verkäufe im eigenen Onlineshop und andere Conversions. Sie ist entscheidend für den ersten Eindruck, welcher ein Besucher von einer Website hat. Schnelle Websites wirken professionell und vertrauenswürdig, langsame hingegen billig und unseriös. Folgende Tipps helfen dabei, die Performance einer Website messbar zu verbessern.

1. Bilder optimieren

Bilder stellen oftmals den grössten Teil der heruntergeladenen Datenmenge einer Website dar und bieten somit das meiste Potenzial, um die Geschwindigkeit einer Website zu verbessern. Die Herausforderung beim Optimieren von Bildern ist es, den Sweet Spot zwischen kleiner Dateigrösse und für den Besucher ansehnlicher Bildqualität zu finden.

Das richtige Format

Zuerst sollte das korrekte Format für Bilder gewählt werden. Für Fotos eignet sich JPEG am besten. Dieses Format ist deutlich kleiner als PNG oder GIF und bleibt meist auch noch ansehnlich, wenn man die JPEG-Qualität auf 80% reduziert. Braucht man Transparenz in einem Bild, greift man am besten zu PNG8 («nur» 256 Farben), bei farbintensiven Bildern zu PNG24.

Vergleich der Dateigrössen zwischen JPG und PNG – dasselbe Foto als PNG ist mehr als 5-mal so gross.

Für Logos, Icons und andere Vektorgrafiken sollte unbedingt das SVG-Format verwendet werden (SVGs können sogar «inline» direkt in den Code eingefügt werden, wodurch ein HTTP-Request gespart wird). Animierte GIFs haben meist enorme Dateigrössen und lassen sich mittlerweile gut durch Videos ersetzen. Moderne Browser unterstützen teilweise bereits das WEBP-Format, welches gute Kompression, Transparenz und sogar Animationen ermöglicht.

Die passenden Dimensionen

Eine der einfachsten und effektivsten Bildoptimierungsmethoden ist es, nicht mehr Pixel, als für die Darstellung des Objektes im Browser nötig sind, zu übertragen. Ein Bild, welches mit einer Breite von 800 Pixel auf der Website angezeigt wird, muss also nicht 1200 Pixel breit sein. Die Dimensionen (Breite und Höhe in Pixel) eines Bildes sollten möglichst passend gewählt werden. Unnötige Pixel treiben die Dateigrösse eines Bildes stark in die Höhe.

AbmessungenPixelDateigrösse
100 x 10010 00039 KB
200 x 20040 000156 KB
300 x 30090 000351 KB
500 x 500250 000977 KB
800 x 800640 0002500 KB

Zudem macht es Sinn, für mobile Geräte und Bildschirme mit sehr hoher Auflösung (z.B. Retina-Displays) responsive Bilder auszuliefern. Dies ist für Webentwickler mit den beiden <img>-Tag-Attributen srcset und size realisierbar (Leitfaden auf web.dev).

Zusätzliche Kompression

Abschliessend ist es empfehlenswert, Bilder durch ein zusätzliches Tool wie bspw. ImageOptim oder Squoosh laufen zu lassen, welches dabei hilft, die Bilder (möglichst) verlustfrei auf die kleinstmögliche Dateigrösse zu komprimieren.

2. Schriften optimieren

Schriften machen häufig den zweitgrössten Teil der Grösse einer Website aus.
Screenshot: Pingdom Speed Test

Webschriftarten sind längst zum neuen Standard geworden, kaum eine Website nutzt noch Systemschriften wie Arial oder Times New Roman. Dabei darf nicht vergessen werden, dass jede Schriftart eine zusätzliche Ressource ist, welche beim Aufruf einer Website heruntergeladen werden muss. Manche Schriftarten können Tausende von Glyphen enthalten und dabei einen erheblichen Teil der Datenmenge ausmachen oder beim Laden das Darstellen des Textes blockieren.

Folgende Massnahmen können Abhilfe schaffen:

  • Anzahl der Webfonts minimieren
  • Umfang der Webfonts minimieren (z.B. keine griechischen Zeichen laden, wenn man sie nicht benötigt)
  • nicht verwendete Schriftstile und -varianten entfernen
  • auf veraltete Schriftart-Formate wie TTF und EOT verzichten (WOFF und WOFF 2 reichen für gängige Browser aus)
  • einen WebFontLoader verwenden

3. Scripts und CSS optimieren

Websites werden immer umfangreicher, ehrgeiziger und funktionsreicher – was eine gute Sache ist. Allerdings nehmen durch die ungebremste Entwicklung auch die Datenmengen von textbasierten Ressourcen wie JavaScript- und CSS-Dateien stark zu. Beachtet man folgende Punkte, lässt sich aber auch hier noch einiges an Ladezeit sparen.

  • JavaScript nicht im <head>, sondern am Ende der Website einbinden
  • falls Javascript doch im <head> eingebunden, nur mit async- oder defer-Attributen
  • ungenutzte Daten entfernen: Libraries, Frameworks, Polyfills usw.
  • JavaScript-Dateien zusammenfassen und komprimieren (concat & minify)
  • CSS-Dateien zusammenfassen und komprimieren (concat & minify)
  • GZIP für die Übertragung von Webserver zu Browser nutzen

Fazit

Die Performance einer Website ist wichtig, wird aber leider allzu oft ausser Acht gelassen. Der Fokus sollte dabei darauf liegen, dem Benutzer ein möglichst gutes Erlebnis zu bieten, auch wenn er irgendwo in einem einsamen Bündner Seitental mit mobilem 2G-Internet unterwegs ist. Niemand wartet gerne – langsame Websites werden schnell wieder geschlossen und das nächste Suchresultat wird aufgerufen.

Mit Tools wie Google Lighthouse (auch direkt im Audit-Tab der Google Chrome DevTools verfügbar) oder dem Pingdom Website Speed Test lassen sich kostenlos und auf einfache, verständliche Weise potenzielle Flaschenhälse aufspüren.