Webseite schneller machen

Es gibt mit Sicherheit keine Webseitenbetreiber:innen, die das Thema Website Geschwindigkeit nicht schon beschäftigt hat. Das ist auch selbstverständlich: Jede:r möchte seine Webseite schneller machen. Insbesondere jetzt, wo die Website Geschwindigkeit offizieller Rankingfaktor in der Google-Suche ist.

Wir möchten heute versuchen, Dir ein paar hilfreiche Tipps mitzugeben, wie Du bei Deiner Website die Geschwindigkeit optimieren und die Website Ladezeit verbessern kannst.

Webseite schneller machen: Laptop mit Code

Inhaltsverzeichnis 

Warum ist Pagespeed überhaupt so wichtig?

Natürlich mag kein Website-Besuchender lange Wartezeiten oder langsame Websites – die Webseite schneller zu machen ist also für eine gute User Experience von fundamentaler Bedeutung. Verschiedene Beispiele und Studien haben darüber hinaus gezeigt, dass kurze Ladezeiten auch die Verweildauer der Besucher:innen auf einer Webseite steigern und sogar die Conversion Rate sowie den Umsatz erhöhen. Auch auf das Ranking in der Google Suche hat der Pagespeed Auswirkungen: Das Ranking wird bei einer höheren Website Geschwindigkeit verbessert. Abgesehen davon kann man durch schnelle Websites auch Geld einsparen. Da die Website Ladezeit in den Qualitätsfaktor von Google Ads einfließt, wird der finale Klickpreis und Anzeigenrang auch beeinflusst. Somit erhalten schnellere Webseiten einen geringeren Klickpreis.  

Webseite schneller Machen, ohne technische:r Expert:in zu sein

Grundsätzlich muss bei dem Einfluss auf die Website Geschwindigkeit zwischen zwei Größen unterschieden werden: Einmal die Größe der Website, also die zu übertragende Datenmenge und darüber hinaus die Zeit, die durch Verzögerung vergeht, ohne dass Daten tatsächlich übertragen werden. Je größer also die zu übertragende Datenmenge ist und je kleiner die verfügbare Bandbreite ist, desto mehr Zeit wird für die Übertragung benötigt. Demnach sollte bei jeder Optimierung der Website Geschwindigkeit das Ziel im Vordergrund stehen, die Größe der Website zu reduzieren. Aber was kann man denn nun genau tun, um den Pagespeed zu optimieren?
Webseite schneller machen: Was kann ich tun?

Umstellung des Webservers auf HTTP/2

Das HTTP/2-Protokoll wurde als Nachfolger von HTTP 1.1 konzipiert, um die Website Perfomance und Website Geschwindigkeit zu verbessern und bringt diverse Optimierungen mit sich. Zum Beispiel ist es nicht mehr nötig, Anzahl von Anfragen zu reduzieren, denn mithilfe des Multiplexing wird die Begrenzung zehn gleichzeitiger Datei-Übertragungen im Browser pro Host aufgehoben. Somit können über eine einzige Verbindung bedenkenlos viele Dateien gleichzeitig übertragen werden. Vorteil hierbei ist auch, dass man sich die Kombination diverser Stylesheets und JavaScript-Dateien in einer Datei oder Verwendung großer CSS-Sprites, anstelle mehrerer kleinen Bilder, einfach sparen kann. Außerdem ist der Server fähig, auf eine einzige Anfrage des Browsers mehrere Antworten zum Nutzer zu senden. Das heißt, neben der Antwort auf die ursprüngliche Anfrage kann der Server weitere Ressourcen an den Client pushen, ohne, dass dieser sie selbst angefordert hat. Dementsprechend werden Dateien im Voraus geladen, die der Browser sowieso zur Darstellung benötigt, wodurch die effektive Ladezeit nennenswert verkürzt werden kann.

CDN und der Datenschutz

In Bezug auf die Website Geschwindigkeit ist die Verwendung von CDN ein sehr guter Ansatz. Jetzt kommt das große ABER. In Europa is CDN nicht zulässig! So werden CDN-Quellen in der Regel ohne das Einverständnis der Webseitenbesucher geladen und transferieren somit die IP-Adresse als personenbezogenes Datum an externe Dienstleister. An dieser Stelle wird gerne über die technische Notwendigkeit referiert, was aber auch nur in Verbindung mit einem abgeschlossenen AVV (Auftragsverarbeitungsvertrag) greifen würde. Einen AVV mit einem CDN-Dienstleister abzuschließen is allerdings quasi unmöglich. Alles gar nicht so einfach, aber: Keine Sorge. Wir werden auf dieses Thema ausführlicher in einem weiteren Blogpost eingehen. Dann klären wir auch, warum ein externer Cookiedienstleister sowie deren Einbindung überdacht werden muss. Stay tuned!

Bilder komprimieren, um die Webseite schneller zu machen

Wusstest Du, dass die größten Dateien, die bei der Darstellung einer Website heruntergeladen werden, in der Regel Bilder und Grafiken sind? Aber keine Sorge! Diese können speziell für die Verwendung im Web optimiert werden. Verschiedene Online-Tools wie TinyJPG, TinyPNG oder compressor.io können dabei helfen, die vorhandenen Bilddateien nachträglich zu komprimieren. Bei der Verwendung von Photoshop gibt es sogar die Möglichkeit, die Bilder in ihrer Größe optimal zu reduzieren: Wähle dazu den Dialog „Speichern fürs Web“ und schon sind die Bilder optimal reduziert! Auch das richtige Dateiformat auszuwählen, spielt eine wichtige Rolle bei der Verbesserung der Website Ladezeit. Bei Fotos sind JPEG-Dateien meist die kleineren, bei Grafiken wiederum PNG-Dateien. Am meisten bietet sich hier aber das moderne WebP-Format an, das von Google entwickelt wurde – es vereint viele Vorteile einzelner Formate. Aber aufgepasst! Das WebP-Format kann nicht von allen Browsern dargestellt werden. Deshalb sollte immer eine Back-up-Lösung im JPEG- oder PNG-Format bereitgestellt werden. Die Bereitstellung unterschiedlicher Skalierungen eines Bildes ist ein weiterer fundamentaler Punkt, denn Bilder werden auf den verschiedenen Endgeräten auch unterschiedlich groß dargestellt. Das heißt also, wenn die User:innen ein Bild über den Desktop öffnen, wird es mit einer Breite von 1000 Pixeln dargestellt. Sehen sie dasselbe Bild wiederum auf dem Smartphone, wird es mit nur 380 Pixeln dargestellt. Damit Du also besonders mobile Endgeräte wie Smartphones oder Tablets, die ohnehin meist eine langsamere Internetverbindung haben, entlastest, sollten die Bilder in unterschiedlichen Skalierungen bereitgestellt werden, welche der Browser je nach Bedarf automatisch lädt. Wenn ein Bild nicht gezwungenermaßen nötig ist, sollte es auch nicht geladen werden, was vor allem für solche Bilder gilt, die nicht direkt im sichtbaren Bereich liegen und erst beim Scrollen wahrnehmbar werden. Demnach sollte man das sogenannte „Lazy Loading“ einrichten. Damit kann man diese Bilder automatisch nachladen, sobald der oder die User:in scrollt und die Bilder in der Nähe des sichtbaren Bereiches kommen.  

Website Ladezeit verbessern – als Programmier-Profi kein Problem

Bei jedem einzelnen Seitenaufruf muss der Quellcode erneut ausgelesen werden. Das kostet enorm viel Zeit. Deshalb muss, um die Website zu beschleunigen, der Quellcode reduziert werden. Als Expert:innen kann man einige OnPage-Maßnahmen vornehmen, welche die Website Geschwindigkeit optimieren können. Welche das genau sind, werden wir im nächsten Abschnitt genauer behandeln.  

Aufräumen des Quellcodes

Wusstest Du, dass alle Leerzeichen oder Zeilenumbrüche im HTML-Dokument mit ausgelesen werden? Beim Abruf einer Webseite folgt der Browser nämlich einem Quellcode des HTML-Dokuments und das Häufen überflüssiger Leerzeichen oder auch Kommentare, kann sich deutlich auf die Ladezeit der Webseite auswirken. Um die Homepage schneller zu machen, sollte deshalb der Quellcode regelmäßig aufgeräumt werden.
Webseite schneller machen: Quellcode aufräumen

Auslagerung von JavaScript und CSS

Durch die Skriptsprache JavaScript können verschiedene Funktionen im Browser und somit auf dem Rechner des Clients ausgeführt werden. Formate und Darstellungen der Webseite lassen sich wiederum mit Cascading Style Sheets – CSS – definieren. Für beide Elemente wird allerdings viel Quellcode benötigt. Und wie wir bereits gelernt haben, benötigt es viel Zeit, um mit jedem neuen Seitenaufruf den Quellcode erneut auszulesen. Zur Verbesserung der Website Geschwindigkeit muss der Quellcode deshalb reduziert werden, was durch das Auslagern von CSS- und JavaScript-Dateien erfolgen kann. So werden die Dokumente zusammengeführt und es ist nur noch ein einziger Abruf nötig. Das heißt, wenn der Browser die Datei in den Zwischenspeicher bzw. Cache läuft, kann nochmals die Website Ladezeit verbessert werden.   Aber wie kann ich Javascript auslagern? Lass Dir einfach den Quellcode Deiner Website mit einem Editor anzeigen und schneide alle JS-Dateien aus. Erstelle eine neue Textdatei und füge hier alle Schnipsel des Codes ein. Die Datei sollte dann als main.js gespeichert und auf Deinem Server in dem Ordner, in welchem alle anderen HTML-Dateien zu finden sind, hinterlegt werden. Im HTML-Code der Webseite muss dann folgender Tag entfernt werden:
Code entfernen um Website Geschwindigkeit zu optimieren

und

Code um die Webseite schneller zu machen

und durch diesen ersetzt werden:

Code um die Webseite zu beschleunigen
Durch diesen einfachen Schritt kannst Du in kurzer Zeit Deine Webseite schneller machen.  

CSS und JavaScript-Dateien minimieren

Du kannst Deine Webseite außerdem dadurch beschleunigen, wenn Du, wie auch beim HTML-Code, die Größe von CSS und JS verringerst, indem Du beispielsweise auf überflüssige Leerzeichen verzichtet. Besonders beim CSS-Code kann man auf Zeilenumbrüche verzichten. Dies verbessert die Webseiten Ladezeit, allerdings nimmt gleichermaßen die Lesbarkeit durch das Entfernen von Leerzeichen, Zeilenumbrüchen und Kommentaren massiv ab. Empfehlenswert ist es deshalb, mit zwei Versionen zu arbeiten: Eine mit allen Leerzeichen, Umbrüchen und Kommentaren, die bearbeitet werden kann und eine weitere, die nur der Darstellung der Webseite dient. Um hier bei Änderungen keinen Mehraufwand zu haben, können Programme zur Minimierung genutzt werden, diese sind zum Beispiel:  

JavaScript asynchron oder defer laden

Der sichtbare Ladevorgang im Browser kann durch das Aufschieben nicht direkt benötigter Skripte enorm beschleunigt werden. Wenn Googles „PageSpeed Insights“ Tool den Hinweis gibt „Ressourcen beseitigen, die das Rendering blockieren“, sollten Skripte und Styles nachgeladen werden. Bei Javascript erfolgt dies mithilfe von „async“ oder „defer“ Attributen. Zwar scheinen beide HTML-Attribute im ersten Moment denselben Effekt zu bewirken, also die Ladezeit der Website zu verbessern, da das Skript nicht mehr die Abarbeitung des weiteren HTML-Codes blockiert, allerdings besteht der Unterschiede der beiden in der Skriptausführung. Beim „async“ Attribut werden die Skripte sofort nach dem Beenden des HTML-Ladevorgangs ausgeführt und halten sich nicht an die Reihenfolge der Einbindung. Beim „defer“ Attribut wiederum werden diese in der vorhergesehenen Reihenfolge abgearbeitet, aber auch erst nach dem vollständigen Laden des DOM (Document Object Model) ausgeführt.  

Server- und Clientseitigen Cache nutzen

Durch einen Cache können verschiedene Ressourcen auf dem Server und dem Endgerät des Users oder der Userin zwischengespeichert werden. Der Unterschied der beiden Cache-Varianten liegt darin, dass der serverseitige Cache fertige HTML-Dokumente zwischenspeichert und bei einer Anfrage einfach ausspielen kann – ansonsten müsste der Server erst die jeweiligen Skripte durchlaufen und Inhalte mit Datenbankabfragen zusammenstellen. Dies würde die Website Geschwindigkeit verlangsamen.   Der Browser-Cache hingegen kann die Ressourcen lokal auf dem Endgerät der Nutzerin oder des Nutzers speichern. Somit müssen CSS, JS, Bilder oder Fonts nicht immer neu heruntergeladen werden. Einen serverseitigen Cache kann man durch Plugins für das eigene CMS oder Erweiterungen für den Server realisieren. Der Browser-Cache kann auf einem Apache-Websever über die htaccess aktiviert und konfiguriert werden  

Website Geschwindigkeit optimieren lassen

Klingt das Ganze für Dich zu kompliziert? Oder hast Du noch Rückfragen?

Wir stehen Dir gerne zur Seite und helfen Dir dabei, die Performance und Geschwindigkeit Deiner Webseite zu optimieren.

Mehr dazu erfährst Du auch auf unserer Leistungsseite!

Previous

Next