Eine schnelle Website ist entscheidend, um sowohl die Benutzerfreundlichkeit als auch die Suchmaschinenoptimierung (SEO) zu verbessern. Eine langsame Website kann dazu führen, dass die Benutzer abspringen und zu einer schlechteren Positionierung in den Suchergebnissen führen. In diesem Artikel beschreiben wir Dir, wie Du selber Deine Ladegeschwindigkeit der Webseite optimieren kannst.

1-Klick Optimierungen

Hier beschreiben wir Dir, welche Plugins und Einstellungen Du einfach aktivieren kannst und dabei direkt schnellere Ladezeiten bemerkst. Darunter fallen Optimierungen wie Caching, CSS / HTML / JS verkleinern, Bilder optimieren und Lazy Loading. Diese Einstellungen kannst Du sehr schnell vornehmen und sie bieten Dir bereits eine spürbare Optimierung. Damit Du auch sehen kannst, wie viel besser Deine Webseite wurde, empfehle ich Dir vorher und nachher einen Google Page Speed Test durchzuführen. Zudem wird es empfohlen, Deine Webseite gründlich zu testen, wenn Du Deine Webseite optimierst.

Optimierung

1. Die Optimierung der Ladezeit ist ein entscheidender Faktor für den Erfolg einer WordPress-Website. Eine der besten Möglichkeiten, um die Ladezeit Deiner Website zu verbessern, ist die Verwendung von Caching-Plugins wie LiteSpeed Cache oder W3 Total Cache. Diese Plugins speichern eine statische Version Deiner Website, die bei jeder Anfrage abgerufen wird, um die Ladezeit zu verkürzen.
2. Ein weiterer wichtiger Faktor für die Ladezeitoptimierung ist die Optimierung von CSS, HTML und JS. Hier kommt das Plugin Autoptimize ins Spiel. Autoptimize kann den Code Deiner Website automatisch verkleinern und zusammenfassen, um die Ladezeit zu verkürzen. Es kann auch die Anzahl der HTTP-Anfragen reduzieren, indem es die Dateien in einem einzigen CSS- oder JS-File zusammenfasst.
3. Neben dem Verkleinern von Code-Dateien kann auch die Optimierung von Bildern zur Reduzierung der Ladezeit beitragen. LiteSpeed Cache bietet eine integrierte Bildoptimierungsfunktion, die automatisch die Grösse und Qualität von Bildern optimiert. Dadurch kannst Du die Dateigrösse Deiner Bilder reduzieren, ohne die visuelle Qualität zu beeinträchtigen.
4. Schliesslich ist es auch wichtig, Lazy Loading zu implementieren, um die Ladezeit zu verkürzen. Das LiteSpeed Cache Plugin bietet eine Funktion für Lazy Loading, die es ermöglicht, Bilder und andere Medien erst dann zu laden, wenn sie benötigt werden. Dies verhindert das Laden unnötiger Ressourcen und verkürzt die Ladezeit Deiner Website erheblich. Achte hier darauf, dass alle Bilder, die direkt beim Laden der Webseite sichtbar sind, nicht von Lazy Loading betroffen sind. Das würde die Ladezeit der Webseite verlängern.

Für die Konfiguration haben wir Dir ein paar Konfigurationen für Cache, CSS / HTML / JS, Bilder-Optimierung und Lazy Loading.

Weitere Optimierungen

Mit den bereits genannten Optimierungen hast Du jetzt eine Webseite, die schnell laden kann. Je nach Grösse und Theme, das Du verwendest sogar schon sehr schnell! Es ist aber noch lange nicht vorbei. Denn es gibt noch sehr viele weitere Möglichkeiten, um die Geschwindigkeit Deiner Webseite zu optimieren. Hier möchte ich noch zwei Optimierungen vorstellen, die sehr hilfreich sein können und oftmals bei bereits optimierten Webseiten vorkommen.

Unnötiges CSS blockiert das Laden («Above the fold»)

Diese Meldung sieht man fast bei jeder Webseite. Hier ist das Problem, dass die Webseite den kompletten CSS Code direkt laden will, wenn sie gestartet wird, was zu starken Verzögerungen führen kann. Daher ist es empfehlenswert, dass nur das Minimum an CSS geladen wird, welches für den ersten sichtbaren Teil der Webseite zur Darstellung dient. Nun hat man bis zu Millionen Zeilen von CSS Code bei WordPress Webseiten und ich wünsche da jedem viel Spass der diesen Code manuell optimieren will. Für alle, die lieber die angenehme Variante suchen, haben wir den Critical CSS Generator. Damit können wir den «Above the fold» CSS Code einer URL generieren lassen. Gib dort also die URL Deiner Webseite ein und kopiere den Code. Diesen Code kannst Du jetzt entweder bei einem Page Builder im Custom Code hinzufügen, oder mit dem Plugin Simple Custom CSS. Zudem musst Du bei Autoptimize unter den CSS Optimierungen die Einstellung «Eliminate render-blocking CSS?» aktivieren. Dort poppt ein Textfeld auf. Dieses lassen wir einfach leer.

Damit ist das bereits erledigt und die Seite optimiert. Achtung, hier passieren sehr viele Änderungen und es ist empfehlenswert, die Webseite gründlich zu testen.

Content Delivery Network (CDN)

Ein CDN ermöglicht es viele Kopien Deiner Webseite im Internet zu haben. Darunter versteht man, dass mehrere Server Deine Webseite verfügbar haben. Wenn nun jemand aus Deutschland eine Webseite öffnet, dann kann die Webseite von einem Server in Deutschland geladen werden. Wenn z.B. jemand aus den USA die Webseite öffnet, dann kann er diese über einen US-Server laden. Damit vermeidet man, dass man über grosse Distanzen lange Übertragungsdauern hat und ermöglicht somit schnellere Ladezeiten.

Viele Plugins, unter anderem auch LiteSpeed Cache oder Cloudflare, bieten CDN an. Wie man jedoch CDN einrichtet, würde den Rahmen dieses Blogs sprengen. Für LiteSpeed Cache gibt es hier eine Einrichtungsanleitung.

Hilfe benötigt?

Wir bieten eine kostenlose 45-minütige Session, wo wir Dir mit Deinen Herausforderungen helfen. Wenn Du Interesse an diesem kostenlosen Support hast, kannst Du Dir hier gerne einen Termin buchen: Termin buchen