Als Nutzer ist das flotte Laden einer Seite im Internet so wie ein PS-starkes Autos zu lenken. Speed macht Laune und man fühlt sich leicht und unabhängig.
Auch Suchmaschinen legen Wert auf schnelle Ladezeiten. Es ist eines der Kriterien, das beim Ranking Gewicht hat. Das sind schon mal zwei gute Gründe, sich genauer mit dem Thema zu befassen.
Für wen ist dieser Artikel?
Diese Tipps sind für Redakteure und Selbstständige, die ihre Website selbst pflegen. Und für die, die mit einem Reinfuchs-Mindset an technische Herausforderungen herangehen. Im letzten Abschnitt gebe ich ein paar Empfehlungen, die du entweder mit einem Entwickler oder selbst umsetzen kannst.
Es geht in diesem Beitrag um zwei Dinge. Zum einen ein Gefühl dafür zu bekommen, was eine Website langsam macht und wie du dem vorbeugen kannst. Und zum anderen konkrete Kniffe, die du bei der Bereitstellung von Inhalten beachten kannst.
Warum ist die Ladegeschwindigkeit deiner Website wichtig?
Eine langsam ladende Website ist der Hauptgrund, warum Besucher eine Seite wieder verlassen.
Schlechte Performance ist ein Conversion-Killer. Jeder Klick weg von deiner Seite ist eine vertane Chance, eine verpasste Gelegenheit, eine Buchung, die nicht gemacht wurde.
Die Ladezeit ist zudem ein Rankingfaktor. Google rankt langsame Webseiten schlechter in den SERPs, also den Suchmaschinenergebnissen.
Bereits 2015 wurde Google erstmals häufiger von mobilen Endgeräten aufgerufen als von Desktop-Geräten. Daher ist Google besonders daran interessiert, Websites, die mobil schnell laden, in den vorderen Suchergebnissen zu platzieren.
Für dich heißt das: Achte insbesondere auf die mobile Ladezeit.
Jede Sekunde zählt
Deloitte Digital hat eine umfangreiche Studie darüber gemacht, und gezeigt, dass sich eine schnelle Ladezeit mobiler Websites grundsätzlich positiv darauf auswirkt, wie die Marke im Außen wahrgenommen wird. Es belebt das Geschäft. Sie haben dazu weltweit 37 Unternehmen unter die Lupe genommen, unter anderem die Postbank, Ebay und TUI.
Um eine Basis für die Studie zu schaffen, zogen sie Zahlen von Google heran (Ergänzung im Juni 2026: Link zur PDF-Datei gelöscht, da er leider nicht mehr funktioniert).
Wenn die Ladezeit …
- von 1 zu 3 Sekunden zunimmt,
… dann steigt die Wahrscheinlichkeit, dass ein Besucher abspringt um 32 %. - von 1 zu 5 Sekunden zunimmt,
… dann steigt die Wahrscheinlichkeit, dass ein Besucher abspringt um 90 %. - von 1 zu 6 Sekunden zunimmt,
… dann steigt die Wahrscheinlichkeit, dass ein Besucher abspringt um 106 %. - von 1 zu 10 Sekunden zunimmt,
… dann steigt die Wahrscheinlichkeit, dass ein Besucher abspringt um 123 %.
Ziel: Was ist eine gute Ladegeschwindigekeit?
Zwei, maximal drei Sekunden, dann sollte eine Webseite geladen sein, um eine angenehme User Experience zu erzielen.
Wenn es nach Google geht, deutlich schneller. Und da Google die international größte Suchmaschine ist und großen Einfluss auf deinen Erfolg haben kann, ist es nicht die schlechteste Idee, dieser Richtlinie nachzukommen.
Speedtest: Status quo messen
Es gibt verschiedene kostenlose Tools, mit denen du deine Website analysieren kannst. Ich nutze PageSpeed Insights oder Pingdom. In den Ergebnissen siehst du, was beim Aufrufen der Seite in welcher Reihenfolge geladen wird, wo’s flutscht und wo’s hängt.
PageSpeed Insights zeigt die Ergebnisse für Mobil und Desktop getrennt. Standardmäßig wird das Ergebnis für mobile Endgeräte angezeigt.
Bevor du was an deiner Website veränderst, überprüfe mit PageSpeed Insights den Status quo deiner Website. Gib im Tool deine Web-Adresse ein und messe die Leistungsfähigkeit der Seite auf Mobil- und Desktop-Geräten.
Mache am besten 2 Screenshots: 1x die Desktop-Ergebnisse und 1x die Ergebnisse der Mobilversion. Und nicht erschrecken, hier ist selten auf Anhieb alles im grünen Bereich.
Du bekommst eine Liste mit Optimierungsmöglichkeiten, mit denen sich die Ladegeschwindigkeit verbessern lässt. Manche Maßnahmen sind schnell umsetzbar, andere benötigen etwas Zeit oder grundlegende Veränderungen. Eines haben sie gemeinsam: Sie lohnen sich.
Bilder sind Ladezeit-Fresser
Zu einer WordPress-Website gehören Code (HTML, JavaScript und CSS), Text und Bilder. Manchmal mehr.
💡 Ein Bild belegt mehr Speicherplatz als 1000 Worte.
Bilddateien sind oft der Hauptgrund, warum eine Website langsam lädt. Ein einzelnes nicht optimiertes Bild kann ohne Weiteres mehrere Megabyte (MB) groß sein, insbesondere wenn die Kamera gut ist. Ein MB entspricht 1.024 Kilobyte (KB).
Das Ziel für einzelne Bilder der Website ist, sie jeweils auf eine Dateigröße von unter 100 KB zu reduzieren. Das geht nicht immer, aber meistens (wie du das hinbekommst, erkläre ich Schritt für Schritt im nächsten Abschnitt).
Oft machen Bilder den größten Anteil der Daten einer Website aus. Im Screenshot siehst du, dass der prozentuale Anteil von Bildern auf dieser WordPress-Website derzeit etwa 50 % ist. Gemessen habe ich das mit dem kostenlosen Analyse-Tool Screaming Frog.
Dabei ist die Website ist wirklich überschaubar – gerade mal 50 Blogbeiträge und in der Mediathek sind nur ca. 120 Bilder. Diese sind alle optimiert und auch die Mehrfachkopien, die WordPress von Haus aus anlegt, sind unterbunden (Anleitung dazu im letzten Abschnitt der Tech-Eck). Dennoch machen Bilder die Hälfte der Datenmenge der Website aus.
Das zeigt, wie immens wichtig das Thema Bild-Optimierung für eine verbesserte Ladezeit ist.
Das Gute? Diesen Hebel hast du selbst in der Hand. Es ist keine Frage von technischem Know-how, sondern eine von Prozessoptimierung. Im Sinne von: vor jedem Hochladen eines Bildes es vorab in mehreren Schritten zu optimieren, mit dem Ziel, dass es kleiner als 100 KB ist.
Bildoptimierung: von MBs zu wenigen KBs
Setze Bilder minimalistisch ein
Du brauchst nicht zwingend viele Bilder auf deiner Website. Allerdings machen Bilder neugierig, sie erzählen Geschichten und wecken Emotionen. Sie lockern eine Seite auf und geschickt platziert, können sie sogar den Blick lenken.
💡 Ein Bild sagt eben (manchmal) mehr als 1000 Worte.
Keine Frage, hochauflösende Fotos sehen auf einer Website super aus. Dennoch ist der sparsame Umgang mit Bildern ratsam, um die Dateigröße gering zu halten. Bei allem, was visuell ist – sei es ein Bild, eine Animation oder ein Video – sollte am Anfang die Frage stehen: Ist dieses Bild notwendig oder verzichtbar? Dein Ziel sollte eine Website der Leichtgewichtsklasse sein.
Wenn unnötige Assets entfernt werden, ist die Website übersichtlicher und benötigt weniger Ladezeit.
Mit Cascading Style Sheets (CSS) lassen sich übrigens Layout, Formen, Farben und Effekte mit wenigen Zeilen Code darstellen. Dein Programmierer freut sich bestimmt auf diese kreative Herausforderung und Nutzer sparen Datenvolumen, weil weniger Inhalte geladen werden müssen.
Wähle ein effizientes Bildformat
Es gibt etliche Bildformate. Je nach Bild und Anwendung sind neben WebP die folgenden Formate für deine Website relevant:
| JPEG | Fotos ohne Transparenz |
| PNG | Transparente Hintergründe |
| SVG | Skalierbare Symbole und Formen |
Nutze für Fotos das JPG-Format und wähle beim Komprimieren die Qualität „sehr hoch“ (80 %). So komprimierst du die Datei, ohne dass es fürs menschliche Auge sichtbar ist.
Eine PNG-Datei ist dann sinnvoll, wenn du einen transparenten Hintergrund hast. Da PNG-Dateien meist größer als JPG-Dateien sind, sollten sie ansonsten vermieden werden. Transparenz ist im JPG-Format grundsätzlich nicht möglich. Der Hintergrund bekommt die Farbe Weiß und das funktioniert nur auf einem weißen Hintergrund.
Logos, Symbole, Illustrationen und Icons solltest du als SVG-Datei einbinden, also als Vektorgrafik. Sie sind ohne Qualitätsverlust skalierbar und hinsichtlich Bildgröße unschlagbar. Das Format ist nicht allen Systemen standardmäßig zugelassen. Es lässt sich aber beispielsweise in WordPress durch einen Code ermöglichen. Sprich also mit deinem Entwickler darüber.
Passe die Bildgröße an (Pixel)
Schau in die Test-Ergebnisse von PageSpeed Insights. Oft zeigt sich dort, dass es die Bilddateien sind, die die Ladezeit ausbremsen. Das ändern wir jetzt.
In diesem Schritt reduzierst du die Bildgröße, sprich die Breite und Höhe des Bildes. So lassen sich jede Menge zu ladende Bytes einsparen.
Die pauschal perfekte Bildgröße für ein Bild gibt es nicht. Die Maße variieren je nach Theme und individuellem Design. Und sie unterscheiden sich danach, wie du das Bild verwenden möchtest.
Ein Blick in die Dokumentation deines Themes lohnt sich, dort gibt es Empfehlungen zu Bildgrößen.
Ich nutze Astra und bei diesem Theme ist die empfohlene Größe für das Beitragsbild im Blog 1200px breit und 628px hoch. Das wird auch „Featured Image“ genannt und ist das Bild ganz oben, je nach Einstellung über oder unter der Überschrift.
Meine Bilder sind meistens im Querformat und ich nutze die Breite des Beitragsbildes (1200px) als Richtlinie für alle Bilder. Um es mir noch weiter zu vereinfachen, nutze ich in der Regel nur 3 Breiten.
Bevor ich das Bild hochlade, überlege ich, wie ich es einsetzen möchte. Je nach Anwendung nutze ich eins von diesen 3 Breiten:
- 1200px (Beitragsbild)
- 600px (1/2 Spalte)
- 400px (1/3 Spalte)
Wenn ich’s nicht bereits beim Designen in Figma bzw. Canva so angelegt habe, dann nutze ich für das Verkleinern der Bildgröße die Vorschau-App auf dem Mac. Hier stelle ich unter Tools > Größe anpassen die Breite auf 1200px und klicke das Kästchen „proportional skalieren“.
Mit dieser Reduktion ist das Bild in der Regel nur noch ein paar Hundert KB groß.
Komprimiere die Bilder (Kilobyte)
Der letzte Schritt, um die Bytes weiter zu reduzieren, ist die Komprimierung der Bilder. Hier gilt das Motto: so viel wie möglich, ohne, dass das Bild schwammig wird.
In WordPress kannst du das Plugin WP Smush installieren, das Bilddaten, die du hochlädst, automatisch komprimiert. Ich nutze grundsätzlich so wenige Plugins wie möglich und komprimiere meine Bilder lieber mit dem kostenlosen Tool TinyPNG.
Weitere handfeste Tipps rund um das Optimieren von Bildern findest du in diesem Blogbeitrag:
Ladegeschwindigkeit als KPI
Die Bildoptimierung ist eine einfache und kostengünstige Möglichkeit, bessere Conversion-Raten auf deiner Website zu erzielen. Damit der Erfolg aber auch langfristig anhält, muss die Website-Geschwindigkeit zu einer Leistungskennzahl werden, die du regelmäßig im Blick hast.
In meinem Kalender habe ich für jeden 1. des Monats einen Website-Termin stehen. Ich habe ein Google Sheet, in dem ich verschiede Kennzahlen dokumentiere. Die Ladegeschwindigkeit gehört dazu. Zahlen aus der Google Search Console und Google Analytics ebenso.
Non-Bild-Tipps zur Verkürzung der Ladezeit
Plugins minimalistisch einsetzen
Mit Plugins wird die Funktionalität von WordPress erweitert. Sie wirken erst einmal richtig toll, viele sind es auch. Mit wenigen Klicks hat man eine Lösung für etwas, das man technisch umsetzen möchte. Oft auch noch für Umme.
Es ist nachvollziehbar, dass du aus Kostengründen vieles an deiner Webseite selbst einrichten möchtest und Plugins dafür einsetzt. Denn ohne technisches Know-how stößt man bei der Umsetzung schnell an seine Grenzen.
Doch auch Plugins benötigen Ressourcen. Wenn du viele Plugins nutzt, kann da einiges zusammenkommen.
Du solltest nicht mehr Plugins einsetzen, als wirklich nötig, und nicht mehr benötigte Plugins sollten gelöscht – und nicht nur deaktiviert – werden. Dafür gibt es zahlreiche Gründe, einige davon haben unmittelbar mit der Ladegeschwindigkeit der Website zu tun:
- Viele Plugins speichern Informationen in der Datenbank und füllen sie noch weiter auf. Manche legen sogar weitere Tabellen an, das bläht die Datenbank auf.
- Beim Laden der Website erhöht sich entsprechend die Anzahl der Datenbankzugriffe, auch das beeinflusst die Ladegeschwindigkeit.
- Zusätzliche HTTP-Anfragen und erhöhter Datentransfer haben die gleiche Wirkung.
Aber es gibt auch andere triftige Gründe, wie zum Beispiel die Inkompatibilität zwischen einzelnen PlugIns sowie die generellen Sicherheitsrisiken, die durch die Verwendung von Plugins entstehen können.
Mit zu vielen Plugins kann auch schnell mal aus wow au werden.
Wieviele Ressourcen ein Plugin verbraucht, hängt davon ab, wieviele Skripte geladen werden und ob es z. B. Fernabfragen macht.
Am besten sprichst du mit deinem Entwickler, wenn du dein System um eine Funktion erweitern möchtest. Möglicherweise kann er dir ohne Plugin weiterhelfen oder dir zumindest eins empfehlen, das vernüftig gebaut ist und deine Seite nicht unnötig belastet.
Hoste Videos bei Drittanbietern
Wer viele Videos einbettet, z. B. um Produkte in Aktion zu zeigen, tut sich keinen Gefallen im Hinblick auf Performance. Videodateien gehören nicht in die Mediathek. Hoste sie bei Youtube, Vimeo oder einem anderen Anbieter und bette sie dann auf deiner Website ein.
Das spart eine große Menge an Byte und verhindert so, dass die Ladezeit deiner Website ausgebremst wird.
Verzichte auf Slider
Slider werden nicht mehr wahrgenommen und sind mit dem vielen Bildmaterial regelrechte Ladezeit-Fresser. Es gibt mehrere Studien, die belegen, dass Slider mittlerweile häufig ignoriert werden. Zudem sind sie nicht für mobile Endgeräte geeignet.
Gute Alternative sind:
- Hero-Image
- Eine geschickt platzierte Handlungsaufforderung
- Kreative Bildelemente
- Ein Anmelde- oder Leadformular
Webhost und -paket checken
Die Auswahl eines leistungsstarken Webhosting-Anbieters ist entscheidend für die Geschwindigkeit, mit der deine Website lädt. Die verschiedenen Anbieter bringen unterschiedliche Ladezeiten mit sich.
Auch das Hosting-Paket selbst ist von Bedeutung. Bei besonders günstigen Tarifen teilst du meistens den Server, auf dem deine Seite liegt, mit vielen anderen Nutzern. Je mehr sich da tummeln, desto langsamer wird’s für alle.
Ist der jetzige Anbieter lahm, dann solltest du langfristig die Website zu einem neuen Anbieter umziehen.
Tech-Eck
Technisch kann noch jede Menge gemacht werden, um die Ladezeit weiter zu reduzieren. Dein Entwickler kann dir sicher gut helfen.
Wenn du die technischen Verbesserungen selbst angehen willst, dann mache vorher eine Datensicherung der Website und der Datenbank. So vermeidest du Datenverlust, falls etwas schiefgehen sollte. Seite abschießen? Been there, done that.
HTTP-Anfragen minimieren
Jedes Mal, wenn eine Website aufgerufen wird, laufen im Hintergrund viele technische Vorgänge ab, HTTP-Anfragen gehören dazu. Dabei wird vom Webbrowser eine Datei angefordert. Sobald der Server diese HTTP-Anfrage bekommt, antwortet der Server (im besten Fall flott) und liefert die gewünschten Dateien an den Browser (transferiert).
Und das ist der Knackpunkt. Denn der Browser muss für JEDE einzelne Datei auf deiner Website eine eigene HTTP-Anfrage senden.
Der Großteil der Ladezeit entsteht durch das Laden von Elementen wie:
- Bilder
- Stylesheets
- Skripts
Viele Dateien bedeutet viele HTTP-Anfragen und entsprechend langsames Laden.
Dein Entwickler kann die Anzahl der Anfragen herausfinden und auch, ob sie sich reduzieren lässt, bspw. über die Zusammenfassung mehrerer CSS-Dateien. Oder du befasst dich mit dem Plugin WP Fastest Cache.
Browser-Caching aktivieren
Ein Browser kann vorübergehend Daten auf dem Gerät deines Besuchers speichern. Beim erneuten Aufruf der Website müssen die Daten nicht neu geladen werden, das spart Zeit.
Dein Entwickler kann das Browser-Caching aktivieren. Auch hier: Du kannst dich mit dem Plugin WP Fastest Cache und den vielen einzelnen Einstellungen befassen.
JavaScript-Dateien asynchron laden
Beim Laden einer Website durch einen Browser werden die Elemente, das Material der Seite, von oben nach unten geladen.
Wenn eine JavaScript-Datei geladen werden muss, dann unterbricht der Browser das Laden aller anderen Elemente auf der Seite, bis diese Datei vollständig geladen worden ist. Das bedeutet, dass deine Besucher warten müssen, bis die Dateien geladen sind.
Wenn das JavaScript-Element aallerdings synchron lädt, kann der Browser es gleichzeitig mit den anderen Elementen laden. Asynchrone JavaScript-Dateien sorgen so für ein besseres Nutzererlebnis.
Auch hier: Dein Entwickler kann nachschauen, ob JavaScript-Dateien auf deiner Seite vor dem eigentlichen Seiteninhalt platziert sind und entsprechend die Ladezeit verlängern.
Wenn das der Fall ist, bitte deinen Entwickler, die Dateien am Ende deiner Seite zu platzieren.
Datenbank ausmisten
WordPress hat von Haus aus lediglich 12 Tabellen. Ich habe kürzlich Tabula rasa gemacht und dabei entdeckt, dass in der Datenbank mittlerweile 43 Tabellen waren.
Ich habe daraufhin die einzelnen Tabellen im Netz recherchiert und festgestellt, dass ganze 20 Tabellen (!) Reste waren, die entweder beim Deinstallieren von Plugins übrig geblieben sind oder beim Installieren von Plugin standardmäßig im Hintergrund mitinstalliert wurden, quasi für den Fall der Fälle. What?!
Also Datensicherung gemacht und radikal gelöscht. Das Beste? Datensicherung nicht gebraucht. Nun sind es 23 Tabellen. In einem weiteren Schritt habe ich mit MySQL-Anfragen gezielt bestimmte Dinge gesucht und gelöscht. Dazu schreibe ich demnächst einen Post.
Bilder-Kopien in WordPress unterbinden
Zum Schluss komme ich jetzt noch einmal auf die Bilder zurück. Das hier packe ich bewusst in die Tech-Eck, weil diese Optimierung dazu führen kann, dass du deine Website abschießt und du entsprechend Vorsorge treffen solltest.
Wenn du ein Bild in die Mediathek hochlädst, dann legt WordPress im Hintergrund viele verschiedene Größen an. In der Mediathek sind sie nicht zu sehen. Aber wenn du über FTP in den Ordner Uploads schaust, dann fällst du vielleicht vom Hocker. Da können bis zu acht Versionen desselben Bildes sein. Mich macht das wuschig. Ich optimiere meine Bilder lieber vor dem Hochladen, auch wenn es dann nicht für alle Endgeräte die optimalen Abmessungen hat. Aber die Datenmenge ist geringer. Und genau darum geht’s ja.
Schritt 1: Dashboard
Im ersten Schritt stellst du unter Einstellungen > Medien alles auf Null und speicherst.
Das reduziert die Anzahl der Kopien, aber es werden weiterhin welche angelegt. Es braucht also einen weiteren Schritt.
Schritt 2: functions.php
Obacht! Die functions.php ist ein zentraler Teil der Website. Ein falsches Zeichen, und deine komplette Website könnte abgeschossen sein. Mache also eine Datensicherung der Website und der Datenbank, bevor du das Folgende optimierst. Wenn das für dich nach böhmischen Dörfern klingt, melde dich gerne bei mir!
Dann packst du diesen Code in die functions.php, am besten im Child Theme:
add_filter('intermediate_image_sizes_advanced','stop_thumbs');
function stop_thumbs($sizes){
return array();
}Ergänze am besten noch einen Kommentar, damit du in Zukunft verstehst, was du mit diesen Zeilen umsetzt.
Damit hast du in Zukunft beim Hochladen nur das Originalbild ohne weitere Kopien. Jetzt brauchst du nur noch über FTP die Kopien im Ordner Uploads zu löschen. Und voilà, Ordnung gemacht.
Fazit
Eine Reduzierung der Ladezeit ist die Basis für eine gute Nutzererfahrung (UX). Lädt die Website schnell, bleiben Interessenten länger.
Die Optimierung ist kein Hexenwerk. Es gibt zahlreiche Stellschrauben, an denen du drehen kannst, um die Ladezeit zu verbessern.
Mit diesen Tipps solltest du eine flott ladende Website hinkriegen. Viel Spaß bei der Umsetzung und lass mich gerne wissen, wie es läuft.
Suchst du einen freiberuflichen UX Writer? Schreibe mir eine Nachricht. Ich würde mich gern mit dir darüber unterhalten, wie Worte dein Produkt verändern können.
