WordPress Seite langsam? 3 Methoden für mehr PageSpeed

In diesem Blogpost setzen wir voraus, dass du weißt, wo deine PageSpeed Problemzonen liegen und du ganz konkret erfahren möchtest, wie du die Performance deiner Seite verbessern kannst.

Um zu verstehen, was im WordPress Universum die gängigsten Faktoren für PageSpeed Probleme sind, haben wir den Blogbeitrag “WordPress Seite langsam? Die Top-10 Faktoren für langsame WordPress Websites„ für dich zum Nachlesen.

Doch nun zu Methoden und Tipps, wie du den Website Speed optimieren kannst:

Du willst das meiste aus deiner bestehenden Website herausholen, ohne das grundlegende Set-Up wie z.B. das verwendete Theme zu ändern?

Dann lies dir diese Methode aufmerksam durch, denn mit folgenden Optimierungen kannst du die Ladezeiten deiner Website maßgeblich beschleunigen.

Aber Vorsicht: Gerade, wenn du eine ungesunde, technologische Basis hast, wie z.B. ein aufgeblähtes Multi-Purpose Theme und zusätzlich einen Page-Builder, wird es im Normalfall schwer herausragende Ladezeiten von unter 2 Sekunden zu erzielen.

Das gibt dieses WordPress Set-Up technologisch einfach nicht her. Hier erfährst du ein natürliches Limit. Das sollte dir bewusst sein, wenn du dich für Multi-Purpose Themes, Page-Builder & Co entscheidest.

Willst du in puncto Page Load ganz vorne in der Königsklasse mitspielen, dann muß die technologische Basis einfach die notwendigen Voraussetzungen mitbringen.

Was kannst du konkret tun, wenn du dein aktuelles, technisches WordPress Set-Up beibehalten möchtest?

1. On-Page

1.1. Reduziere die Dateigröße der Bilder

Überprüfe die Dateigrößen deiner Bilder und reduziere diese, wenn nötig. Es gibt keinen Grund, dass die Bilder auf deiner Website mehr als 250 kb an Dateigröße haben.

Die Komprimierung deiner Bilder kannst du dir auch von eigens dafür bestimmten WordPress Plugins abnehmen lassen.

In puncto Dateiformat: JPG eignet sich als Dateiformat für fotografische Inhalte besser als PNG, da es das Bild komprimiert und Daten weglässt.

Für einige Bildelemente wie z.B. dem Logo, sind ohnedies SVG-Dateien vorteilhafter. Das sind Vektordateien, die für jede Bildschirmauflösung scharf erscheinen und darüber hinaus eine geringe Dateigröße haben.

WordPress kann das SVG-Dateiformat aktuell leider noch nicht verarbeiten. Auch dafür gibt es wiederum Plugins.

WordPress Plugin-Empfehlung:

:: EWWW Image Optimizer

:: Imagify

:: Safe SVG

1.2. Videos via iFrame einbinden

Wenn du Videos auf deiner Website verwendest, dann lade diese Videos auf YouTube, Vimeo und Co hoch und binde sie von dort mithilfe von iFrames ein.

Den jeweiligen iFrame Einbettungscode erhältst du direkt in den Video-Teilen Informationen des jeweiligen Videoportals.

Gut für deine Ladezeiten ist auch das Nachladen von Videos. Somit wird erst eine Verbindung zum YouTube Server aufgebaut, wenn der Nutzer auf das Video klickt.

Das Nachladen von Videos ist darüber hinaus auch von der DSGVO so vorgesehen.

WordPress Plugin-Empfehlung:

:: Borlabs Cookie (Nachlade-Funktion von Videos)

:: WP YouTube Lyte

1.3. Plugins aufräumen

Reduziere deine Plugins auf das absolute Minimum. Lösche alle Plugins, die du nicht brauchst und die sich im Laufe der Zeit auf deiner Website angesammelt haben.

Es ist wichtig, dass du die Plugins löschst und nicht nur deaktivierst. Auch nicht aktive Plugins werden bei jedem Page-Load initialisiert und ausgeführt und kosten Ladezeiten.

1.4. Seiten-Caching aktivieren

Wann ist ein Seiten-Caching grundsätzlich sinnvoll?

• Wenn die Ladezeiten deiner Website langsam sind
• Wenn dein Webhosting-Provider kein serverseitiges Caching durchführt
• Wenn du viele dynamische Elemente auf deiner Website verwendest

Dynamische Elemente sind zum Beispiel Slider, Warenkörbe und interaktive Karten wie Google Maps.

Zumindest eine Art von Caching, entweder am Server oder auf der Seite selbst, ist empfehlenswert.

Wenn ein gutes Server-Caching durch den Webhost erfolgt, ist ein zusätzliches Seiten-Caching nicht mehr notwendig, manchmal sogar kontraproduktiv. Informiere dich diesbezüglich bei dem Hosting-Provider deiner Wahl.

WordPress Plugin-Empfehlung:

:: WP Rocket

:: Autoptimize

:: W3 Total Cache

1.5. Lazy Loading aktivieren

Mit der WordPress Version 5.5 wurde das Feature Lazy Loading für alle Bilder standardmäßig in den Core von WordPress integriert. Wichtig ist in diesem Zusammenhang, dass den Bildern Breiten- und Höhenattribute (width & height) zugewiesen sind.

Diese Funktion ermöglicht es, dass Bilder und Videos erst dann geladen werden, wenn sie in den sichtbaren Bereich der Website gelangen.

Lazy Loading wird mithilfe der Javascript Funktion realisiert. Nicht alle Browser und Browserversionen unterstützen diese Ladefunktion.

Mit der Integration von Plugins, kannst du die Browserunterstützung erweitern und diese Funktion noch feingranularer konfigurieren, wie z.B. die Ausweitung auf andere interaktive Elemente wie z.B. mit iFrames eingebundene Videos.

Dieses verzögerte Laden bzw. Nachladen von Multimedia-Dateien kann, gerade wenn du viele Bildern und Videos auf deiner Websites verwendest, einiges an Ladezeiten Verbesserung mit sich bringen.

Achte darauf, dass du das Lazy Loading SEO-optimiert auf deiner Website integrierst, denn es kann Google davon abhalten, Bilder ordnungsgemäß zu indexieren.

WordPress Plugin-Empfehlung:

:: Lazy Load by WP Rocket

1.6. CSS, JavaScript und HTML Code komprimieren & nachladen

Je mehr CSS, JavaScript und HTML-Code sich im Quellcode deiner Seite befindet, desto mehr Server-Requests werden im Regelfall ausgeführt. Jeder einzelne Request kostet Zeit.

Bei WordPress befindet sich dieser Code meistens im Header des jeweiligen WordPress Themes. Das ist der Bereich, der zuerst vom Browser verarbeitet wird.

Das ist ein Mitgrund, warum deine WordPress Website mitunter so extrem lang zum Laden benötigt.

Es gibt mehrere Möglichkeiten, um das Laden dieses Codes zu optimieren:

:: CSS, JavaScript und HTML-Code minimieren bzw. komprimieren

Versuche möglichst viel CSS, JavaScript und HTML-Code zusammenzufassen. Das reduziert sowohl die Anzahl an Server-Requests als auch deren Größe.

Wenn du gute WordPress Programmierkenntnisse besitzt, kannst du das manuell direkt im Code ändern. Es gibt aber auch Tools, siehe weiter unten, die dir dabei helfen.

Aber Vorsicht, das geht nicht immer ganz reibungslos vonstatten. Vorher also testen.

:: CSS, JavaScript und HTML-Code verschieben

Bei WordPress befindet sich dieser Code meistens im Header des jeweiligen WordPress Themes. Das ist der Bereich, der zuerst vom Browser gelesen und verarbeitet wird.

Durch einfaches Verschieben der CSS- und JavaScript-Aufrufe in den Footer wird die Website schneller dargestellt. Die CSS-Dateien und Scripte werden später nachgeladen.

Der Code für den sogenannten “Above the Fold” Bereich, das ist der Bereich den Website-Besucher als erstes und ohne scrollen zu müssen sehen, sollte weiterhin im Header bleiben. Das stellt sicher, dass der sichtbare Bereich einer Website zuerst lädt.

:: Asynchrones Laden bzw. JavaScript deferring einrichten

Etwas komplexer sind diese beiden Lösungen.

• Async
• Defer

Beim asynchronen Laden async lädt der Browser den Code simultan zum Aufbau der Seite und nicht nacheinander, wie sonst üblich. Das Script, das zuerst geladen wird, kann auch zuerst ausgeführt werden.

Render-Blocking von Javascript verhindert, dass sichtbare Inhalte (“Above the Fold”) auf deiner Seite erst gerendert werden, wenn das Javascript vollständig geladen ist.

Bei JavaScript deferring defer verschiebt der Browser das Laden und Ausführen des Scripts, bis alle anderen Komponenten geladen und die Seite geparst ist. Scripts mit defer müssen warten, bis das Dokument geladen und geparst ist.

Bei beiden Methoden ist oftmals schwer vorherzusagen, wie gut sie funktionieren. Doch beide Varianten können die Ladezeiten ordentlich beschleunigen.

Du kannst beide Methoden entweder mit geeigneten Plugins umsetzen oder direkt in der functions.php deines Child Themes hinzufügen. Anleitungen dazu findest du im Internet.

Aber Vorsicht: Das sind mitunter heikle Eingriffe. Teste alle diese Optimierungen immer erst vorher auf einer separaten Testinstallation.

Tools Empfehlungen:

:: CSS Minifier

:: JavaScript Minifier

:: HTML Compressor

WordPress Plugin-Empfehlung:

:: Autoptimize

:: WP Rocket

:: Async JavaScript

2. Webhosting & Webserver

2.1. Zu schnelleren und besseren Webhoster wechseln (Site Migration)

Lieber ein paar Euro mehr für ein gutes WordPress Hosting ausgeben, als sich mit langen Ladezeiten aufgrund schlechter Hosting Performance herumschlagen.

Eckpunkte für gutes WordPress Webhosting:

:: SSD Speicherplatz (ZFS)
:: Moderne Server (z.B. Nginx…)
:: PHP Memory-Limit von mind. 64MB, besser 128MB (u.ev. PHP FPM Accelerator)
:: Aktuelle PHP-Version
:: HTTP/2 Unterstützung
:: GZIP-Komprimierung
:: Kostenloses SSL-Zertifikat
:: Rechenzentrum Österreich (bzw. EU)
:: Schneller und kompetenter Support

Auf der offiziellen WordPress Website findest du dein Handbuch, das die Anforderungen für WordPress Hosting definiert.

Neben der Auswahl des Hosting-Providers, spielt auch die Auswahl eines geeigneten Paketes eine Rolle.

Die allermeisten Webhosting-Pakete sind sogenannte Shared Hostings. Dort teilst du dir CPU, Speicherplatz und Bandbreite mit anderen Hosting-Kunden.

Gute Hosting-Provider garantieren eine vergleichsweise niedrige Auslastung ihrer Shared Hostings. Oftmals beträgt dessen durchschnittliche Auslastung nicht mehr als 30%.

Wesentlich mehr Power erzielst du mit deinem eigenen virtuellen Server (VPS) oder einem Cluster aus VPS. Allerdings kostet ein VPS-Hosting auch ein Vielfaches. Das kann für eine Website schon mal 200,00 oder 300,00 Euro im Monat und mehr ausmachen.

Bei dieser Art des Hostings können auch gut und gerne mehrere Tausend User (concurrent user) deine Website oder deinen WooCommerce-Shop gleichzeitig besuchen, ohne, dass die Server deswegen gleich einknicken.

Webhosting-Empfehlung:

Unser Partner des Vertrauens, mit dem wir zusammenarbeiten und ausschließlich beste Erfahrungen gemacht haben.

:: peaknetworks (WordPress Hosting & Web-Hosting)

2.2. Gzip-Komprimierung aktivieren

Um den Code deiner Webseite insgesamt zu komprimieren, raten wir dir zu einer GZIP-Komprimierung auf deinem Webserver.

GZIP komprimiert sämtliche Dateien, die zwischen Server und Browser des Nutzers ausgetauscht werden. Von PHP- und HTML- über CSS- und JavaScript-Dateien bis hin zu Bildern, verringert die Gzip Komprimierung die Dateigröße deiner Website um 40 bis 70 Prozent.

Kläre das immer aber zuerst mit deinem Hosting-Provider ab. Manche Webhosts haben die GZIP-Komprimierung standardmäßig für alle ihre Hosting-Angebote aktiviert.

Sofern das dein Webhoster nicht macht, dann aktiviere die GZIP-Komprimierung für deine Website oder deinen WooCommerce Shop von selbst.

Am einfachsten geht das mit unseren Plugin-Empfehlungen. Wenn du das nötige Wissen besitzt, kannst du das auch über die entsprechende Serverkonfiguration lösen.

Die GZIP-Komprimierung stellt auf alle Fälle eine wichtige Optimierungsmaßnahmen dar, welche die Ladezeit deiner Website deutlich steigert.

WordPress Plugin-Empfehlung:

:: WP Rocket

:: WP SuperCache

2.3. CDN (Content Delivery Network) einsetzen

Ein CDN ist ein Netz aus Servern, welches über die Kontinente hinweg, regional verteilt und gleichzeitig über das Internet miteinander verbunden ist.

Typischerweise besteht ein CDN aus einem Hauptserver, auf dem deine Website zentral liegt und weiteren sogenannten Replica-Servern, die Kopien deiner Website bereithalten.

Gerade, wenn du viel internationalen Traffic hast, ist es für die Ladezeiten vorteilhaft Website-Besuchern aus den USA, eine Kopie deiner Website vom CDN-Server in New York oder San Francisco anzuzeigen.

Eine Page-Speed Studie von Backlinko hat herausgefunden, dass mithilfe eines CDN-Networks vor allem die Ladezeiten deiner Desktop-Version beschleunigt werden kann, weniger die mobile Website.

Teste, ob dir die Integration eines CDN-Netzwerks viel an Ladezeiten-Performance bringt.

Eine Praxiserfahrung unsererseits im Zusammenhang mit WordPress und CDN:

CDN-Netzwerke tun sich in der Regel schwer, den globalen Website Fake-Traffic von Spam-Bots, Spidern und Crawlern herauszufiltern, da ein serverseitiger Abgleich mit Spam Blacklists nicht gut funktioniert.

Somit kann es sein, dass du dir mit der Integration eines CDN-Netzwerkes viel zusätzlichen, unerwünschten Fake-Traffic auf deine Website holst, was alles andere als ideal für deine Ladezeiten ist, weil auch diese Spam-Zugriffe Ressourcen binden.

In einem konkreten WordPress Kunden-Projekt hat die Eliminierung des vorher installierten CDN-Netzwerkes die WordPress Website erstaunlicherweise wieder schneller gemacht.

Das hängt auch wesentlich mit der Performance deines Webhosts zusammen. Deshalb am Besten Testen und Ausprobieren.

2.4. PHP-Version aktualisieren

Überprüfe, welche PHP-Versionen auf deinem Webserver in Verwendung ist. Es wird PHP 7.4 oder höher, auch von vielen Hosting-Providern, empfohlen.

Ein PHP-Update kannst du im Regelfall im Kundenbereich deines Hosters selbst durchführen. Falls nicht, kontaktiere deinen Hoster, ob er das für dich übernehmen kann.

Mach vorher auf alle Fälle ein Backup und kontrolliere nach dem PHP-Update die gesamte Website.

Aktuelle Themes & Plugins sollten mit PHP 7.4 oder höher in der Regel gut zurecht kommen.

Wenn nachgewiesenermaßen ein aufgeblähtes Theme und ein Page-Builder deine Ladezeiten ordentlich runter bremsen, dann schau, dass du am besten beides oder zumindest eines von beiden los wirst.

Wechsle auf ein schnelles, schlankes Theme

Wechsle auf ein schlankes WordPress Theme oder meistens noch besser, lass dir von einer professionellen WordPress Agentur ein individuelles WordPress Theme entwickeln, das genau das kann, was du auch wirklich benötigst.

Wirf den Pagebuilder über Bord

Versuche zusätzlich deinen Page-Builder los zu werden. Ich weiß, das Ganze ist gar nicht so einfach, denn es verstecken sich im gesamten Site-Content Page-Builder Shortcodes.

Ist der Page-Builder deaktiviert, wird der Content im Frontend deiner Website nicht mehr schön und ordnungsgemäß angezeigt. Es bleibt dir an der Stelle nichts anderes übrig, als den gesamten Content von den Pagebuilder Shortcodes zu reinigen und neu zu formatieren.

Wenn es für dich ohne eine Art Page-Builder Experience gar nicht geht, dann versuch es mit Gutenberg, dem integrierten Page-Builder von WordPress. Dieser ist wesentlich schonender mit deiner Ladezeiten.

Wenn bessere Ladezeiten für dich nicht ganz so dringend sind, dann kannst du diesen WordPress Set-Up Optimierungen auch im Zuge des nächsten Website oder Webshop Relaunches mitmachen.

Wenn du technologisch vorne dabei sein möchtest, dann könnte dieser, eher neueren Web-Development Ansatz etwas für dich sein.

Du kannst WordPress beispielsweise als Headless CMS verwenden.

Noch nie davon gehört? Egal. Wir erklären es dir.

Bei Headless CMS Webseiten werden Frontend und Backend voneinander getrennt und über eine API Schnittstelle miteinander verbunden.

Im Backend hast du wie gewohnt WordPress als CMS, um Inhalte warten und pflegen zu können.

Diese Inhalte werden über eine API ans Frontend geschickt, wo moderne JavaScript Frameworks wie React oder Vue.js im Einsatz sind.

Da mit WordPress als Headless CMS im Frontend statische, also vorgeladene Seiten, angezeigt werden, werden Ladezeiten von 1-2 Sekunden erreicht, selbst mit Multimedia-Content wie Videos.

Dieses Konzept gibt es auch für Web-Shops, wo es unter dem Begriff Headless Commerce (auch “Headless eCommerce”) aufschlägt. Damit lassen sich gerade auch für Online-Shops herausragende Ladezeiten und eine tolle Nutzererfahrung erzielen.

Wie fast alles auf der Welt, hat WordPress als Headless CMS seine Vor- und Nachteile. Wenn du mehr darüber erfahren möchtest, so schau hier.

In unseren Headless CMS Projekten mit WordPress haben wir herausragende Ladezeiten, Desktop wie Mobile, erzielen können.

So haben wir mit dieser internationalen Biotech Firmen-Website im Google Lighthouse Audit einen Score von 99 von 100 geschafft, was erfahrungsgemäß wirklich schwer zu schaffen ist.

Wenn du wissen möchtest, wie unsere ideale WordPress Website aussieht, dann lese das hier:

Je nach Kundenanforderungen und Budget haben sich in unserer mittlerweile über 10-jährigen Erfahrung als WordPress Agentur zwei ideale WordPress Set-Ups herauskristallisiert, die eine gute Basis für einen vernünftigen WordPress Page Speed schaffen:

Variante 1: WordPress im klassischen Set-Up

Wenn wir WordPress ganz klassisch aufsetzen, dann haben wir mit diesem Set-Up die besten Erfahrungen in Bezug auf Ladezeiten.

• Selber programmiertes, schlankes Custom Theme (keine Multi-Purpose Themes)
• Keine Page-Builder, max. Blocks im Backend
• So wenig Plugins wie möglich
• Advanced Custom Fields Pro
• Custom Post Types
• Hochwertiger Hosting-Provider

Variante 2: WordPress als Headless CMS

Wenn wir WordPress im Rahmen von Headless CMS betreiben, dann hat sich folgendes Set-Up für uns bewährt:

• Frontend: React (JavaScript Framework)
• Backend: WordPress CMS
• API
• Gatsby Site-Builder
• Github
• Frontend Hosting: Netlify oder AWS
• Backend Hosting: Hochwertiger Webhost deiner Wahl

Wie du hier in diesem Blogpost erfahren hast, fängt die WordPress Ladezeiten-Optimierung bei der Wahl des grundlegenden, technologischen Set-Ups an. Ist das technologische Fundament von vornherein nicht ideal gewählt, werden sich pfeilschnelle Ladezeiten realistischerweise schwer ausgehen.

Wir haben dir deshalb 3 Methoden dargestellt mit unterschiedlichen Ausprägungen hinsichtlich Komplexitätsgrad, Zeithorizont und Umsetzungsaufwand, aber auch Nachhaltigkeit und Verbesserungspotential.

Die empfohlenen PageSpeed Optimierungen und Plugins entfalten ihre Wirkung immer auch am besten, wenn das technologische Set-Up möglichst vorteilhaft gewählt ist.

Jetzt liegt es an dir auszuwählen, für welchen grundlegenden Ansatz du dich entscheidest. Was für dich der aktuell beste Weg ist, um eine langsame WordPress Seite schneller zu machen, hängt natürlich immer ganz stark von deinem individuellen Kontext ab.

Du hast hier nun erfahren, wie wir als professionelle WordPress-Agentur an das Thema Ladezeitenoptimierung herangehen.

Die Reise im Internet geht ohne jeden Zweifel ganz klar in Richtung schnelle Ladezeiten. Das sieht man unter anderem ganz deutlich an dem im Sommer 2021 von Google eingeführten, neuen Rankingfaktor Page Experience, was im Wesentlichen eine Abbildung der Web Core Vitals darstellt.

Es ist letztendlich deine Entscheidung, welche Wichtigkeit und Priorität du dem Thema WordPress Ladezeiten beimißt. Aber schnelles Laden ist sowohl für die Nutzererfahrung als auch für SEO bedeutsam. So viel steht fest.

Spätestens, wenn deine Seite essentiell für deinen Geschäftserfolg ist und du damit direkt oder indirekt Geld verdienst, in Form von Leads oder Conversions, kommst du um die Optimierung deiner Ladezeiten nicht drum herum.