Ladezeiten Deiner WordPress-Website optimieren

Eine ordentliche Ladezeit ist nicht nur „nice to have“ – sie ist essenziell für den Erfolg Deiner Website.

Bereits 2008 hat Google bestätigt, dass die Ladzeiten einer Website Einfluss auf das Ranking einer Seite in den Suchergebnissen hat. 2021 hat Google das noch einmal bekräftigt als die Core Web Vitals als offizielles Ranking-Kriterium bestätigt wurden – und dazu gehört eben auch die Ladezeit.

Dazu kommt, dass Menschen im Internet sehr ungeduldig sind. In einer alten Studie aus 2009 wurde festgestellt, dass ein Rückgang der Ladezeit von 0,4 auf 0,9 Sekunden einen Umsatzrückgang von 20% verursachte. Ich habe keine aktuellere Studie zu dem Thema finden können, aber ich bin relativ sicher, dass die Nutzer in den vergangenen 16 Jahren nicht geduldiger geworden sind.

Du siehst, es gibt also sehr gute Gründe, dass Du Dir die Ladezeiten Deiner Website einmal genauer anschaust. Und vieles, was Du dafür tun kannst, damit schneller lädt, ist tatsächlich keine Raketenwissenschaft.

---

Prüfe den Status Quo

Bevor Du damit beginnen kannst, die Ladezeiten Deiner Website zu verbessern solltest Du selbstverständlich erst einmal wissen, wo Du eigentlich stehst.

Ich nutze für die Prüfung der Ladezeiten drei verschiedene Tools, weil mir alle unterschiedliche Einsichten gewähren und ich durch die Kombination der verschiedenen Hinweise konkrete Hinweise bekomme, wo ich ansetzen sollte.

GTMetrix

GTMetrix ist ein Online-Tool, mit dem Du die Geschwindigkeit und Performance Deiner Website analysieren kannst. Es bewertet die Ladezeit, die Seitengröße und die Anzahl der Anfragen, die Deine Website stellt, und liefert eine detaillierte Analyse sowie Optimierungsvorschläge.

Wichtige Funktionen:

• Performance-Score basierend auf Google Lighthouse.
• Analyse von Seitenelementen, die die Ladezeit beeinflussen.
• Empfehlungen zur Verbesserung, wie z. B. Bilder optimieren, Caching einrichten oder JavaScript minimieren.
• Testmöglichkeiten für verschiedene Geräte und Standorte, um die User-Experience realistisch zu bewerten.

GTMetrix bietet eine kostenlose Basisversion mit der Du leider nicht so viele Serverstandorte testen kannst (in Europa steht z.B. in der kostenlosen Version nur London zur Vergügung). Wenn es nicht auf Millisekunden ankommt ist das aber in der Regel völlig ausreichend um einen ausreichend detaillierten Einblick in Schwachstellen und Verbesserungspotenzial Deiner Website zu erhalten.

WebPageTest

WebPageTest.org ist ein vielseitiges Tool zur Messung und Optimierung der Ladegeschwindigkeit von Websites. Es ermöglicht eine detaillierte Analyse technischer Faktoren, die die Performance beeinflussen, und ist besonders bei Entwicklern sehr beliebt. Im Vergleich zu GTMetrix ist es etwas „technischer“, liefert dafür aber auch wertvolle Zusatzinformationen.

Wichtige Funktionen:

• Tests von verschiedenen Standorten und Geräten: Du kannst Deine Website unter realen Bedingungen testen. Das heißt, Du kannst zum Beispiel festlegen ob Du Ladezeiten auf einem Mobilgeräten oder mit einer langsamen Verbindung testen möchtest.
• Umfassende Berichte: Das Tool liefert Dir Informationen zu Werten wie „Time to First Byte“ (TTFB), Ladezeiten für kritische Ressourcen und ein Wasserfall-Diagramm, welches Dir im Detail aufzeigt, welche Elemente Deiner Website wie lange zum Laden brauchen.
• Analyse von Core Web Vitals: Es bewertet wichtige Kennzahlen wie „Largest Contentful Paint“ (LCP) und „Cumulative Layout Shift“ (CLS).
• Optimierungsempfehlungen: WebPageTest gibt Dir klare Hinweise, wie Du Bilder, Skripte oder Servereinstellungen optimieren kannst.

PageSpeed Insights

Google PageSpeed Insights ist ein kostenloses Analyse-Tool von Google, das die Performance Deiner Website bewertet und Optimierungsvorschläge liefert. Es berücksichtigt sowohl die Desktop- als auch die mobile Ansicht und misst dabei die sogenannten Core Web Vitals, die für die Nutzererfahrung entscheidend sind.

Wichtige Funktionen:

• Performance-Score: Deine Website erhält eine Bewertung von 0 bis 100, abhängig von der Ladezeit, der Interaktivität und der visueller Stabilität. Letzteres bewertet z.B. sogenannte Layout-Shifts, wenn der Inhalt der Seit „hüpft“ weil irgendwo noch Elemente nachgeladen werden.
  
  Wichtig: Der Performance Score ist zwar ein wichtiger Messwert, aber nicht identisch mit der realen Ladezeit der Website, da Wert hier zum Teil basierend auf Laborwerten geschätzt wird.
• Core Web Vitals Analyse: Messwerte wie „Largest Contentful Paint“ (LCP), „First Input Delay“ (FID) und „Cumulative Layout Shift“ (CLS) werden detailliert analysiert.
• Optimierungsempfehlungen: Das Tool zeigt Dir, wo Du ansetzen kannst, z. B. bei der Bildkomprimierung, der Browser-Caching-Konfiguration oder der Minimierung von JavaScript und CSS. Diese Optimierungsempfehlungen sind echtes Gold wert, manchmal aber auch nicht ganz einfach umzusetzen.
• Unterschiedliche Testdaten: Es kombiniert Labordaten (unter kontrollierten Bedingungen) und Felddaten (echte Nutzerdaten), um Dir ein vollständiges Bild der Website-Performance zu geben.

---

Die wichtigsten Tipps zur Optimierung Deiner Ladezeiten

Die Ladezeit Deiner Website hat einen großen Einfluss auf die Nutzererfahrung. Zum Glück musst Du nicht jedes Detail optimieren, um spürbare Verbesserungen zu erzielen. Nach dem Pareto-Prinzip reichen oft ein paar gezielte Maßnahmen aus, um die größten Effekte zu erzielen.

Im Folgenden zeige ich Dir die wichtisten Maßnahmen, mit denen Du Deine Website schneller und benutzerfreundlicher machen kannst.

Bilder optimieren

Bilder gehören zu den größten Dateien auf einer Website und sind einer der häufigsten Gründe für langsame Ladezeiten.

Große Dateien benötigen länger, um vom Server geladen zu werden. Daher können Bilder, die nicht optimiert wurden die Ladezeit Deiner Website erheblich ausbremsen.

So müssen Bilder, die zu groß in die Seite eingefügt und dann manuelle auf eine nicht vorhandene Bildgröße verkleinert werden, vom Browser beim Aufruf der Seite erst auf die gewünschte Größe umgerechnet werden. Das kostet Zeit.

---

Bilder vor dem Upload skalieren

Passe die Größe Deiner Bilder vor dem Hochladen an die tatsächliche Anzeigegröße an. Wenn Du auf Deiner Website ein Vorschaubild im Format 300 x 300px benötigst ist ein Bild direkt von der Kamera mit 3000 x 2500px völlig überdimensioniert.

Wenn das Bild nicht über die gesamte Seitenbreite angezeigt werden soll empfehle ich als Faustregel, das Bild mit einer Größe von 800 x 600px hochzuladen..

Für seitenbreite Bilder (wie Hintergrundbilder oder Slider) hat sich eine Größe von 1900px in der Breite als sinnvoll herauskristallisiert. Vermeide aber zu viele solcher Bilder auf einer Seite. Ein Slider mit 10 Slides in 1900px Breite frisst ganz schön viel Datenvolumen. Weniger ist hier fast immer mehr.

Beim Upload der Bilder legt WordPress standardmäßig zusätzliche Bildgrößen an:

• Vorschaubilder: Quadratisch, mit einer Größe von 150 x 150px.
• Mittlere Bildgrößen: Die längere Seite des Bildes wird auf 300px reduziert, die andere bleibt im Seitenverhältnis.

Wenn das Bild größer als 1024px in der Breite hochgeladen wird wird zusätzlich zum Originalbild noch eine weitere Bildgröße „Groß“ angelegt mit einer Seitenbreite von 1024px. Wenn Du das Bild wie empfohlen nur mit 800x600px hochlädst werden große Bildgrößen aber nicht erzeugt.

Abhängig vom verwendeten Theme können noch weitere Bildgrößen angelegt werden. Nutze beim Einfügen in Deine Website immer die bereitgestellten Bildgrößen (z. B. „Thumbnail“, „Medium“ oder „Large“), um unnötige Umrechnungen durch den Browser zu vermeiden.

---

Das richtige Dateiformat wählen

• JPG: Dieses Format sollte für Fotos und Bilder bevorzugt werden, da es kleinere Dateigrößen erzeugt und somit schneller geladen wird.
• PNG: Verwende PNG nur, wenn Dein Bild Transparenzen enthält (z. B. bei Logos). PNG-Dateien sind oft deutlich größer als JPGs und sollten daher sparsam eingesetzt werden.
• WebP: WebP ist ein modernes Bildformat, das von vielen aktuellen Browsern unterstützt wird. Es kombiniert die Vorteile von JPG und PNG: kleinere Dateigrößen bei gleichbleibender Qualität. Um die Ladezeit weiter zu optimieren, sollten Bilder, wenn möglich, in WebP bereitgestellt werden.

---

Bilder komprimieren

Bevor Du ein Bild in WordPress hochlädst, solltest Du es komprimieren. Zwar gibt es auch Plugins, die das nach dem Upload für Dich übernehmen. Ich bin aber ein großer Fan, das schon vor dem Upload zu erledigen.

Am einfacsten geht das, wenn Du im Browser die Seite tinypng.com aufrufst und die Bilder dort in das Feld „Drop your images here“ ziehst.

Tinypng.com kann die Dateigröße eines Bildes um bis zu 70% reduzieren, indem es unnötige Daten, die von der Kamera gespeichert wurden (z. B. Metadaten wie Datum, Uhrzeit und Standort der Aufnahme) entfernt. Dadurch wird die Bilddatei verlustfrei verkleinert, ohne dass die Qualität sichtbar beeinträchtigt wird.

---

LazyLoad aktivieren

LazyLoad sorgt dafür, dass Bilder und Videos erst geladen werden, wenn sie im sichtbaren Bereich erscheinen.

Da so nicht alle Bilder oder Videos auf einmal geladen werden müssen, lädt die Website insgesamt schneller. Das verbessert die Benutzererfahrung, besonders auf mobilen Geräten oder bei langsamen Internetverbindungen.

---

Optimierung mit dem Plugin EWWW Image Optimizer

Das Plugin EWWW Image Optimizer erleichtert die Bildoptimierung direkt in WordPress. Es übernimmt viele der oben genannten Aufgaben automatisch:

• Nachträgliches Skalieren: Falls Du Bilder bereits hochgeladen hast, die zu groß sind, kann das Plugin sie skalieren oder Dich darauf hinweisen, wo Optimierungen notwendig sind.
• WebP-Unterstützung: Das Plugin erstellt zusätzlich zu den hochgeladenen Bildern eine WebP-Version, die automatisch an Browser ausgeliefert wird, die dieses Format unterstützen.
• Automatische Optimierung: Alle hochgeladenen Bilder werden direkt komprimiert und optimiert, um die Ladezeiten zu verbessern. Bereits in der Mediathek befindliche Bilder können über die Massenoptimierung nachträglich komprimiert werden.

---

Caching

Wenn Du eine Website in Deinem Browser aufrufst passiert im Hintergrund ziemlich viel. Dein Browser stellt im Prinzip eine Telefonverbindung mit dem Server des Webhosters her, bei dem die Website angelegt ist und fragt die einzelnen Elemente ab:

Wenn Du Caching für Deine Website nutzt wird – stark vereinfacht ausgedrückt – eine Kopie der Website angelegt. Damit muss der Server nicht mehr dutzende Einzelinformationen an den Browser schicken sondern er zieht – natürlich im übertragenen Sinne – einfach eine Kopie der Seite aus der Schbulade wenn ein Browser anfragt.

Du kennst vielleicht das Phänomen, dass Du eine Änderung an Deiner eigenen Website vorgenommen hast, diese Änderung aber in Deinem Browser nicht sichtbar ist. Oft liegt das daran, dass im Browser-Cache noch eine ältere Version der Seite gespeichert ist.

Ganz ähnlich funktioniert ein Caching-Plugin für Deine WordPress-Website. Nur, dass die Seite dabei nicht im Browser-Cache Deiner Besucher gespeichert wird sondern auf Deinem eigenen Webspace.

Für das Caching empfehle ich Dir eines der folgenden Plugins:

WP Fastest Cache läuft auf den allermeisten der von mir eingerichteten Websites. Es ist ein nicht zu überladenes Caching-Plugin, das auch von Menschen mit wenig Erfahrungen problemlos eingerichtet werden kann.

Vor kurzem bin ich mit meiner eigenen Website von WP Fastest Cache auf das kostenpflichtige WP Rocket umgestiegen.

WP Rocket bietet einen sehr viel größeren Leistungsumfang als WP Fastest Cache – allerdings ist die Einrichtung auch deutlich komplexer und man kann dabei mehr Fehler machen, wenn man nicht ganz genau weiß, was man tut.

---

Minifizierung von JS, CSS und HTML

Minifizierung – das klingt komplizierter, als es ist. Kurz gesagt bedeutet es, dass bei CSS, JavaScript (JS) und HTML überflüssiger Ballast entfernt wird, ohne dass der Code selbst seine Funktion verliert.

Ziel ist es, diese Dateien kleiner machen, damit deine Website schneller lädt.

Was passiert bei der Minifizierung?

Ein Programmierer arbeitet in der Regel mit einer klaren Struktur, fügt Leerzeichen und Kommentare ein damit der Code übersichtlich bleibt.

Der Browser benötigt diese Strukturelemente aber nicht um zu verstehen, was er tun soll. Daher wird beim Minifieren der Code quasi auf Diät gesetzt. Unter anderem werden dabei folgende Punkte optimiert:

• Leerzeichen und Zeilenumbrüche
• Kommentare
• Lange Variablennamen:
• Doppelungen oder unnötige Elemente

Beispiel:
So sieht das vorher aus:

body {
    background-color: #ffffff;
    color: #000000;
}

Und so nach der Minifizierung:

body{background-color:#fff;color:#000}

Wenn Du ein Caching-Tool wie z.B. WP Fastest Cache oder WP Rocket verwendest kannst Du die Minifizierung über die Einstellung dieser Plugins aktivieren.

Alternativ kannst Du hierfür auch das Plugin „Autoptimize“ verwenden.

---

Das richtige Hosting

Der Einfluss des passenden Webhostings auf die Ladezeit einer Website wird leider sehr häufig unterschätzt.

Besonders bei großen Massenhostern wie Strato oder IONOS teilen sich in den günstigen Tarifen oft viele Kunden einen Server. Das kann zu echten Performanceproblemen führen.

Benötigt eine andere Website auf demselben Server plötzlich viele Ressourcen – zum Beispiel durch unerwartet hohen Traffic – bleiben für die anderen Websites weniger Kapazitäten übrig. Im besten Fall wird deine Website dadurch nur langsamer. Im schlimmsten Fall ist sie vorübergehend gar nicht erreichbar.

Empfehlungen:

Ich bin ein großer Fan von All-Inkl.com. Hier findest Du ein in mein Augen sehr gutes Preis- / Leistungs-Verhältnis, super guten Support und dazu noch einen Serverstandort in Deutschland.

Aber auch speziell auf WordPress spezialisierte Webhoster wie z.B. Raidboxes oder WP Space können eine gute Wahl sein. Diese Anbieter sind zwar generell etwas teurer, dafür werden Dir aber auch viele technische Dinge abgenommen, um die Du Dich sonst selbst kümmern musst.

---

Datenbankoptimierung

Jede Aktion auf deiner Website erzeugt einen Eintrag in Deiner Datenbank, z.B. wenn Du einen neuen Blogbeitrag schreibst, auf einer Unterseite eine kleine Änderung vornimmst oder wenn jemand auf Deinem Blog einen Kommentar hinterlässt.

Viele dieser Einträge sind sinnvoll und wichtig. Aber mit der Zeit sammelt sich hier auch eine ganze Menge überflüssiges Zeug an und bläht die Datenbank unnötig auf. Und eine große Datenbank kann sich negativ auf die Ladezeit Deiner Website auswirken.

Daher solltest Du hin- und wieder mal einen kleinen Frühjahrsputz vornehmen:

• Revisionen von Beiträgen und Seiten: Jede Änderung auf einer Seite oder in einem Beitrag wird von WordPress ls eigene Revision gespeichert. Das ist super nützlich, wenn Du versehentlich etwas gelöscht oder geändert hast, was Du eigentlich noch brauchst. Aber die 3125te Änderung Deiner Startseite von vor drei Jahren wirst Du wohl kaum noch braucht.
  
• Spam-Kommentare und Papierkorb-Inhalte: Es ist durchaus sinnvoll, dass Spam nicht sofort gelöscht wird und Inhalte, die Du in den Papierkorb verschoben hast dort gegebenenfalls auch wieder herausgeholt werden können wenn der Finger mal zu fix auf der Löschtaste war.
  
  Aber auch hier gilt: es gibt keinen guten Grund, diese Daten über Monate und Jahre aufzubewahren.
  
• Unbenutzte Tabellen von deinstallierten Plugins: Wenn Du ein Plugin installierst schreibt das oft Tabellen in Deine Datenbank, die beim Löschen des Plugins dann nicht wieder gelöscht werden. Je nachdem, wie Experimentierfreudig Du mit Plugins bist, kann sich da im Laufe der Zeit eine ganze Menge Müll in der Datenbank ansammeln.

So optimierst du die Datenbank:

Ganz wichtig: Auf jeden Fall ein BackUp anlegen, bevor Du mit den Arbeiten beginnst! Die Datenbank ist das Herzstück Deiner WordPress-Seite. Wenn Du hier einen Fehler machst kann das Deine ganze Website lahmlegen.

Du solltest also auf gar keinen Fall an der Datenbank arbeiten ohne vorher eine Sicherung angelegt zu haben!

Ich empfehle Dir für die Optimierungsmaßnahmen das Plugin „WP Optimize„. Du kannst hier einfach durch anhaken der verschiedenen Optionen auswählen, was Du optimieren bzw. aufräumen möchtest.

Persönliche Anmerkung: WP Optimize bietet zwar auch die Möglichkeit, die Datenbankbereinigung automatisiert zu planen. Allerdings habe ich bei so sensiblen Aktivitäten gern die Kontrolle, wann und was genau passiert.

---

Fazit

Mit diesen Tipps kannst du die Ladezeiten deiner WordPress-Website deutlich verbessern. Beginne mit den Basics wie Bilderoptimierung und Caching und arbeite dich Schritt für Schritt vor. Schon kleine Veränderungen können einen großen Unterschied machen.

Hast Du Fragen zum Thema oder Anmerkungen? Ich freue mich, wenn Du Deine Erfahrungen in den Kommntaren mit mir teilst.