Inge Bateman: UX Writing, Content und Konzeption

Eine Nadel, die auf einer Skala nach rechts ausschlägt und zeigt, dass z. B. die ladegeschwindigkeit einer Website schnell ist.

So verbesserst du die Ladezeit (+ User Experience) deiner Website

Als Nutzer ist das flotte Laden einer Seite im Internet so wie am Steuer eines PS-starken Autos zu sein. Speed macht Laune und man fühlt sich leicht und unabhängig.

Auch Such­ma­schinen legen Wert auf schnelle Lade­zeiten. Es ist eins der Krite­rien, das beim Ranking Gewicht hat. Das sind 2 gute Gründe, sich genauer mit dem Thema zu befassen.

Für wen ist dieser Artikel?

Diese Tipps sind für Redak­teure und Selbst­stän­dige, die ihre Website selber pflegen. Und für die, die mit einem Rein­fuchs-Mindset an tech­ni­sche Chal­lenges rangehen. Im letzten Abschnitt gebe ich ein paar Empfeh­lungen, die du entweder mit einem Entwickler oder selber umsetzen kannst.

Es geht in erster Linie 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 konkrette Kniffe, die du bei der Bereit­stel­lung von Inhalten beachten kannst.

Warum ist die Ladegeschwindigkeit deiner Website wichtig?

Eine langsam ladende Website ist der Haupt­grund, warum Besu­cher eine Seite wieder verlassen.

Schlechte Perfor­mance ist ein Conver­sion-Killer. Jeder Klick weg von deiner Seite ist eine vertane Chance, eine verpasste Gele­gen­heit, eine Buchung, die nicht gemacht wurde.

Die Lade­zeit ist zudem ein Ranking­faktor. Google rankt lang­same Webseiten schlechter in den SERPs, also den Suchmaschinenergebnissen.

Bereits 2015 wurde Google erst­mals häufiger von mobilen Endge­räten aufge­rufen als von Desktop-Geräten. Daher ist Google beson­ders daran inter­es­siert, Websites, die mobil schnell laden, in den vorderen Such­ergeb­nissen zu platzieren.

Für dich heißt das: Achte insbe­son­dere auf die mobile Ladezeit.

Jede Sekunde zählt

Deloitte Digital hat eine umfang­reiche Studie darüber gemacht, und gezeigt, dass sich eine schnelle Lade­zeit mobiler Websites grund­sätz­lich positiv darauf auswirkt, wie die Marke im Außen wahr­ge­nommen wird. Es belebt das Geschäft. Sie haben dazu welt­weit 37 Unter­nehmen unter die Lupe genommen, unter anderem die Post­bank, Ebay und TUI.

Um eine Basis für die Studie zu schaffen, zogen sie Zahlen von Google heran. 

Wenn die Ladezeit …

  • von 1 zu 3 Sekunden zunimmt,
    … dann steigt die Wahr­schein­lich­keit, dass ein Besu­cher abspringt um 32 %. 
  • von 1 zu 5 Sekunden zunimmt,
    … dann steigt die Wahr­schein­lich­keit, dass ein Besu­cher abspringt um 90 %. 
  • von 1 zu 6 Sekunden zunimmt,
    … dann steigt die Wahr­schein­lich­keit, dass ein Besu­cher abspringt um 106 %. 
  • von 1 zu 10 Sekunden zunimmt,
    … dann steigt die Wahr­schein­lich­keit, dass ein Besu­cher abspringt um 123 %. 

Ziel: Was ist eine gute Ladegeschwindigekeit?

Zwei, maximal drei Sekunden, dann sollte eine Webseite geladen sein, um eine ange­nehme User Expe­ri­ence zu erzielen. 

Wenn es nach Google geht, deut­lich schneller. Und da Google die größte Such­ma­schine der Welt ist und großen Einfluss auf deinen Erfolg haben kann, ist es nicht die schlech­teste Idee, dieser Richt­linie nachzukommen.

Speedtest: Status quo messen

Es gibt verschie­dene kosten­lose Tools, mit denen du die deine Website analy­sieren kannst. Ich nutze Page­Speed Insights oder Pingdom. In den Ergeb­nissen siehst du, was beim Aufrufen der Seite in welcher Reihen­folge geladen wird, wo’s flutscht und wo’s hängt.

Page­Speed Insights zeigt die Ergeb­nisse für Mobil und Desktop getrennt. Stan­dard­mäßig wird das Ergebnis für mobile Endge­räte angezeigt.

Bevor du was an deiner Website verän­derst, checke mit Page­Speed Insights den Status quo deiner Website. Gib im Tool deine Web-Adresse ein und messe die Leis­tungs­fä­hig­keit der Seite auf Mobil- und Desktop-Geräten.

Mache am besten 2 Screen­shots: 1x die Desktop-Ergeb­nisse und 1x die Ergeb­nisse der Mobil­ver­sion. Und nicht erschre­cken, hier ist selten auf Anhieb alles im grünen Bereich. 

Du bekommst eine Liste mit Opti­mie­rungs­mög­lich­keiten, mit denen sich die Lade­ge­schwin­dig­keit verbes­sern lässt. Manche Maßnahmen sind schnell umsetzbar, andere brau­chen etwas Zeit oder grund­le­gende Verän­de­rungen. Eines haben sie gemeinsam: Sie lohnen sich.

Bilder sind Ladezeit-Fresser 

Zu einer Word­Press-Website gehören Code (HTML, Java­Script und CSS), Text und Bilder. Manchmal mehr.

💡 Ein Bild belegt mehr Spei­cher­platz als 1.000 Worte.

Bild­da­teien sind oft der Haupt­grund, warum eine Website langsam lädt. Ein einzelnes nicht opti­miertes Bild kann ohne weiteres mehrere Mega­byte (MB) groß sein, insbe­son­dere wenn die Kamera gut ist. Ein MB entspricht 1.024 Kilo­byte (KB).

Das Ziel für einzelne Bilder der Website ist sie jeweils auf eine Datei­größe von unter 100 KB zu redu­zieren. Das geht nicht immer, aber meis­tens (wie du das hinkriegst, folgt im nächsten Abschnitt).

Oft machen Bilder zudem einen großen Anteil der Daten einer Webseite aus.

Im Screen­shot siehst du, dass der prozen­tuale Anteil von Bildern auf meiner Word­Press-Website derzeit etwa 50 % ist. Gemessen habe ich das mit dem kosten­losen Analyse-Tool Screa­ming Frog.

Die Website ist klein – sie hat etwa 20 Seiten und in der Media­thek sind nur ca. 60 Bilder. DIese sind alle opti­miert und auch die Mehr­fach-Kopien, die Word­Press von Haus aus anlegt, sind unter­bunden (Anlei­tung dazu im letzten Abschnitt). Dennoch machen Bilder die Hälfte der Daten­menge der Website aus.

Das zeigt, wie immens wichtig das Thema Bild-Opti­mie­rung für eine verbes­serte Lade­zeit ist.

Das Gute? Diesen Hebel hast du selbst in der Hand hat. Es ist keine Frage von tech­ni­schem Know-how, sondern eine von Prozess-Opti­mie­rung. Im Sinne von: vor jedem Hoch­laden eines Bildes es vorab in mehreren Schritten zu opti­mieren, mit dem Ziel, dass es kleiner als 100 KB ist.

Bildoptimierung: von MBs zu wenigen KBs

Setze Bilder minimalistisch ein

Du brauchst nicht zwin­gend viele Bilder auf deiner Website. Aller­dings machen Bilder neugierig, sie erzählen Geschichten und wecken Emotionen. Sie lockern eine Seite auf und geschickt plat­ziert, können sie sogar den Blick lenken. 

💡 Ein Bild sagt (manchmal) mehr als 1.000 Worte. 

Keine Frage, hoch­auf­lö­sende Fotos sehen auf einer Website super aus. Dennoch ist der spar­same Umgang mit Bildern ratsam, um die Datei­größe gering zu halten. Bei allem, was visuell ist – sei es ein Bild, eine Anima­tion oder ein Video – sollte am Anfang die Frage stehen: Ist dieses Bild notwendig oder verzichtbar? Dein Ziel sollte eine Website der Leicht­ge­wichts­klasse sein.

Wenn unnö­tige Assets entfernt werden, ist die Website über­sicht­li­cher und benö­tigt weniger Ladezeit. 

Mit Casca­ding Style Sheets (CSS) lassen sich übri­gens Layout, Formen, Farben und Effekte mit wenigen Zeilen Code darstellen. Dein Program­mierer freut sich bestimmt auf diese krea­tive Heraus­for­de­rung und Nutzer sparen Daten­vo­lumen, weil weniger Inhalte geladen werden müssen.

Wähle ein effizientes Bildformat

Es gibt jede Menge Bild­for­mate. Je nach Bild und Anwen­dung sind neben WebP die folgenden Formate für deine Website relevant:

JPEGFotos ohne Transparenz
PNGTrans­pa­rente Hintergründe
SVGSkalier­bare Symbole und Formen

Nutze für Fotos das JPG-Format und wähle beim Kompri­mieren die Qualität sehr hoch (80%). So kompri­mierst du die Datei, ohne dass es fürs mensch­liche Auge sichtbar ist.

Eine PNG-Datei macht dann Sinn, wenn du einen trans­pa­renten Hinter­grund hast. Da PNG-Dateien meist größer als JPG-Dateien sind, sollten sie ansonsten vermieden werden. Trans­pa­renz ist im JPG-Format grund­sätz­lich nicht möglich. Der Hinter­grund bekommt die Farbe Weiß und das funk­tio­niert nur auf einem weißen Hintergrund.

Logos, Symbole, Illus­tra­tionen und Icons soll­test du als SVG-Datei einbinden, also als Vektor­grafik. Sie sind ohne Quali­täts­ver­lust skalierbar und hinsicht­lich Bild­größe unschlagbar. Das Format ist nicht allen Systemen stan­dard­mäßig zuge­lassen. Es lässt sich aber beispiels­weise in Word­Press durch einen Code ermög­li­chen. Sprich also mit deinem Entwickler darüber.

Passe die Bildgröße an (Pixel)

Schau in die Test-Ergeb­nisse von Page­Speed Insights. Oft zeigt sich dort, dass es die Bild­da­teien sind, die die Lade­zeit ausbremsen. Das ändern wir jetzt.

In diesem Schritt redu­zierst du die Bild­größe, sprich die Breite und Höhe des Bildes. So lassen sich jede Menge zu ladende Bytes einsparen.

Das pauschal-perfekte Bild­größe für ein Bild gibt es nicht. Die Maße vari­ieren je nach Theme und indi­vi­du­ellem Design. Und sie unter­scheiden sich danach, wie du das Bild verwenden möchtest. 

Ein Blick in die Doku­men­ta­tion deines Themes lohnt sich, dort gibt es Empfeh­lungen zu Bildgrößen. 

Ich nutze Astra und bei diesem Theme ist die empfoh­lene Größe für das Beitrags­bild im Blog 1200px breit und 628px hoch. Das wird auch „Featured Image“ genannt und ist das Bild ganz oben, je nach Einstel­lung über oder unter der Überschrift.

Meine Bilder sind meis­tens im Quer­format und ich nutze die Breite des Beitrags­bildes (1200px) als Richt­linie für alle Bilder. Um es mir noch weiter zu verein­fa­chen, nutze ich in der Regel nur 3 Breiten. 

Bevor ich das Bild hoch­lade, über­lege ich, wie es einsetzen möchte. Je nach Anwen­dung nutze ich eins von diesen 3 Breiten:

  • 1200px (Beitrags­bild)
  • 600px (1/2 Spalte)
  • 400px (1/3 Spalte)

Wenn ich’s nicht bereits beim Desi­gnen in Figma bzw. Canva so ange­legt habe, dann nutze ich für das Verklei­nern der Bild­größe den Preview auf dem Mac. Hier stelle ich unter Tools > Größe anpassen die Breite auf 1200px und klicke das Kast­chen propor­tional skalieren. 

Mit dieser Reduk­tion 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 redu­zieren, ist die Kompri­mie­rung der Bilder. Hier gilt das Motto so viel wie möglich, ohne, dass das Bild schwammig wird.

In Word­Press kannst du das Plugin WP Smush instal­lieren, das Bild­daten, die du hoch­lädst, auto­ma­tisch kompri­miert. Ich nutze grund­sätz­lich so wenige Plugins wie möglich und kompri­miere meine Bilder mit dem kosten­losen Tool TinyPNG.

Ladegeschwindigkeit als KPI

Die Bild­op­ti­mie­rung ist eine einfache und kosten­güns­tige Möglich­keit, bessere Conver­sion-Raten auf deine Website zu erzielen. Damit der Erfolg aber auch lang­fristig anhält, muss die Website-Geschwin­dig­keit zu einer Leis­tungs­kenn­zahl werden, die du regel­mäßig im Blick hast. 

In meinem Kalender habe ich für jedem 1. des Monats einen Website-Termin stehen. Ich habe ein Google Sheet, in dem ich verschiede Kenn­zahlen doku­men­tiere. Die Lade­ge­schwin­dig­keit gehört dazu. Zahlen aus der Google Search Console und Google Analy­tics ebenso. 

Non-Bild-Tipps zur Verkürzung der Ladezeit

Plugins minimalistisch einsetzen

Mit Plugins wird die Funk­tio­na­lität von Word­Press erwei­tert. Sie wirken erst einmal richtig toll, viele sind es auch. Mit wenigen Klicks hat man eine Lösung für was, das man tech­nisch umsetzen möchte. Oft auch noch für Umme.

Es ist nach­voll­ziehbar, dass du aus Kosten­gründen vieles an deiner Webseite selbst einrichten möch­test und Plugins dafür einsetzt. Denn ohne tech­ni­sches Know-how stößt man bei der Umset­zung schnell an seine Grenzen.

Doch auch Plugins benö­tigen Ressourcen. Wenn du viele Plugins nutzt, kann da einiges zusammenkommen.

Du sollte nicht mehr Plugins einsetzen, als wirk­lich nötig und nicht mehr benö­tigte Plugins sollten gelöscht – und nicht nur deak­ti­viert – werden. Dafür gibt es jede Menge Gründe, einige davon haben unmit­telbar mit der Lade­ge­schwin­dig­keit der Website zu tun:

  • Viele Plugins spei­chern Infor­ma­tionen in der Daten­bank und füllen sie noch weiter auf. Manche legen sogar weitere Tabellen an, das bläht die Daten­bank auf. 
  • Beim Laden der Website erhöht sich entspre­chend die Anzahl der Daten­bank­zu­griffe, auch das beein­flusst die Ladegeschwindigkeit.
  • Zusätz­liche HTTP-Anfragen und erhöhter Daten­transfer haben die gleiche Wirkung.

Aber es gibt auch andere gute Gründe, wie etwa die Inkom­pa­ti­bi­lität zwischen PlugIns und Sicher­heits­ri­siken durch PlugIns.

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. Fern­ab­fragen macht.

Am besten sprichst du mit deinem Entwickler, wenn du dein System um eine Funk­tion erwei­tern möch­test. Mögli­cher­weise kann er dir ohne Plugin weiter­helfen oder dir zumin­dest 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 in Sachen Perfor­mance. Video­da­teien gehören nicht in die Media­thek. Hoste sie bei Youtube, Vimeo oder einem anderen Anbieter und bette sie dann auf deiner Website ein.

Das spart jede Menge Bytes und verhin­dert so, dass die Lade­zeit deiner Website ausge­bremst wird.

Verzichte auf Slider

Slider werden nicht mehr wahr­ge­nommen und sind mit dem vielen Bild­ma­te­rial regel­rechte Lade­zeit-Fresser. Es gibt mehrere Studien, die belegen, dass Slider mitt­ler­weile häufig igno­riert werden. Zudem sind sie nicht für mobile Endge­räte geeignet.

Gute Alter­na­tive sind:

  • Hero-Image
  • Ein geschickt plat­zierte Handlungsaufforderung
  • Krea­tive Bildelemente
  • Ein Anmelde- oder Leadformular

Webhost und ‑paket checken

Die Auswahl eines leis­tungs­starken Webhos­ting-Anbie­ters ist entschei­dend für die Geschwin­dig­keit, mit der deine Website lädt. Die verschie­denen Anbieter bringen unter­schied­liche Lade­zeiten mit sich.

Hier ist eine Liste der Webhoster mit den schnellsten Lade­zeiten (2023).

Auch das Hosting-Paket selbst ist von Bedeu­tung. Bei beson­ders güns­tigen Tarifen teilst du meis­tens den Server, auf dem deine Seite liegt, mit vielen anderen Nutzern. Je mehr sich da tummeln, desto lang­samer wird’s für alle.

Ist der jetzige Anbieter lahm, dann soll­test du lang­fristig die Website zu einen neuen Anbieter umziehen

Tech-Eck

Tech­nisch kann noch jede Menge gemacht werden, um die Lade­zeit weiter zu redu­zieren. Dein Entwickler kann dir sicher gut helfen. 

Wenn du die tech­ni­schen Verbes­se­rungen selber angehen willst, dann mache vorher eine Daten­si­che­rung der Website und Daten­bank. So vermei­dest du Daten­ver­lust, falls etwas schief­gehen sollte. Seite abschießen? Been there, done that.

HTTP-Anfragen minimieren

Jedes Mal, wenn eine Website aufge­rufen wird, laufen im Hinter­grund viele tech­ni­sche Vorgänge ab, HTTP-Anfragen gehören dazu. Dabei wird vom Webbrowser eine Datei ange­for­dert. Sobald der Server diese HTTP-Anfrage bekommt, antwortet der Server (im besten Fall flott) und liefert die gewünschten Dateien an den Browser (trans­fe­riert).

Und das ist der Knack­punkt. Denn der Browser muss für JEDE einzelne Datei auf deiner Website eine eigene HTTP-Anfrage senden. 

Der Groß­teil der Lade­zeit entsteht durch das Laden von Elementen wie:

  • Bilder
  • Style­sheets
  • Skripts

Viele Dateien bedeutet viele HTTP-Anfragen und entspre­chend lang­sames Laden.

Dein Entwickler kann die Anzahl der Anfragen heraus­finden und auch, ob sie die Zahl redu­zieren läßt, bspw. über die Zusam­men­fas­sung mehrerer CSS-Dateien. Oder du befasst dich mit dem Plugin WP Fastest Cache.

Browser-Caching aktivieren

Ein Browser kann vorüber­ge­hend Daten auf dem Gerät deines Besu­chers spei­chern. Beim erneutem Aufruf der Website müssen die Daten nicht neu geladen werden, das spart Zeit.

Dein Entwickler kann das Browser-Caching akti­vieren. Auch hier: du kannst dich mit dem Plugin WP Fastest Cache und die vielen einzelen Einstel­lungen befassen.

JavaScript-Dateien asynchron laden

Beim Laden einer Website durch einen Browser werden die Elemente das Mate­rial der Seite von oben nach unten geladen. 

Wenn eine Java­Script-Datei geladen werden muss, dann unter­bricht der Browser das Laden aller anderen Elemente auf der Seite, bis diese Datei voll­ständig geladen worden ist. Das bedeutet, dass deine Besu­cher warten müssen, bis die Dateien geladen sind.

Wenn das Java­Script-Element aaller­dings synchron lädt, kann der Browser es gleich­zeitig mit den anderen Elementen laden. Asyn­chrone Java­Script-Dateien sorgen so für ein besseres Nutzererlebnis.

Auch hier: dein Entwickler kann nach­schuen, ob Javas­ricpt-Dateien auf deiner Seite vor dem eigent­li­chen Seiten­in­halt plat­ziert sind und entspre­chend die Lade­zeit verlängern.

Wenn das der Fall ist, bitte deinen Entwickler, die Dateien am Ende deiner Seite zu platzieren.

Datenbank ausmisten

Word­Press hat von Haus aus 12 Tabellen. Ich habe kürz­lich Tabu­larasa gemacht und dabei entdeckt, dass in der Daten­bank mitt­ler­weile ganze 43 Tabellen waren.

Ich habe daraufhin die einzelnen Tabellen im Netz recher­chiert und fest­ge­stellt, dass ganze 20 Tabellen (!) Reste waren, die entweder beim Deinstal­lieren von Plugins übrig geblieben sind oder beim Instal­lieren von Plugin stan­dard­mäßig im Hinter­grund mitin­stal­liert wurden, quasi für den Fall der Fälle. What?!

Also Daten­si­che­rung gemacht und radikal gelöscht. Das Beste? Daten­si­che­rung nicht gebraucht. Nun sind es 23 Tabellen. In einem weiter Schritt habe ich mit MySQL-Anfragen gezielt bestimmt Dinge gesucht und gelscht. Dazu schreibe ich demnächst einen Post.

Bilder-Kopien in WordPress unterbinden

Zum Schluß komme ich jetzt nochmal auf die Bilder zurück. Das hier packe ich bewußt in die Tech-Eck, weil diese Opti­mie­rung dazu führen kann, dass du deine Website abschießt und du entspre­chend Vorsorge treffen solltest.

Wenn du ein Bild in die Media­thek hoch­lädst, dann legt Word­Press im Hinter­grund viele verschie­dene Größen an. In der Media­thek sind sie nicht zu sehen.

Wenn du über FTP in den Ordner Uploads schaust, dann fällst du viel­leicht vom Hocker. Da können bis zu 8 Versionen desselben Bildes sein. Mich macht das wuschig. Ich opti­miere meine Bilder lieber vor dem Hoch­laden, auch wenn es dann nicht für alle Endgerät die opti­male Abmes­sungen hat. Aber die Daten­menge ist geringer. Und genau darum geht’s ja.

Im ersten Schritt habe ich also unter Einstel­lungen > Medien alles auf null gestellt und gespeichert.

Das redu­ziert die Anzahl der Kopien, aber es werden weiterhin welche ange­legt. Es braucht also einen weiteren Schritt.

Im zweiten Schritt musst du an die functions.php Datei ran

An der functions.php zu arbeiten kann gene­rell ratz­fatz bedeuten, die Website abzu­schiessen. Mit einer Siche­rungs­kopie ist das stress­frei, sie kannst du ggf. einspielen. Wenn das für dich nach böhmi­schen Dörfern klingt, melde dich gerne.

Mache eine Daten­si­che­rung der Website und der Daten­bank bevor du das Folgende optimierst. 

Dann packe diesen Code in die functions.php, am besten im Child Theme und kommentiert:

add_filter('intermediate_image_sizes_advanced','stop_thumbs');
function stop_thumbs($sizes){
      return array();
}

Damit hast du in Zukunft beim Hoch­laden nur das Origi­nal­bild ohne weitere Kopien. Jetzt brauchst du nur noch über FTP die Kopien im Ordner Uploads zu löschen. Und voilá, Ordnung gemacht.

Fazit

Eine Redu­zie­rung der Lade­zeit ist die Basis für eine gute Nutzer­er­fah­rung (UX). Lädt die Website schnell, bleiben Inter­es­senten länger. 

Die Opti­mie­rung ist kein Hexen­werk. Es gibt jede Menge Stell­schrauben, an denen du drehen kannst, um die Lade­zeit zu verbessern.

Mit diesen Tipps soll­test du eine flott ladende Website hinkommen. Viel Spaß bei der Umset­zung und lass mich gerne wissen, wie es läuft. 


Suchst du einen frei­be­ruf­li­chen UX Writer? Schreibe mir eine Nach­richt. Ich würde mich gern mit dir darüber unter­halten, wie Worte dein Produkt verän­dern können.

Hashtag Team UX

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen