23 Tipps um WordPress Webseiten schneller zu machen

Die Geschwindigkeit einer Webseite zu optimieren ist eine der einfachsten und effektivsten Wege, die Surferfahrung eines Webseitenbesuchers zu verbessern. Ganz nebenbei verbessern sich dadurch die Absprungraten, Pageviews und Besuchszeiten. Google dankt es einem durch bessere Rankings oder zumindest dadurch, dass du keine Ranking-Nachteile hast. Folgende Möglichkeiten sollten genutzt werden um mehr Pagespeed aus seiner Webseite herauszuholen.

Caching einbauen

Die beste Art eine Webseite schneller zu machen, liegt im Caching. Mit einem sauberen Caching müssen Webseiten nicht dynamisch aus Datenbanken geladen werden, sondern werden statisch auf der Server Festplatte abgelegt und abgerufen. Der Geschwindigkeitsvorteil ist teilweise enorm. Gerade Content Management Systeme wie WordPress profitieren deutlich davon.

Ein sehr gutes Plugin hierfür ist WP Rocket, welches nicht nur die Webseite statisch ablegt, sondern auch in der Lage ist CSS und Javascript Dateien zusammenzufassen und zu minimieren. Ausserdem kann WP Rocket auch Lazyload: Mit Lazyload werden Bilder erst beim Scrollen des Users zum Bild hin geladen. D.h. die Ladezeiten verringern sich massiv. Vor allem der First View, der wichtig dafür ist, ob der User überhaupt auf der Webseite verbleibt. Man sagt, dass nach 3 Sekunden Ladezeit der User verschwindet. Das halte ich immer etwas für übertrieben, aber je kürzer die Ladezeit, desto besser.

Caching Plugin für WordPress

Ein schneller Server

Webhoster hosten bei billigen Verträgen nicht selten viele Webseiten auf einem einzigen Server und garantieren keine Bandbreiten. Dadurch werden Webauftritte langsamer. Achte also darauf, dass du nicht den billigsten Vertrag abschließt und verlasse dich auf Erfahrungswerte anderer Webmaster. Schaue dir spezialisierte WordPress Hoster an, die vor allem bei großen Websites Bandbreiten garantieren. Load Balancing ist hier ein wichtiges Thema, das du beachten musst. Auch die Ressourcen des Servers sind wichtig: RAM, CPU, Caching System.

Hier ein Beispiel für einen guten Webhoster mit dem ich selbst arbeite. Hier findest du eine Übersicht über sehr empfehlenswerte WordPress Hoster.

Ein schnelles Theme verwenden

Ein performantes Theme ist die Basis für eine schnelle WordPress Website. Um den Core Web Vitals zu entsprechen ist die Auswahl des richtigen Themes essentiell, weil hier schon in der Website-Basis zu viele Ressourcen (CSS Dateien, JS Dateien, Bilder, externe Verbindungen) geladen werden können. Je besser hier gearbeitet wurde, desto schlanker die Website. Hier habe ich dir 6 sehr schnelle WordPress Themes vorgestellt.

GZip Kompression nutzen

Per GZip können Datentransfers zwischen dem Server und dem Browser komprimiert werden. Dadurch reduzieren sich Ladezeiten erheblich. Aktivieren kann man GZip am Server, per PHP, .htaccess und per Plugin (z.B. in WordPress). Am Einfachsten ist es über den Server zu aktivieren.

Alternative:

Brotli: Eine modernere Komprimierungsmethode, die bessere Kompressionsraten bei kürzeren Ladezeiten bietet. Viele Hosting-Anbieter (z. B. Cloudflare, LiteSpeed) unterstützen Brotli inzwischen standardmäßig.

Weitere Infos zu GZip oder Brotli

Einen CDN nutzen

Mit einem Content Delivery Network  (CDN) können bestimmte Daten auf einen externen, hochperformanten Server ausgelagert werden. Oftmals werden dadurch diese Daten schneller geladen. Zudem verringert sich die Last für den eigenen Webserver, der weniger Daten ausliefern muss. Gerade bei Newsletterversendungen kann dies erhebliche Lastersparnis bedeuten. Bei Nutzung eines schnellen Webservers ist ein Performancegewinn allerdings nicht zwangsweise zu erwarten. Viele CDNs bieten zudem zusätzliche Schutzmaßnahmen, wie DDoS-Schutz und Web Application Firewalls (WAF).

Beispiele für CDN Anbieter:

• Jetpack
• Cloudflare
• CloudFront
• KeyCDN

Bei einem schnellen Webserver mit überschaubarem Zielpublikum und wenig Last sind die Performancegewinne durch ein CDN möglicherweise geringer. Trotzdem können Sicherheits- und Skalierungsvorteile ein CDN sinnvoll machen. CDN-Plugins wie WP Rocket, W3 Total Cache, oder LiteSpeed Cache bieten einfache Möglichkeiten, ein CDN zu integrieren.

Browser Caching Nutzen

Hast du wiederkehrende Besucher auf deiner Webseite, kannst du Browser Caching aktivieren um z.B. Bilder für eine bestimmte Zeit zwischenzuspeichern. Dadurch sinkt die Last für den Webserver und die Bilder werden lokal vom Rechner des Besuchers geladen. In manchen Caching Plugins ist diese Funktion schon enthalten und aktivierbar. Alternativ kannst du diese Einträge zum Beispiel in der .htaccess Datei vornehmen.

Infos zum Einrichten von Browser Caching

Beispiele:

Apache:

    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/html "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresDefault "access plus 1 week"

Nginx:

location ~* \.(jpg|jpeg|gif|png|css|js|ico|woff|woff2|ttf|svg)$ {
    expires 1y;
    add_header Cache-Control "public";
}

Laden von externen Seiten vermeiden

Mal abgesehen von der Nutzung eines CDN, sollte man vermeiden, allzuhäufig Elemente (wie Bilder) von externen Seiten zu laden. Viele Quellen bergen eine höhere Gefahr für längere Ladezeiten. Ist der verlinkte Inhalt auf einem langsamen Server gehostet, kann dies die Ladezeit einer Webseite deutlich verschlechtern. Zudem sind externe Ressourcen potentielle Sicherheitsrisiken: Du weißt nie, was genau du da so lädst, weil du selbst nicht die Kontrolle darüber hast (zB Schadcode).

Werbung vermeiden

Ad-Server, die automatisch Werbung einblenden, können eine Seite quälend langsam machen. Mal abgesehen davon, dass der User über zu viele bewegte Elemente mit Werbung und riesen Hockeystickbanner nicht gerade begeistert sind. Auch wenn heutzutage Werbe-Anbieter deutliche Performanceoptimierungen durchgeführt haben, wird deine Website in der Regel etwas träger, wenn du Werbung einsetzt.

Redirects vermeiden

Webseiten, die erst durch Redirects erreichbar sind, haben immer mit einer gewissen Latenzzeit zu kämpfen. Vermeide es also, deine Webseite über mehrere Hürden, wie 301 Redirects zu schicken. Redirects sind Weiterleitungen von einer URL zur nächsten. Das kann Sinn machen oder aber versehentlich zu längeren Weiterleitungs-Ketten führen, die am Ende die Ladezeit nennenswert verlangsamen.

Query Strings in URLs vermeiden

URLs, die mit „?“ ergänzt werden und z.B. dynamisch generiert sind, können schlecht gecacht werden, da sie sich wie die Tastenkombination „Strg+F5“ verhalten (erzwungenes neues Laden). Versuche also klare, statische, suchmaschinenfreundliche URLs zu verwenden, die nicht dynamisch generiert werden. Manchmal sind Parameter in URLs aber auch gewollt und nicht vermeidbar.

Codes minifizieren

CSS und Javascript Dateien können einfach verkleinert werden. Hierzu nutzt man diverse Tools, die im Netz zu finden sind. Je kleiner die Files sind, desto schneller werden sie geladen.

Code Minifizierer

Fehlerhafte Requests vermeiden

Versucht man auf der Webseite Inhalte wie Bilder oder Scripts zu laden, die aber nicht gefunden werden können, verlängert sich die Ladezeit manchmal bis zum Timeout. Eine fehlerhafte Seite ist somit absolut elementar. Automatisiere die Prüfung auf defekte Links, insbesondere bei großen Webseiten. Nutze Caching, um Wiederholungsanfragen zu reduzieren, auch wenn ein Fehler auftritt. Vermeide dynamische Inhalte, die stark von externen Quellen abhängen, um Ausfälle zu minimieren.

Bilder-Dimensionen angeben

Es ist allgemein bekannt, dass die Angabe von Breite und Höhe eines Bildes, die Ladezeit verringert. So muss der Browser die Größe nicht selbst nach dem Laden der Bilder berechnen und kann so Inhalte schneller korrekt darstellen. Ein wichtiger Grund die Bilder-Dimensionen anzugeben:

Der CLS (Cumulative Layout Shift) ist eine wichtige Kennzahl für Googles Core Web Vitals, die angibt, wie stark sich das Layout einer Seite während des Ladevorgangs verschiebt. Wenn die Bildgrößen nicht vorab angegeben sind, kann das Bild nachträglich das Layout verschieben, was die Nutzererfahrung beeinträchtigt. Die Core Web Vitals spielen in die Rankings der Suchmaschine mit ein. Schlechte Werte verringern gute Rankingchancen gegenüber der besseren Konkurrenz.

Beispiel für Angabe:

<img src="image.jpg" alt="Beispielbild" width="600" height="400" />

Bildergrößen verringern

Eigentlich eine Selbstverständlichkeit: Zu große Bilder oder Bilder, die zwar groß geladen, aber dann per Bildgrößenangabe nur klein dargestellt werden, können einen Flaschenhals darstellen (und auch die Core Web Vitals negativ beeinflussen). Somit sollte man Bilder wirklich nur in der Größe laden, die auch absolut notwendig ist. Bilder sollten zudem über z.B. Photoshop oder TinyPNG in die kleinste mögliche Webversion komprimiert werden.

Für WordPress gibt es auch Plugins, die unnötige Informationen aus Bildern entfernen und die Bilder automatisch kleiner dimensionieren beim Upload.

Bilder erst später laden

Mit Lazy Load kann das Laden von Bildern verzögern, bis sie im Viewport erscheinen. Also erst beim Scrollen zum jeweiligen Bild wird dieses geladen. Dieses Feature wird per Plugin eingebaut (Eigenständig, Caching-Plugin oder teilweise auch von Browsern schon nativ).

Javascripts am Ende laden

Gerade Javascript-Dateien oder -Bibliotheken sind manchmal Schwergewichte und sollten, wenn möglich erst zum Schluss geladen werden. Zumindest sollten sie asynchron oder parallel (per async oder defer) geladen werden, so dass andere Inhalte bereits dargestellt werden, solange sie noch nicht zur Verfügung stehen. Diese Option kann in den meisten Caching Plugins aktiviert werden. Bei Eigenentwicklungen kannst du die Angabe per Code vornehmen.

Weitere Infos zu async und defer

Dateien kombinieren und Code abspecken

Je weniger Code geladen werden muss, desto schneller ist die Webseite. Entferne allzu viele Kommentare und auskommentierte Programmzeilen im Code und vermeide das Laden von Elementen, die evtl. durch CSS ausgeblendet wurden. Inline CSS sollte komplett vermieden werden. Alles, was problemlos per CSS gelöst werden kann, sollte auch mit CSS gelöst werden.

Ebenso ist es von Vorteil eingebundene Scriptfiles zu vereinen. Man muss nicht für jede Funktion eine eigene Javascript Datei nutzen, die extra geladen werden muss. Die Kombinierung aller Scripts (auch CSS) in ein einziges File ist von Vorteil. Das Kombinieren und Abspecken von CSS oder JS Files kann ebenso häufig schon per Caching Plugin erledigt werden.

WebP verwenden

Im Juli 2021 hat WordPress die Kompatibilität zu WebP Grafiken eingeführt. D.h. Bilder in diesem sehr kleinen und komprimierten Format werden akzeptiert und können über ein separates Plugin oder über manuellen Upload in der Mediathek verwendet werden. Der Vorteil ist, dass die Site dann schneller lädt. Bilder sind häufig eine Ursache für zu langsame Websites. WebP ist eine gute Maßnahme um dem entgegen zu wirken. Es wird sogar darüber nachgedacht WebP als Standard in künftige WordPress Versionen einzufügen. So würde beim Upload eines JPEGs automatisch ein WebP generiert und ausgeliefert.

Mit dem Plugin Ewww Image Optimizer kannst du WebP Bilder in WordPress nutzen.

Plugins in Content Management Systemen vermeiden

CMS’s wie WordPress werden häufig mit Plugins vollgestopft um jede Menge Features einzubauen. Oft aber auch für Features, die man problemlos direkt mit eigenen Funktionen im Template lösen könnte. Je weniger Plugins, desto sicherer und performanter ein System. Installiere immer nur die Plugins, die du auch wirklich benötigst. Lasse unnütze Plugins mit Funktionen, die du ohnehin nicht einsetzen willst, erst einmal deaktiviert.

Nutzung eines Reverse Proxy

Mithilfe eines Reverse Proxy Servers (z. B. Nginx) in Kombination mit einem Apache-Webserver können statische Inhalte, wie Bilder, CSS- und JavaScript-Dateien, direkt vom Reverse Proxy ausgeliefert werden, da dieser Anfragen für diese Ressourcen selbst bearbeitet. Dynamische Inhalte oder komplexe Serveranfragen werden weiterhin vom Apache-Webserver verarbeitet. Diese Konfiguration entlastet den Apache-Server, da weniger Anfragen an ihn weitergeleitet werden, und kann die Performance der Webseite durch schnellere Antwortzeiten und effizientere Ressourcennutzung verbessern.

Weitere Infos zu Reverse Proxy Server

Serverantwortzeit optimieren

Reduziere die Serverantwortzeit (TTFB – Time to First Byte) durch einen schnellen Webhoster (vergleiche deine Website bei einem anderen Hoster, manche bieten kostenfreie Test-Umzüge an), den Einsatz von Caching und das Minimieren von serverseitigen Prozessen. Eine optimierte Datenbank (verwende neue MySQL oder MariaDB Server) und die Reduzierung von dynamischen Anfragen helfen ebenfalls, die Antwortzeiten zu verkürzen.

Font-Preloading nutzen

Nutze Font-Preloading, um sicherzustellen, dass benötigte Schriftarten sofort beim Laden der Seite geladen werden. Das vermeidet Verzögerungen durch das Warten auf die Schriftarten und verbessert die Performance sowie die Nutzererfahrung. Hoste deine Schriftarten (zB Google Fonts über OMGF) lokal auf dem Server und lade die Schriften nicht extern vom Anbieter.

Ressourcen priorisieren (Critical CSS)

Verwende Critical CSS, um die für das Rendering der Seite erforderlichen CSS-Regeln direkt in den HTML-Code zu integrieren. Auf diese Weise wird das Rendering der Seite schneller, da weniger CSS-Dateien geladen werden müssen, bevor die Seite angezeigt wird. Diese Option wird in Caching Plugins teilweise angeboten (zB bei WP Rocket).