9 Tipps für eine bessere Website Performance

Warum ist die Performance einer Website entscheidend?

Die Geschwindigkeit einer Website oder eines Online Shops hat nicht nur Einfluss auf den Ranking-Algorithmus von Google – schnelle Websites erscheinen bei Google weiter oben – sondern auch auf das Verhalten des Users resp. auf deren Absprung- und Konversionsrate. Statistiken zeigen, dass sich mit jeder zusätzlichen Sekunde, die eine Webseite zum Laden braucht, die Absprungrate um beinahe 7% erhöht. Dies wirkt sich wiederum auf die Konvertierungsrate aus, die dadurch sinkt. Was beispielsweise eine 2% bessere oder schlechtere Konversionsrate für einen finanziellen Einfluss auf eine umsatzstarke E-Commerce Website hat, spricht für sich selbst. Lange Rede, kurzer Sinn:

Website Speed = Money 💰

Website Speed = User Experience 😍

Wie kann ich die Performance einer Website messen?

Damit man überhaupt weiss, wo die Ursache einer schlechten Website Performance liegt und man prüfen kann, ob sich Anpassungen positiv auswirken, kann die Website Performance beispielsweise mit dem neuen Tool von Google: "Lighthouse", gemessen werden. Lighthouse kann entweder in einem Chrome Browser über die DevTools aufgerufen oder als Chrome Browser-Extension installiert werden. Da die Performance einer Website aus verschiedenen Blickwinkeln betrachtet werden kann und Google nach wie vor das Mass aller Dinge ist, ist es sinnvoll, die Geschwindigkeit mit diesem Tool zu messen.

Achtung: Googles bisheriges Website Performance Tool “PageSpeed Insights” wird seit Ende 2018 nicht mehr weiterentwickelt. Die Ergebnisse weichen stark vom aktuellen Lighthouse Tool ab und sollten nicht berücksichtigt werden.

Website Lighthouse Analyse der Holzschutz 24 Website von Sitewerk

Damit ihre Website ebenfalls optimale Ergebnisse erzielen kann, sollten folgende neun Dinge beachtet werden:

1. Optimieren Sie die Bilder der Website für eine bessere Performance

Grösse der Bilder auf tatsächlich angezeigte Grösse reduzieren

Reduzieren sie die Bilder der Website auf die Grössen, in der sie diese anzeigen. So verbessern Sie die Ladezeit ihrer Website eminent. Das Produktbild einer E-Commerce Website wird beispielsweise mit 1200x800 Pixel angezeigt. Ein Originalbild von einer Stock-Website weist oft eine Auflösung von bis zu 5000x3500 Pixel auf. Passen Sie die Grösse dieser Bilder auf die genutzte Grösse an. Ansonsten riskiert Ihre Website drastische Einbussen in Geschwindigkeit und Usability, was zu einer schlechten Website Performance führt. 💥

Qualität der Bilder anpassen

Eine weitere Möglichkeit der Optimierung der Website Performance besteht darin, die Qualität der Bilder auf ca. 85% zu reduzieren (beim Speichern in Adobe oder anderen Bildbearbeitungstools einstellbar). Die reduzierte Bildqualität ist für den User kaum sichtbar, verringert die Filegrösse des Bildes aber bis zu 70%. Kleine Filegrössen bedeuten eine schnellere Ladezeit und damit bessere Performance Ihrer Website.

WebP Format verwenden

Um Bilder besser komprimieren und Websites noch schneller zu machen, hat Google das WebP Bildformat eingeführt. Das WebP Format wird von allen gängigen Webbrowsern unterstützt. Werden die Bilder einer Website mit dem WebP Format ausgeliefert, kann gemäss Google bei gleichbleibender Qualität bis zu 34% der Filegrösse eingespart werden. Dies kann bei bildreichen Websites einen regelrechten Website Performance-Boost auslösen!

Mehr Infos und Anleitungen zum neuen WebP Format gibt es hier bei Googles Dokumentation.

Achtung: Das WebP Format wird nur von aktuellen Browsern, wie Chrome, Firefox etc. unterstützt. Für eine korrekte Anzeige der Website auf z.B. dem Internet Explorer muss ein Fallback auf JPG oder PNG existieren.

2. Liefern Sie die Website über ein Content Delivery Network (CDN) aus

Um die Ladezeit einer Website ortsunabhängig zu reduzieren, kann ein CDN (Content Delivery Network) Abhilfe schaffen. Ein CDN ist ein Netz von Servern, die auf der ganzen Welt verteilt sind. Auf diesem Netz an Servern werden die Files einer Website gehostet. Wird von einem User ein bestimmter Inhalt einer Website abgerufen, ermittelt ein spezielles Routingsystem, welcher Server im CDN für die Auslieferung am besten geeignet ist. Dadurch können ortsunabhängig schnelle und unterbruchfreie Ladezeiten für Websites garantiert werden. Je nachdem, ob auf ein Cloud CMS gesetzt wird, werden die Files einer Website automatisch über ein CDN ausgeliefert. Ob Sie die Website über ein CDN ausliefern, hat also einen entscheidenden Einfluss auf Ihre Website Performance.

3. Minifizieren Sie die CSS und JavaScript Files der Website

Wenn der Webentwickler die CSS Stylesheets und die JavaScript Files einer Website schreibt, müssen diese in einer «human readable», also vom Menschen lesbaren Form, gespeichert sein. Dabei besteht ein Websiteprojekt aus unzähligen CSS und JS Files, die jeweils sehr viel Leerschläge und Zeilenumbrüche enthalten. Diese dienen ausschliesslich der Lesbarkeit. Für den Browser sind sie in den meisten Fällen bedeutungslos. Lassen Sie diese weg und optimieren Sie Ihre Website Performance. Man spricht von «Minification». Auch können alle Files zu einem einzigen zusammengefügt werden, wobei man von «Concatenation» spricht. Es gibt unzählige frei verfügbare Tools, die diese beiden Schritte für den User ausführen. So kann die Filegrösse bei JavaScript Files laut dem Tool JSCompress um bis zu 80% reduziert werden.

Wie das Ganze im Detail funktioniert und welche Tools es noch gibt, kann hier nachgelesen werden: Minify your Website.

4. Reduzieren Sie das Laden von externen Libraries

Websites bestehen in der Regel aus einer Ansammlung von verschiedensten Komponenten. Ein Button, eine Slideshow oder ein Akkordeon wurden tausendfach programmiert und im Internet sind viele hilfreiche UI-Libraries zu finden. Die Versuchung ist gross, für jede Komponente der Website eine praktische Library zu verwenden. Macht auch Sinn. Denn schöne UI-Komponenten zu programmieren braucht Zeit und am Ende Geld.

Was man aber nicht ausser Acht lassen darf, ist die Menge an unbekanntem Sourcecode, die man mit jedem Hinzufügen einer solchen Library in ein Website-Projekt lädt. Oft wird eine grosse UI-Bibliothek geladen, jedoch nur ein Bruchteil der verfügbaren Elemente wirklich verwendet. Das wirkt sich negativ auf die Website Performance aus.

Um die Ladezeit einer Webseite zu optimieren, sollten Sie nur Libraries verwenden, die einen Mehrwert bringen. Verwenden Sie nicht alles, was auf den ersten Blick Sinn macht, für Ihre Website. Oft gilt für die Auswahl von Plugins und Libraries: Weniger ist Mehr.

5. Nutzen Sie die gzip Website Kompression des Webservers

Bei der gzip-Kompression geht es darum, die verschiedenen Dateien zu komprimieren, die es für das Laden einer Website braucht. Durch das Verkleinern der Dateien müssen beim Übertragen der Website vom Server auf den Browser weniger Daten übertragen werden, was den Request schneller macht. Das Enablen der gzip-Kompression erfolgt durch eine Einstellung auf dem Webserver und ist bei den meisten Webservern standardmässig aktiv. Wie man die Einstellungen übersteuern oder ändern kann, erklärt folgender Beitrag: Compression

6. Nutzen Sie das Website Caching des Browsers

Um das Laden und das Navigieren innerhalb einer erneut besuchten Website performanter zu machen, kann der Cache eingesetzt werden. Dabei gibt es verschiedene Caches, die ein Entwickler für die Optimierung nutzen kann:

Website Cache auf dem Server

Beim Server Cache funktioniert der Mechanismus wie folgt: Ein User sendet dem Server einen Request für eine bestimmte Website. Der Server arbeitet den Request ab und sendet dem User die gewünschten Daten und Informationen. Es ist quasi ein Snapshot der abgefragten Website. Besucht der User erneut die exakt selbe Website (sendet dementsprechend den exakt gleichen Request), muss der Server den Snapshot der Website nicht neu rendern. Er nimmt stattdessen den gespeicherten Snapshot aus dem Cache und sendet ihn dem User zurück. Requests für das Anzeigen von besuchten Websites werden viel schneller abgearbeitet.

Die gängigsten CMS, wie Wordpress, unterstützen serverseitiges Caching von Haus aus und müssen nur aktiviert werden. Ein kleiner, aber wirkungsvoller Schritt zu einer optimalen Website Performance.

Website Cache im Browser

Beim Browser Cache erlauben es moderne Browser dem User eine besuchte Website in einem lokalen Speicher, dem Browser Cache, zwischen zu speichern. Auch hier werden erneute Besuche oder das Navigieren innerhalb einer besuchten Website schneller gemacht, da nicht alle Inhalte (Bilder, Skripte, etc.) neu vom Server heruntergeladen werden müssen.

7. Laden Sie die JavaScript und CSS Files der Website asynchron

Eine weitere Möglichkeit, das Rendern einer Website zu beschleunigen und die Website Performance zu verbessern, ist das asynchrone Laden von JavaScript Code oder CSS Stylesheets. Mit dem asynchronen Laden dieser Dateien verhindert man das sogenannte «Render-Blocking»-Problem. Damit ist die Unterbrechung des Renderns (Anzeigen) der Seite gemeint, bis jede einzelne JS und CSS Datei von Server geladen wurde. Das kann teilweise zeitintensiv sein. Um den ersten Screen einer Website korrekt anzuzeigen, ist in den meisten Fällen nur ein Teil der Dateien nötig. Diese müssen gezwungenermassen heruntergeladen werden, bevor die Website gerendert wird. Alle zusätzlichen Dateien werden anschliessend, ohne dass der User es merkt, geladen. So wird der Website erneut ein Performance-Boost 💨 verliehen.

8. Nutzen Sie Lazy Loading bei Websites mit hochauflösenden Bildern oder Videos

Lazy Loading ist eine Performance-Optimierungstechnik, die bei Websites mit vielen hochauflösenden Bildern oder anderen Medien, wie Videos, schnellere Ladezeiten garantiert. Der Grundgedanke von Lazy Loading ist, dass beim Laden der Website zwar sichtbare Inhalte geladen werden, das Herunterladen und Rendern der Inhalte (Bilder, Videos), die nicht aktuell angezeigt werden, aber verzögert wird. Das Laden und Rendern dieser Inhalte verzögerten sich so lange, bis der User an die Stelle der Website gelangt, wo die Inhalte tatsächlich angezeigt werden sollen.

9. Verhindern Sie Website Redirects

Das Weiterleiten einiger URLs von alten Websites ist beispielsweise bei einem Relaunch unumgänglich. Wenn möglich, sollten solche Redirects jedoch vermieden werden. Denn, wenn eine weitergeleitete Website vom User angefragt wird und der Server ein Redirect zu der neuen Seite machen muss, verlängert das den Request für einen Bruchteil einer Sekunde. Für Websites mit optimaler Performance sollte, wenn möglich, auf Redirects verzichtet werden.

Fazit

In der Praxis macht man schnell die Erfahrung, dass es die Website mit der perfekten Ladezeit nicht gibt oder der Aufwand dafür oft schlichtweg zu gross ist. Hält man sich jedoch an die oben beschriebenen Punkte, erreichen Sie mit vertretbarem Aufwand beachtliche Ladezeiten und damit eine optimierte Website Performance. Google und Ihre Websitebesucher werden Ihre schnelle Website lieben. 😉