Geschwindigkeit meiner Website optimieren

Die Geschwindigkeit, mit der eine Website geladen wird, gewinnt zunehmend an Wichtigkeit, da die Besuchenden heutzutage oft über mobile Geräte oder drahtlose Internetverbindungen auf Websites zugreifen. Zusätzlich werden schnelle Websites von Suchmaschinen besser bewertet, bei Google beispielsweise als Teil der «Core Web Vitals». In diesem Artikel geben wir dir Tipps, wie du die Geschwindigkeit deiner Website optimieren kannst.

Analyse

Als Erstes gilt es, die aktuelle Geschwindigkeit zu analysieren und herauszufinden, wo deine Website noch Optimierungspotential hat. Es gibt dazu diverse Tools, die eine rasche Analyse der eigenen Website ermöglichen.

• Die Entwicklerwerkzeuge deines Browsers ermöglichen das komfortable Bearbeiten einer Website direkt im Browser und zeigen detaillierte Analysen zur Geschwindigkeit aller Elemente auf deiner Website an. Du kannst dir beispielsweise die Ladezeiten der einzelnen Dateien anzeigen lassen und sogar auf serverseitige Metriken zugreifen: «Server-Timing: Serverseitige Metriken im Browser anzeigen»
• PageSpeed Insights von Google zeigt dir auf, wo du deine Website noch optimieren kannst. Im Browser Chrome und in der Konsole steht dir zudem Lighthouse zur Verfügung.
• Profiler-Tools wie Blackfire bieten ebenfalls detaillierte Informationen zu Flaschenhälsen und liefern somit Ansätze zur Optimierung.

Nach der Analyse helfen dir die folgenden Tipps, um deine Website zu optimieren:

Serverantwortzeit verringern

Oft wird empfohlen, die sogenannte TTFB («time to first byte») zu optimieren und dabei auf den Webhosting-Dienst oder einen schnelleres Webhosting verwiesen. Warum dies oft wenig sinnvoll ist, erfährst du im Artikel Time To First Byte (TTFB). In der Tat liegt eine hohe Serverantwortzeit aber hauptsächlich an zu komplexen PHP-Scripts, die zur Berechnung der Ausgabe viel Zeit benötigen und nicht an der Geschwindigkeit des Servers. Wenn ein CMS wie WordPress zum Einsatz kommt, liegt das in der Regel an kompliziert programmierten Themes oder Plugins/Modulen. Um die Bremser zu lokalisieren, deaktiviere alle Plugins/Module. Danach aktiviere Schritt für Schritt alle deine Plugins/Module und teste nach jedem Schritt die Serverantwortzeit erneut. Die Chance ist gross, dass du so das für die langsame Serverantwortzeit verantwortliche Plugin/Modul findest.

Cache aktivieren

Das Aktivieren einer Caching-Funktion reduziert die Seitenladezeit ebenfalls erheblich, weil dann die Seite nicht bei jedem Aufruf komplett neu generiert werden muss, sondern bereits fertig aus dem Cache geladen werden kann. Diese Funktion muss von deinem CMS jedoch unterstützt sein. Wenn du WordPress einsetzt, findest du im Artikel «Geschwindigkeit meiner WordPress-Website optimieren» weiterführende Informationen. Generell empfehlen wir dir LiteSpeed Cache, die im von uns verwendeten LiteSpeed-Webserver eingebaute Caching-Funktion. Mehr dazu findest du in unserem Supportcenter-Artikel «LiteSpeed Cache».

HTTP-Anfragen verringern

Vereine viele verschiedene CSS- oder JavaScript-Dateien zu einer einzigen Datei und verwende CSS-Sprites für Bilder oder Icons, um die Anzahl der Anfragen zu verringern. Der Browser muss so nicht auf fehlende Dateien warten und kann die Website schneller darstellen. Ein Beispiel dafür, wie du CSS-Sprites für ein Bild verwenden kannst, findest du im Blog-Post von «A List Part».

JavaScript zum Schluss

Binde JavaScripts am Ende des Quelltextes ein. Browser laden während dem Download eines Scripts keine weiteren Inhalte, wodurch andere Inhalte erst verzögert heruntergeladen werden. Scripts, welche nicht zwingend beim ersten Ladevorgang benötigt werden, wie beispielsweise Google Analytics, können mit dem Attribut async oder defer versehen werden. In einem Blog-Post auf der Website «Zell» wird das noch ausführlich erklärt.

JavaScript und CSS auslagern und verkleinern

Vermeide JavaScript und CSS-Anweisungen direkt im Quelltext und lagere diese stattdessen in externe Dateien aus. Die externen Dateien werden vom Browser zwischengespeichert und müssen so nicht bei jedem neuen Seitenaufruf heruntergeladen werden. Um die Dateien möglichst klein zu halten, können diese zusätzlich noch verkleinert werden. Oft wird dieser Vorgang «Minify» genannt. Auf web.dev, der Developer-Website von Google, findest du weitere hilfreiche Tipps: «Minify CSS» und «Minify JavaScript».

JavaScript lokal einbinden

Binde JavaScript nicht über die URL einer fremden Seite ein. Du verlierst so Zeit für die DNS-Auflösung und musst warten, bis der externe Server antwortet. Reagiert dieser langsam, wird auch deine Website ausgebremst.

Optimiere deine Bilder

Skaliere deine Bilder nicht via HTML. Optimiere die Bildgrösse bereits im Bildbearbeitungsprogramm. Ausserdem ist es hilfreich, Bilder in modernen Bildformaten wie WebP oder AVIF anzubieten. Enthält deine Website viele Bilder, kannst du diese zusätzlich noch auf die Bildschirmgrösse zugeschnitten ausliefern lassen, da auf einem Smartphone beispielsweise meist nicht das Bild in voller Grösse benötigt wird. Bei den Kolleginnen und Kollegen von CSS-Tricks findest du einen interessante Artikel dazu: «A Guide to the Responsive Images Syntax in HTML».