Warum ist WordPress langsam? Praxisguide Ladezeitoptimierung

Um die Performance deiner WordPress Seite zu verbessern solltest du zu Beginn die Ladezeit richtig messen. Hier empfehle ich aber nicht nur nach hohen Punkten oder Scores zu bewerten sonder auch die “gefühlte” Ladezeit im Auge zu behalten.

Gefühlte Ladezeit vs gemessene Ladezeit

Was ist der Unterschied von der gefühlten und gemessenen Ladezeit? Ganz einfach. Nur weil die Scores und Zahlen in folgenden im absoluten grünen Bereich sind heißt das nicht dass die Seite auch gefühlt schneller ist. Zugegeben seit dem Web Core Vitals kann man sich etwas mehr darauf verlassen.
Teste Deine Seite immer auch auf Deinem Handy. Vergleiche die Ladezeit auf dem Handy mit Seiten deiner Konkurrenz.

WebPageTest – Mein Favorit!

Mit dieser Messtechnik lassen sich sehr gut “Waterfall” Werte auslesen und tiefer ins Detail gehen. Bevor ich hier allerdings weiter einsteige vergleiche ich immer die Messwerte aller anderen Mess-Tools. GTmetrix gibt dir eine schnelle Übersicht was geladen wird. WebPageTest gibt dir sehr detailreich Informationen was Ladezeit und Zeitpunkt der geladenen Ressourcen betrifft. Zum Feintuning der Ladegeschwindigkeit absolut empfehlenswert!

GT Metrix

Bis vor kurzem gab es bei GTmetrix noch eine etwas andere Metrik zum Messen der Ladezeiten. Mittlerweile arbeitet auch GTmetrix nach Lighthouse/PSI Werten. Seitdem ist es mit dem Tool entspannter Optimierungspotentiale zu erkennen. So richtig stark wird es aber erst mit deinem Bezahlplan da dann viel besser auf die mobile Ladezeit und den Serverstandort zugegriffen werden kann.

PageSpeed ​​Insights (PSI)

Auch dieses Tool misst mittlerweile die Geschwindigkeit sehr gut. Vorallem wenn es um die mobile Performance geht. Viele Infos über Dateien und Scripte welche die Ladezeit verzögern. Ebenso welche Bilder noch nicht 100% optimiert sind und / oder nicht nachgeladen werden (lazyload). Ähnliche Werte bekommst du übrigens auch via dem Lighthouse Bericht in den Chrome Devtools.

Die Ergebnisse aus diesen Tools ergeben recht schnell ein Bild wo man die Performanceoptimierung ansetzen kann.

PingDom

Ein interessantes Tool und auch wie GTmetrix kostenlos. Allerdings mit weniger Informationen und Daten für die die Ladezeitoptimierung.

Hosting

Ich lese immer wieder dass man auf Shared Hosting, Billighoster, etc … verzichten soll da die langsam sind. Diese Meinung teile ich nur bedingt. Die Antwortzeiten mögen nicht die Schnellsten sein, da man sich den Platz mit vielen anderen Seiten teilt. Jedoch kommt es immer auf den jeweiligen Einsatzzweck, Größe und Umfang der Seite sowie Besucherzahlen und Traffic an.

Wenn du einen einfachen Blog ohne großen Funktionsumfang und Spielereien planst und dabei auf ein schnelles Theme setzt wirst du selten ein Problem mit der Ladezeit haben, auch wenn die Besucherzahlen steigen. Wenn du dabei noch ein gut eingestelltes Caching, ordentliche Bildoptimierung und sorgfältige Auswahl von Plugins hast reicht mit Sicherheit ein günstiges Hosting. Oftmals reichen auch Einstiegspakete von Strato, Ionos und co.

Wenn du aber einen sehr umfangreichen Blog mit vielen Besuchern, neben Affiliatelinks zusätzlich noch Erweiterungen durch einige Plugins hast oder eine aufwändige Unternehmensseite bzw. sogar einen WooCommerce Shop hast, setze gleich auf eine starke Serverinsfrastruktur. In diesem Bereich willst du in der Regel Geld mit deiner Seite verdienen. Spare deshalb hier nicht an der falschen Stelle.

Für mich ist neben der Performance vorallem auch ein schnell reagierender und kompetenter Support wichtig.

Aus Erfahrung kann ich dir hier zu All-Inkl. oder Raidboxes raten. Es gibt natürlich unzählige weitere gute Hoster. Darauf gehe ich noch an einer anderen Stelle genaue ein.

Themes

In der Regel läuft es so ab: Du suchst in Google und nach einem Theme das alles können soll:

• Gut aussehen mit vielen Designvorlagen,
• umfangreiche Funktionen,
• natürlich darf ein Headerslider nicht fehlen,
• am Besten noch kostenlos
• etc …

Klingt verlockend!?
Die Wahrheit aber ist das Ergebnis wird selten so sein wie man es sich es vorstellt oder auf den Vorlagenseiten gesehen hat. Entweder hat man nicht so tolle Bilder oder die Texte andere Länge oder noch gar keine. Und dann sieht man die neue Seite das erste mal in den Performance Tools. Voila … in sehr vielen Fällen heißt es dann zurück zum Start.

Ein nachträglicher Wechsel ist in den meisten Fällen viel teurer als wenn du gleich ein ordentlichen Theme mit Fokus auf Performance verwendest.

Ich kann empfehle dir ein sehr sehr schlankes, gut programmiertes Theme das ohne Ballast und viele Funktionen auskommt, die meisten davon wirst du eh nicht brauchen.

Folgende Themes kann ich dir zu 100% für eine schnelle Seite empfehlen. Halte dich daran und du hast schon ein solides Fundament für eine gute Performance:

• FSE – Block Themes mit GREYD Suite für den Profianwender
• WP Astra
• Studiopress Themes auf Basis von Genesis Framework
• Bizbudding Mai Themes ebenso auf Basis von Genesis Framework
• Generate Press mit Generate Blocks
• Kadence
• Shoptimizer für WooCommerce

Plugins

Hier hört und liest man sehr vieles … häufigstes Argument. Verwende nur wenige Plugins, viele Plugins machen deine Seite im Frontend und Backend langsam. Das stimmt allerdings nur bedingt.
Das wichtigste ist dass du bei jeder Lösung hinterfragst ob es jetzt wirklich ein Plugin braucht oder ob du es mit ein paar Code-Schnippseln ohne Plugin lösen kannst. Das erfordert zwar etwas technisches Wissen aber die Zeit hier zu investieren lohnt sich.
Diese Code-Schnippsel fügst du am Besten mit dem Plugin Code-Snippets oder direkt in der function.php Deines Child-Themes hinzu.

Ebenso ist es nicht zwingend immer kostenpflichtige Plugins für viele Funktionen zu verwenden. Diese haben zwar den Vorteil dass sie in der Regel gut programmiert sind und der Support schnell ist. Das ist aber nicht garantiert. Dazu kommt das solche Plugins oft mehr Funktionen bieten als man benötigt. Die Seite trägt den Ballast dennoch mit. Deshalb immer mit Bedacht die Plugins wählen.

Ein kleiner Tipp: Deaktiverte Plugins entfernen. Diese brauchen auch Speicherplatz und ggf. System-Ressource. Und nach der Deinstallation auch die Datenbank überprüfen ob noch etwas von dem Plugin und deren Daten vorhanden ist. Am Besten geht das mit WP Optimize oder DB Cleaner Pro.

Hier noch ein Überblick über den Status deiner Ressourcen in WordPres auszulesen:

• Debug Objects
• Asset Queue Manager
• WordPress Inspector

Page Builder

Hier scheiden sich oft die Geister … gefühlt gibt es nur welche die absolut dafür oder absolut dagegen sind. Wie viele andere habe auch so meine Erfahrungen mit Visual Composer, Beaver Builder, Div und co gemacht. Schon seit geraumer Zeit setze ich aber zu 100% auf Gutenberg. Seit ich auf Gutenberg umgestiegen bin, habe ich viel weniger Kompatibilätsprobleme bei Updates und co.

Für viele wirkt es einfach eine schöne Webseite mit großen Themes oder auch mit sogenannten Pagebuildern (Elementor, Visual Composter, Beaver Builder etc.) zu gestalten.  Es geht schnell und hat eine vermeintlich gute Optik – die oft leider nicht zum Unternehmen passt. Die Nachteile sieht man aber oft erst im Nachhinein. Oftmals erst wenn in der Google Search Console die Zahlen rot aufleuchten.

Folglich aus meiner Sicht die Probleme:

• Themes meistens aufgeblähter Code der im Nachhinein wieder aufwändig entschlackt werden kann
• viele Designoptionen, von denen man die meisten gar nicht benötigt – entweder aus UX oder Funktionssicht – oft aber mitgeladen werden
• dazu noch ein aufgeblähtes PageBuilder Plugin der die Seite zusätzlich mit Code belastet

Diese Dinge verschlingen auch viel Zeit bei Updates und co. da es immer wieder zu Kompatibilätsproblemen mit dem aktuellen WordPress oder Plugins kommen kann.

Viele dieser Page Builder fügt unnötigen oder aufgeblähten Code zur Seite. Sobald die Seite dann umfangreicher oder mehr Besucher bekommt macht es sich in der Performance sichtbar. Was meiner Meinung nach bei kleinen Projekt kein Problem ist . Trotzdem auch oder gerade für kleinere Projekte lässt sicher absolut drauf verzichten und ich empfehle hierfür mit Generatepress, Kadence oder WP Astra in Kombination mit Gutenberg zu arbeiten. Diese liefern auch schon sehr gute vorgefertigte Templates.

Divi und Elementor bieten inzwischen auch eine gute Möglichkeit dennoch gute Performancewerte zu erzielen. Perfmatters oder Asset CleanUp hilft auch hier um nichtgenutzten Code zu entfernen.

Aber warum nicht von Anfang an auf einen leichtgewichtigen Workflow zurückgreifen?

Ebenso die Kombination von Oxygen und ACF oder Toolset mit Types und Blocks sind sehr mächtige WordPress Tools für die Entwicklung von WordPress Webseiten.

Caching

Beim Caching werden die Inhalte im Browser des Nutzers gespeichert. So kann die Seite beim erneuten Besuchen aus dem Cache abgerufen und schnell aufgebaut werden.

Caching Plugins kümmern sich neben dem Caching in der Regel auch um folgende Optimierungen:

• Verzögertes Laden von JS
• Minimierung / Minify von CSS und JS
• Critical CSS Generierung
• Datenbank-Optimierung
• LazyLoad
• Page Caching
• Link Preloading

Es gibt ein paar kostenlose Plugins wie Swift Performance Lite , W3 Total Cache, WP Fastest Cache oder WP Super Cache. Diese reichen in der Regel auch oft aus, vorallem Swift Performance liefert in der kostenlose Version schon enorme Ergebnisse. Ist allerdings nicht ganz so einfach zu konfigurieren. Hier eine Anleitung von WP Johnny.

Ich bevorzuge allerdings Premium Caching Plugin wie WP Rocket , Borlabs Cache oder Flying-Press. Ein guter Workflow ist auch bei Serverseitigem Cache Autoptimize in Kombination mit Rapidload Critical Unused CSS. Je nach Komplexität der Seite bzw. Theme oder Plugins brauch es hier aber etwas Kenntnis für die Settings.

CSS und Javascript

CSS und Javascript Datein sollten optimiert und minimiert ausgegeben werden. Und nur geladen wo sie auch wirklich gebraucht werden.

Als erstes gilt es mittels Google Page Speed und gtmetrix die renderblockierenden Scripte und Dateien zu identifizieren. Diese sollten minimiert werden. Kombinieren würde ich nur wenn Dateien 10kb oder kleiner sind.

Plugins mit denen du critical- oder unused-CSS sowie Javascripte optimieren kannst:

• Autoptimize – kostenlos
• Rapidload
• WP Rocket
• Flying-Press

Zum entladen von Plugins um CSS/JS dort zu entfernen, wo sie nicht geladen werden müssen:

• Asset Clean-Up – kostenlos
• Perfmatters

Bilder

Eines der wichtigsten Punkte ist die optimierte Bereitstellung von Bilder. Wenn dein Performancecheck Bilder moniert empfehle ich dir als erstes an dieser Stellschraube zu drehen da hier oft das größte Potential zur Ladezeitenverbesserung liegt.

Bilder in der richtigen Größe bereitstellen
Am Besten gleich schon vor dem Upload. Auch hinsichtlich der Größen. Wenn deine Seite oder Blog nur 1024 Pixel breit ist dann lade die Bilder auch nur in dieser Pixelbreite hoch. Das spart dir zugleich Serverplatz.

WebP – “Next-Gen-Format”
Viele Bildoptimierungsplugins oder auch Cache-Plugins stellen dir diese Bilder bereit. Allerdings meistens erst in der kostenpflichtigen Version. Mit dem Plugin webP Express kannst du deine Bilder in dem “Next-Gen-Format” erstellen.

Adaptive Bilder
Stelle für kleinere Browser und Auflösungen die passenden Bilder bereit. Besonders für die Darstellung auf Mobilgeräten und Handy wichtig. Ein einfaches kleines kostenloses Plugin erledigt dir die Arbeit: Shortpixel Adaptive Images

Fehlende Breite und Höhe
Gib dem Browser die Info wie hoch und breit ein Bild ist. Entweder manuell im HTML Code oder via Plugin:

1. WP Rocket – kostenpflichtig
2. LiteSpeed Cache – kostenlos(Lightspeed Server)

LazyLoad
Bilder die nicht “above-the-fold” zu sehen sind sollten nachgeladen werden. Die meisten Caching Plugins bieten diese Möglichkeit. Seit WP 5.5 ist dies Funktion in WordPress integriert und wurde in 5.9 sogar verbessert. Die Bilder die im ersten Screen zu sehen sind wie Logo und ggf. Heroheader würde ich davon ausschließen da es für die Darstellung und Usability kontraproduktiv wäre.

Meine Erfahrung ist dass mein Nutzerverhalten nicht besser oder schlechter ist wenn Lazyload aktiv ist. Aber es erhöht den Scorewert und deshalb machen es viele. Entscheide selber nach Gefühl wie sich das Surfen auf der Seite anfühlt.

EXIF-Daten entfernen
Das sind die beim Fotografieren mitgespeichert werden. Z.b. Datum, Ort, Aufnahmeurzeit, Belichtungszeit, etc … . Entferne diese Daten. Wird von vielen Bildoptimierungsplugins erledigt. Meine Empfehlung dazu der kostenlose Robin image optimizer.

Tools zur Bildoptimierung und Komprimierung

Bei der Komprimierungsstufe ist 82% eine gute Faustregel. Bei Fotografen Blogs oder Seiten wo es auf die Bilder ankommt würde ich eventuelle etwas höher gehen.

Meine Empfehlung ist ganz klar Bilder vorab in der richtigen Qualität und Optimierung hochzuladen. Zwei hervorragende Online-Tools sind dabei:

1. Bulk Image Resizer
2. Shortpixel Online Tool – teils kostenlos

Es gibt unzählige Plugins die auch das nachträgliche optimieren verkaufen. Mit folgende Plugins habe ich aber die Besten Ergebnisse erzielt. Eines davon ist sogar kostenlos.

1. Robin image optimizer – kostenlos
2. TinyPNG – kostenlos
3. Shortpixel Plugin – teils kostenlos
4. WP Compress – kostenpflichtig

Schriften

Meine Empfehlung ist zu überlegen ob es wirklich eine Google Font sein muss oder ob es nicht ein Systemfont auch tut. Oder wie wäre es nur für die Headlines eine Google Font zu verwenden und für den Fließtext eine gut lesbare Systemfont?

Nicht nur aus DSGVO Gründen solltest du Schriften lokal laden und das laden von Drittanbietern über fonts.gstatic.com zu vermeiden.

Einfache Plugins und Tools dazu wären

• Custom Fonts (Eingeschränkter Themesupport)
• OMGF Fonts lokal hosten

Ein paar Tipps:

• Einige Themes bieten auch von Haus aus die Möglichkeit Fonts lokal zu hosten.
• Pagespeed Insights gibt dir Feedback welche Schriften vorgeladen (Preload) werden sollten. Mittels WP Rocket ist das einfach erledigt.
• Mittlerweile lade ich nur noch .woff und .woff2 Schriften
• Verwende nur minimal Anzahl von Schriften und Schriftschnitten. In der Regel reicht eine Headlineschrift, Fließtext in normal, bold und eventuell kursiv. Wenn die Fließtextschrift dann noch eine Systemschrift ist, ist man schon auf einem guten Weg dass die Schrift nicht zur Performancebremse wird.

Slider

Ja ich kann es nicht oft genug sagen oder zum Teil auch nicht mehr hören bzw. lesen. Verwende keine Slider “above-the-fold”. Es gibt sehr viele Beiträge und Studien über Sinn bzw. Unsinn von willkürlichen Header-Slidern. Abgesehen von schlechter UX-Erfahrungen sind das absolut unnötige Performancekiller. Slider werden einfach nicht geklickt, auch wenn sie im Anschein hübsch aussehen. Es gibt Ausnahmen für die Verwendung von Headerslider aber in der Regel “Nein”. Einfach drauf verzichten und wenn es nötig bzw. es dem Ziel der Webseite hilft verbaue sie sinnvoll im Content.

Vom Revolution Slider würde ich abraten. Gute Erfahrungen habe ich mit MetaSlider oder Smartslider 3 gemacht.

Videos

Als Best-Practise würde ich hier empfehlen Youtube- oder Vimeovideos einzubauen. So werden die Videos barrierefrei auf einem externen Server geladen. Als Ladezeitenoptimierung empfiehlt sich hier im Caching Plugin die Funktion Lazy Load für Videos und iFrames zu aktivieren. Viele bieten noch die Möglichkeit auch das Vorschaubild lokal zu speichern.

Datenbank

Bereinige laufend die Datenbank. Je nach Seite würde ich es wöchentlich oder 2mal im Monat die Datenbank ansehen. Vielleicht wurde ein Plugin entfernt wo noch Tabellen vorhanden sind. Oder aber vielleicht wurde an einer Seite viel geändert und es sind unzählige Revisionen vorhanden die gelöscht werden können.

Einige Cache Plugins können dies auch. Ich empfehle dafür aber WP Optimize oder DB Cleaner Pro. Letzteres Plugin ist mit Vorsicht zu genießen da diese Plugin sehr sehr viel löschen kann. In der Regel reicht aber eine saubere Bereinigung mit WP Optimize. Davon gibt es auch eine kostenpflichtige WP Optimize Pro Version mit noch mehr Funktionen.

Delay Javascript

Beim verzögern werden bestimmte Scripte erst später oder durch Userinteraktion geladen. Das sorg für schnelleren TFB und Erstdarstellung des Contents und hilft vorallem bei der Web Core Vital Optimierung.

In der Regel sichere Scripte die verzögert geladen werden können sind:

• Tracking & Analytics (Google Analytics, Hotjar, Facebook Pixel, Statcounter, Google Tag Manager etc.)
• Werbeskripte (Google Adsense, Amazon Ads, Taboola, Outbrain, Media.net usw.)
• Social Media Follow/Like-Schaltflächen-Einbettungen
• Kundensupport und Live-Chat (Zendesk, Customerly, Intercom, tawk.to, Olark usw.)
• Andere Skripte von Drittanbietern (Disqus-Kommentare, Facebook-Kommentare, Cookie-Zustimmung usw.)
• Skripte, die für das Rendern von „above the fold“-Inhalten nicht unbedingt erforderlich sind

Scripte die man nicht verzögern sollte:

• JQuery
• Javascripte die es zum Rendern “above the fold” benötigt werden
• Javascripte die Abhängigkeiten zu anderen Scripten haben

Plugins dir beim Verzögern der Scripte helfen:

• Flying Scripts kostenlos
• WP Rocket
• SWIFT Performance

Prefetch, Preload, Preconnect

Gibt dem Browser die Info Ressourcen im Voraus herunterzuladen.

Prefetch/Preconnect stellen frühe Verbindungen zu Domänen von Drittanbietern her, während Preload Schriftarten, Skripte, Stile, oder Bilder vorausladen. Viele andere Plugins unterstützen Browser-Ressourcenhinweise (die meisten Cache-Plugins).

• Prefetch – hilft Browsern, Domains von Drittanbietern zu antizipieren, indem im Hintergrund eine DNS-Suche durchgeführt wird.
• Preload – wird häufig für Schriftarten oder Links verwendet. Das Vorladen von Schriftarten hilft Browsern, Schriftarten in CSS-Dateien zu erkennen. Google Page Speed Insights geben den Hinweis welche Schriftarten du unter „Preload Key Requests“ vorladen solltest. 
• Preconnect – Stellt frühzeitig Verbindungen zu wichtigen Drittanbieter-Ursprüngen her. Häufig bei CDNs und Schriftarten von Drittanbietern wie fonts.gstatic.com. (Schriften sollten allerdings aus performance und rechtliche Gründen lokal geladen werden.)

Allgemeine Tipps

Einfache Sachen die vielleicht in dem Beitrag noch gefehlt haben oder es Wert ist sie zusammenfassend nochmals zu erwähnen

• Vermeide sogenannte multipurpos Themes, die sind meistens sehr aufgebläht und mit Funktioen gespickt die nicht gebraucht werden
• Lösche alle unbenutzten Bilder und Medien
• Unbenutzte, deaktivierte Themes/Plugins löschen
• Begrenze die Revisionen in Beiträgen und Seiten
• Regelmäßige Bereinigung der Datenbank mit WP-Optimize
• Heartbeat-Steuerung (Empfehlung: 2 Minuten Frontend, 0 im Backend, 1 Minute beim Editor)