Preloader auf der Website: Ist ein Ladebildschirm sinnvoll?

In diesem Leitfaden erklären Talha Aslan und Team Schritt für Schritt, wie wir über einen Preloader entscheiden. Zunächst betrachten wir, wie ein Ladebildschirm die Messwerte beeinflusst. Danach klären wir, wann er vertretbar ist, was Sie stattdessen nutzen und wie Sie die Einstellung für reduzierte Bewegung respektieren. Schließlich finden Sie am Ende eine Checkliste für Ihre eigene Website.

Was genau ist ein Preloader, und warum ist er so verbreitet?

Einen Preloader nennt man auch Ladebildschirm, Splash Screen oder Introanimation. Öffnet ein Besucher die Seite, sieht er ein Logo, einen drehenden Ring oder einen Prozentzähler. Erst wenn diese Ebene verschwindet, erscheint dann die eigentliche Seite. Technisch handelt es sich meist um eine Ebene, die über der Seite liegt und sich nach einem bestimmten Ereignis ausblendet.

Der Hauptgrund für die Verbreitung sind vor allem Vorlagen. Viele fertige Themes bieten den Preloader als Funktion an, die Sie mit einem Klick einschalten. Deshalb glauben Websitebetreiber, sie gewinnen einen eleganten Markenmoment beim Aufruf. Allerdings verzögert dieser Moment genau das, wofür der Besucher gekommen ist. Ein Preloader wirkt also wie eine optische Entscheidung, ist aber in Wahrheit eine Frage von Leistung und Bedienbarkeit.

• Drehender Ring oder Punkte: Die häufigste Form, ein Wartesignal ohne Inhalt.
• Logoanimation: Eine Introszene, in der das Markenlogo erscheint und verschwindet.
• Prozentzähler: Ein Zähler von 0 bis 100, der oft keinen echten Fortschritt zeigt.
• Vorhangeffekt: Eine Farbfläche, die zur Seite gleitet und die Seite freigibt.

Wie beeinflusst ein Preloader die gefühlte Geschwindigkeit?

Die gefühlte Geschwindigkeit beschreibt, wie schnell eine Seite dem Besucher vorkommt. Gemessene Zeit und gefühlte Zeit sind also nicht dasselbe. Zum Beispiel kommen Überschrift und Text vielleicht nach einer halben Sekunde an. Versteckt ein Preloader sie aber zwei Sekunden lang, hat der Besucher das Gefühl, zwei Sekunden gewartet zu haben.

Die Nielsen Norman Group beschreibt in ihrem Artikel über Antwortzeiten drei Grenzen. Eine Verzögerung von 0,1 Sekunden wirkt sofort, und 1 Sekunde unterbricht den Gedankenfluss nicht. Etwa 10 Sekunden markieren schließlich die Grenze der Aufmerksamkeit. Fortschrittsanzeigen gehören also zu langen Wartezeiten. Zeigen Sie bei kurzem Laden eine Animation im Vollbild, machen Sie das Warten erst sichtbar. Anders gesagt: Sie betonen das Problem, statt es zu lösen.

Außerdem verhindert ein Preloader meist, dass die Seite Stück für Stück erscheint. Sobald ein Besucher jedoch die Überschrift liest, vergisst er das Warten. Deshalb ziehen wir es immer vor, Inhalte früh zu zeigen, statt Besucher mit Animation hinzuhalten.

Zudem bleibt der Kopf des Besuchers beim Warten nicht untätig. Er fragt sich, ob die Seite überhaupt funktioniert. Kommen Inhalte schrittweise, stellt sich diese Frage gar nicht, denn die Seite zeigt vom ersten Moment an, dass sie reagiert.

Wie wirkt sich ein Preloader auf LCP aus?

LCP (Largest Contentful Paint) ist der Moment, in dem das größte sichtbare Inhaltselement im Viewport erscheint. In seinem Leitfaden zu LCP empfiehlt web.dev für eine gute Erfahrung höchstens 2,5 Sekunden. Zudem erklärt der Leitfaden, dass Sie den Wert am 75. Perzentil der Seitenaufrufe bewerten sollten.

Derselbe Leitfaden erklärt, dass Chromium Elemente mit einer Deckkraft von 0 nicht als LCP Kandidaten zählt, weil Nutzer sie nicht sehen. Elemente, die den gesamten Viewport bedecken, behandelt Chromium eher als Hintergrund. Daher können Überschrift und Bild hinter einem Preloader erst dann LCP Kandidaten werden, wenn die Ebene verschwindet. Folglich rutscht LCP an das Ende der Animation, auch wenn der Browser die Inhalte längst heruntergeladen hat.

Wenn Sie die vollständige Aufschlüsselung von LCP und die Optimierung im Detail interessiert, lesen Sie unseren Leitfaden zur LCP Optimierung. Hier betrachten wir deshalb nur den Zusammenhang mit dem Preloader.

Berührt ein Preloader auch die übrigen Core Web Vitals?

Ja, indirekt schon. Neben LCP gehören INP (Reaktion auf Interaktionen) und CLS (Layoutverschiebung) zu den Core Web Vitals. Den allgemeinen Rahmen haben wir in unserem Leitfaden zu den Core Web Vitals erklärt. Hier nennen wir daher nur die Punkte, an denen sich die Werte mit einem Preloader überschneiden.

• INP: Hält das Skript des Preloaders den Hauptthread beschäftigt, reagieren die ersten Klicks verzögert.
• CLS: Setzen sich Schriften oder Bildgrößen erst beim Ausblenden, springt die Seite.
• Gesamtlast: Eine Animationsbibliothek bringt zusätzlichen Code und zusätzliche Downloads.

Ein Beispiel: Ein Besucher tippt direkt nach dem Ausblenden auf das Menü, während die Animationsbibliothek noch arbeitet. Dann öffnet sich das Menü spät. Der Besucher hält die Seite folglich für eingefroren und tippt immer wieder auf dieselbe Schaltfläche.

Kurz gesagt ist ein Preloader nicht nur ein optischer Effekt von einer Sekunde. Er bedeutet zusätzlichen Code, zusätzliche Darstellungsarbeit und verspätete Inhalte. Noch klarer werden die Kosten, wenn Sie berücksichtigen, wie JavaScript die Ladezeit beeinflusst.

Erhöht ein Preloader die Absprungrate?

Eine genaue Prozentzahl wäre irreführend, denn jede Website hat eine andere Zielgruppe und andere Besucherquellen. Trotzdem ist die Logik klar. Sehen Besucher einen Wartebildschirm statt Inhalt, endet ihre Geduld früher. Mobil und bei schwacher Verbindung ist der Zurückknopf zudem immer nur einen Fingertipp entfernt.

Beispielszenario: Ein Besucher kommt über eine Anzeige und sieht statt der Produktseite ein drehendes Logo. Das Logo dreht sich dann drei Sekunden lang. Der Besucher kann nicht erkennen, ob die Seite abgestürzt ist oder noch lädt. Diese Unsicherheit bedeutet, dass ein Teil des Werbebudgets in Klicks fließt, die nie Inhalte sehen.

Weitere Wege, Besucher auf der Seite zu halten, haben wir im Artikel Absprungrate auf der Firmenwebsite senken zusammengestellt.

Was unterscheidet einen Preloader vom schrittweisen Laden?

Schrittweises Laden heißt: Sie zeigen den fertigen Teil der Seite sofort und ergänzen den Rest, sobald er ankommt. Ein Preloader macht das Gegenteil, denn er zeigt nichts, bis alles bereit ist. Die Tabelle vergleicht beide Ansätze mit dem Skeleton Screen, der dazwischen liegt.

Wie die Tabelle zeigt, ist schrittweises Laden für eine typische Website die richtige Grundeinstellung. Andererseits ist ein Skeleton Screen ein guter Mittelweg für Bereiche, die auf Daten warten.

Beispielszenario: Auf einer Leistungsseite kommen Überschrift und Einleitung fertig vom Server, die Bewertungen dagegen aus einer separaten Quelle. Beim schrittweisen Laden liest der Besucher sofort die Überschrift, und die Bewertungen erscheinen einen Moment später. Mit Preloader sieht er dagegen nichts, denn er wartet, bis die Bewertungen da sind. Somit bestimmt das langsamste Teil das Tempo der ganzen Seite.

Kann ein Skeleton Screen den Preloader ersetzen?

In den meisten Fällen ja, allerdings nur für den betreffenden Bereich. Ein Skeleton Screen zeigt das Layout mit grauen Kästen dort, wo später Inhalte erscheinen. Der Besucher versteht, wie die Seite aussehen wird, und das Warten wirkt kürzer. Entsprechen die Kästen den echten Maßen, verschiebt sich die Seite außerdem nicht, wenn Inhalte ankommen.

Breiten Sie den Skeleton Screen jedoch über die ganze Seite aus, haben Sie nur einen Preloader im neuen Kostüm. Teile, die fertig vom Server kommen, etwa Überschrift, Fließtext und Menü, sollten direkt erscheinen. Richtige Nutzung, typische Fehler und Gestaltungsdetails erklären wir im Artikel Was ist ein Skeleton Screen.

Auch ein Skeleton Screen hat eine zeitliche Grenze. Bleiben die Umrisse lange stehen, empfinden Besucher sie ebenfalls als Wartebildschirm. Deshalb empfehlen wir, ihn nur für Bereiche einzusetzen, die wirklich auf Daten warten, und nur kurz.

Wann ist ein Preloader vertretbar?

Wir behaupten nicht, dass ein Preloader immer falsch ist. In manchen Produkten passiert nichts, bevor eine große Menge an Ressourcen geladen ist. In solchen Fällen ist eine ehrliche Fortschrittsanzeige besser als ein leerer Bildschirm, der eingefroren wirkt.

• Browserspiele: Ohne Texturen, Sound und Leveldateien startet das Spiel nicht.
• Schwere Web Apps: Gestaltungswerkzeuge, 3D Konfiguratoren und kartenbasierte Dashboards.
• App Shell nach dem Login: Der Moment, in dem ein angemeldeter Nutzer auf Daten wartet.
• Große Dateiaufgaben: Vorgänge, die wirklich Zeit brauchen, etwa Videokonvertierung oder Uploads.

Der gemeinsame Nenner ist also einfach. In diesen Fällen ist der Inhalt nicht die Seite selbst, sondern eine Anwendung, die erst laden muss. Eine Unternehmensseite, ein Blogartikel oder eine Produktseite gehört nicht in diese Gruppe.

Selbst hier müssen Sie nicht die gesamte Oberfläche hinter einem einzigen Wartebildschirm verstecken. In einem Gestaltungswerkzeug zeigen Sie zum Beispiel zuerst das Menü und eine leere Arbeitsfläche und laden schwere Module im Hintergrund nach. So kann der Nutzer sich schon orientieren, und das Warten wirkt kürzer.

Wie gestalten Sie einen vertretbaren Preloader, und welche Regeln gelten?

Auch wenn ein Preloader wirklich nötig ist, verbessern einige Regeln die Erfahrung deutlich. Unser Team nutzt sie deshalb als Prüfliste bei der Gestaltung.

1. Zeigen Sie echten Fortschritt und verzichten Sie auf falsche Prozentzähler.
2. Blenden Sie die Ebene aus, sobald das Laden endet, ohne auf die Animation zu warten.
3. Legen Sie keine Mindestanzeigezeit fest, die Nutzer mit schneller Verbindung bestraft.
4. Sagen Sie in Worten, was gerade lädt, etwa die Spieldateien.
5. Bieten Sie bei langen Vorgängen eine Möglichkeit zum Abbrechen oder Zurückgehen.
6. Respektieren Sie immer die Einstellung für reduzierte Bewegung.

Die Grenze von 10 Sekunden der Nielsen Norman Group ist hier ein guter Anhaltspunkt. Nähert sich die Wartezeit diesem Wert, zeigt eine Prozentangabe oder ein Schritt dem Nutzer, dass er die Kontrolle behält. Zudem macht ein kurzer Hinweis, den man während des Wartens lesen kann, die Zeit sinnvoller.

Warum ist ein Preloader oft ein Zeichen für eine langsame Website?

Das Muster, das wir in der Praxis am häufigsten sehen, sieht so aus. Eine Website lädt langsam, also baut jemand einen Ladebildschirm ein, um das zu verbergen. Danach sieht der Besucher eine ordentliche Animation statt einer halb geladenen, kaputt wirkenden Seite. Allerdings löst dieser Ansatz das Problem nicht, er verschiebt es nur.

Die Ursachen sind meist bekannt: große unkomprimierte Bilder, viele Plugins beim Laden, eine langsame Serverantwort und unnötige Schriftdateien. Beheben Sie diese Punkte, öffnet sich die Seite von selbst schnell. Daher ist der Moment, in dem Sie einen Preloader zu brauchen glauben, eigentlich der Moment für eine Leistungsprüfung.

Deshalb stellen wir bei einem Wunsch nach Preloader zuerst eine einfache Frage. Warum muss die Seite überhaupt warten lassen? Die Antwort hat zudem meist mit der Technik zu tun, nicht mit Gestaltung.

Wie erleben mobile Nutzer einen Preloader?

Testen Sie am Desktop mit schneller Verbindung, huscht der Preloader oft in einem Augenblick vorbei. Folglich bemerken Teams das Problem nicht. Ein großer Teil der Besucher kommt jedoch mit dem Smartphone und wechselnder Mobilverbindung.

Auf dem Smartphone läuft das Animationsskript auf einem schwächeren Prozessor länger. Außerdem laden Ressourcen bei schwacher Verbindung langsamer. Somit kann aus einem Intro von einer Sekunde am Desktop ein Wartebildschirm von mehreren Sekunden auf dem Smartphone werden.

• Langsamerer Prozessor: Animationen und Skripte laufen länger.
• Wechselnde Verbindung: Ladezeiten sind schwer vorherzusagen.
• Kleiner Bildschirm: Eine Ebene im Vollbild bedeckt alles und bietet keinen Ausweg.
• Wenig Geduld: Am Smartphone ist der Zurückknopf immer nur einen Fingertipp entfernt.

Deshalb empfehlen wir, die Entscheidung über einen Preloader immer mit einem langsamen Mobilprofil zu testen.

Warum schadet ein falscher Prozentzähler dem Vertrauen?

In vielen Themes misst der Prozentzähler keine echten Downloads. Er zählt stattdessen einfach in fester Zeit von null bis hundert. Besucher merken das allerdings schnell. Mal bleibt der Zähler bei 99 Prozent hängen, mal zählt er weiter, obwohl die Inhalte längst bereit sind.

Das erzeugt somit einen kleinen, aber echten Vertrauensverlust. Der Besucher spürt, dass die Seite ihm nicht die Wahrheit sagt. Andererseits macht ein Balken, der echten Fortschritt zeigt, das Warten sinnvoll und verrät ehrlich, wie viel noch fehlt.

Bei einem wirklich langen Ladevorgang, etwa in einem Spiel, hilft zum Beispiel ein Balken auf Basis der geladenen Dateien. Kurz gesagt: Nutzen Sie eine Fortschrittsanzeige, dann koppeln Sie sie an echte Daten oder lassen Sie sie weg. Bei ungewisser Wartezeit ist ein schlichter Statustext stets ehrlicher als eine erfundene Prozentzahl.

Warum ist die Einstellung für reduzierte Bewegung beim Preloader wichtig?

Manche Nutzer aktivieren in ihrem Betriebssystem die Einstellung, Bewegung zu reduzieren. Dahinter können echte Beschwerden stehen, etwa Schwindel, Übelkeit oder Ablenkung. Konkret geben Browser diese Präferenz über eine Media Query an Websites weiter (prefers reduced motion).

In der Erläuterung zu WCAG 2.3.3 Animation from Interactions nennt das W3C diese Abfrage als ausreichende Technik. Das Kriterium liegt auf Stufe AAA und ist also nicht das verpflichtende Minimum. Trotzdem empfehlen wir, es als solides Gestaltungsprinzip zu behandeln.

In der Praxis ist unser Vorgehen einfach. Ist reduzierte Bewegung aktiv, schalten wir drehende und gleitende Animationen ab und zeigen stattdessen einen festen Text oder einen schlichten Fortschrittsbalken. So erhält der Nutzer weiterhin Informationen, doch die störende Bewegung fällt weg.

Begrenzen Sie die Einstellung zudem nicht auf den Preloader. Denn Seitenübergänge, gleitende Bilder und Parallaxeffekte können dieselben Nutzer stören. Daher sorgt es für ein stimmigeres Ergebnis, wenn Sie die Präferenz an Ihre allgemeinen Animationsregeln koppeln.

Birgt ein Preloader weitere Risiken bei der Barrierefreiheit?

Ja. WCAG 2.2.2 Pause, Stop, Hide betrifft bewegte Inhalte, die automatisch starten, länger als fünf Sekunden laufen und neben anderen Inhalten erscheinen. Für solche Inhalte brauchen Nutzer eine Möglichkeit zum Anhalten. Das Kriterium liegt zudem auf Stufe A. Details finden Sie auf der Erläuterungsseite des W3C.

Ein kurzer Preloader bleibt meist unter dieser Grenze. Andererseits kann sich das ändern, wenn sich die Animation bei langsamer Verbindung hinzieht. Zudem sieht ein Besucher mit Screenreader die Animation nicht, also sollten Sie den Wartezustand als Text ankündigen. Den größeren Rahmen beschreibt unser Artikel zur barrierefreien Website nach WCAG und BFSG.

Was sollten Sie statt eines Preloaders auf Ihrer Website einsetzen?

Das eigentliche Ziel ist nicht nur, den Preloader zu entfernen, sondern das Warten überflüssig zu machen. Übernehmen wir eine Website, klären wir zuerst, warum die Seite spät erscheint. Die Animation ist dabei meist nur ein Vorhang vor der Langsamkeit.

• Kritische Inhalte zuerst senden: Überschrift, Fließtext und erstes Bild kommen fertig vom Server.
• Bilder richtig dimensionieren: Komprimieren Sie das Hauptbild im Viewport und liefern Sie es in passender Größe.
• Unsichtbares verschieben: Nutzen Sie Lazy Loading für Bilder weiter unten.
• Unnötige Skripte entfernen: Verschieben Sie Code, der beim Laden nicht laufen muss.
• Schriften planen: Text bleibt sichtbar, während Schriften laden.

Wo Lazy Loading hilft und wo es schadet, erklären wir in unserem Leitfaden zu Lazy Loading. Nach diesen Schritten wirkt die Seite bereits schnell, und der Bedarf an einem Preloader verschwindet von selbst.

Beispielszenario: Auf einer Firmenwebsite wiegt das Titelbild mehrere Megabyte, und fünf Plugins laufen beim Laden. Komprimieren Sie das Bild auf die richtige Größe und schalten Sie unnötige Plugins ab, beschleunigt sich die Seite spürbar. Dann ist der Preloader nur noch eine überflüssige Verzögerung.

Verändert das Entfernen des Preloaders das Aussehen Ihrer Website?

Meist nicht. In manchen Themes verdeckt der Preloader allerdings Layoutprobleme. Lädt etwa eine Schrift spät und der Text springt, lässt sich das hinter dem Vorhang leicht verstecken. Sobald der Vorhang fällt, zeigt sich dann das Problem.

Prüfen Sie die Seite nach dem Entfernen deshalb immer mit eigenen Augen, mobil und bei langsamer Verbindung. Sehen Sie Verschiebungen, behandeln Sie diese als Layoutverschiebung; unser Leitfaden zum Beheben von CLS hilft dabei. Zudem zeigt Ihnen unser Test auf Mobilfreundlichkeit schnell, wie die Seite auf einem kleinen Bildschirm aussieht.

Haben sich hinter Ihrem Preloader solche Layoutprobleme angesammelt, ist ein sauberer Neuaufbau dieses Bereichs oft der kürzeste Weg. Im Rahmen unseres Webdesign Service bauen wir den ersten Eindruck so neu auf, dass Inhalte zuerst kommen. Ein Angebot fordern Sie über das Formular auf der Leistungsseite an.

Woran erkennen Sie, ob Ihre Website einen Preloader hat?

Manchmal wissen Websitebetreiber gar nicht, dass ein Preloader aktiv ist. Er stammt also noch aus der Einrichtung des Themes. Deshalb bringt eine kurze Prüfung Klarheit.

1. Öffnen Sie die Seite in einem privaten Fenster und achten Sie auf die ersten Sekunden.
2. Drosseln Sie in den Entwicklertools des Browsers das Netzwerk auf ein langsames Mobilprofil.
3. Laden Sie die Seite neu. Sehen Sie vor dem Inhalt ein Logo, einen Ring oder eine Farbfläche, haben Sie einen Preloader.
4. Suchen Sie in den Einstellungen von Theme oder Page Builder nach einer Option für den Ladebildschirm.
5. Prüfen Sie im Leistungsbericht, wann das LCP Element erscheint.

Beispielszenario: In einem fertigen Theme ist der Inhalt vielleicht nach einer halben Sekunde bereit, trotzdem zeigt das Theme den Ladebildschirm mindestens anderthalb Sekunden. Dann bringt schon das Abschalten der Einstellung einen deutlichen Unterschied.

Auch der Quelltext liefert Hinweise. Zudem geben die meisten Page Builder der Ladeebene einen erkennbaren Klassennamen. Sind Sie unsicher, fragen Sie Ihren Entwickler, welche Einstellung diesen Bildschirm aktiviert.

Beeinflusst ein Preloader die SEO direkt?

Google berücksichtigt die Nutzererfahrung auf der Seite in seinen Rankingsystemen, beschreibt sie aber nicht als einzelnes entscheidendes Signal. Ein Preloader allein drückt Ihre Website also nicht nach unten. Verzögert er aber LCP und vertreibt Besucher früh, schwächt er sowohl Ihre Messwerte als auch Ihre Conversions.

Außerdem können Suchmaschinen Inhalte aus dem HTML lesen. Der Text hinter dem Vorhang bleibt in diesem Sinne meist lesbar. Komplizierter wird es allerdings, wenn Inhalte erst nach einem Skript erscheinen. Kurz gesagt liegt das eigentliche SEO Risiko nicht im Preloader selbst, sondern in der späten, skriptabhängigen Inhaltsstruktur, die ihn oft begleitet. Die Rolle der Geschwindigkeit im Ranking beleuchten wir ausführlicher im Artikel Wie beeinflusst die Ladezeit die SEO.

Googles allgemeinen Ansatz finden Sie in der Dokumentation zur Nutzererfahrung auf Search Central. Sie betont, dass gute Nutzererfahrung nicht an einem einzigen Messwert hängt und die Qualität der Inhalte Vorrang hat.

Wie entscheiden Sie über einen Preloader im Onlineshop und auf Firmenwebsites?

Für diese beiden Arten von Websites lautet unsere Antwort fast immer gleich: kein Preloader. Besucher kommen, um ein Produkt oder eine Leistung zu sehen, nicht um eine Markenanimation anzuschauen. Gerade bei Anzeigentraffic erhöht jede Sekunde Warten das Risiko, dass ein bezahlter Klick verpufft.

Stattdessen vermitteln wir das Markengefühl über die Seite selbst. Eine klare Überschrift oben, ein sorgfältig gewähltes Bild und stimmige Farben hinterlassen einen stärkeren ersten Eindruck als jede Introanimation. Zudem entsteht dieser Eindruck, ohne dass jemand warten muss.

Wünschen Sie einen weichen Übergang zwischen Seiten, wählen Sie einen kleinen, schnellen Übergang statt einer Ebene im Vollbild. So bewahren Sie das Markengefühl und verstecken nie Inhalte.

Im E-Commerce besuchen Kunden außerdem meist mehrere Seiten. Ein Ladebildschirm, der bei jedem Seitenwechsel wiederkehrt, unterbricht den Einkauf ständig. Deshalb empfehlen wir, den Preloader auf Kategorie und Produktseiten komplett abzuschalten.

Welche Fragen helfen bei der Entscheidung über einen Preloader?

Die folgenden Fragen erleichtern zunächst die Entscheidung. Lautet die Antwort meist nein, brauchen Sie keinen Preloader.

• Muss die Seite eine große Anwendung laden, bevor der Nutzer etwas tun kann?
• Dauert das Warten wirklich länger als einige Sekunden?
• Können wir echten Fortschritt messen und zeigen?
• Ist es unmöglich, Teilinhalte zu zeigen?
• Gibt es eine schlichte Version für Nutzer mit reduzierter Bewegung?

Bei einem Browserspiel beantworten Sie zum Beispiel die meisten Fragen mit ja. Bei der Website einer Zahnarztpraxis oder einer Kanzlei lautet die Antwort dagegen überall nein. Dieser Kontrast zeigt also, wie eindeutig die Entscheidung tatsächlich ist.

Stellen Sie diese Fragen schon in der Gestaltungsphase, sparen Sie spätere Korrekturen. Entfernen Sie den Preloader erst auf einer laufenden Website, müssen Sie gleichzeitig alles beheben, was er verdeckt hat. In der Gestaltungsphase bauen Sie den ersten Eindruck dagegen gleich mit Inhalten zuerst, und diese Altlast entsteht gar nicht.

Preloader Checkliste: Was sollten Sie auf Ihrer Website prüfen?

Nutzen Sie die folgende Liste vor dem Start oder bei der Überprüfung Ihrer bestehenden Website.

1. Ist der Preloader wirklich nötig oder ein Überbleibsel des Themes?
2. Verschwindet die Ebene, sobald die Inhalte bereit sind?
3. Gibt es eine Mindestanzeigezeit? Falls ja, entfernen Sie sie.
4. Bleibt das LCP Element hinter der Ebene verborgen?
5. Stoppt die Animation bei aktivierter reduzierter Bewegung?
6. Hört ein Screenreader den Wartezustand als Text?
7. Lässt sich Bewegung anhalten, die länger als fünf Sekunden dauert?
8. Verschiebt sich das Layout beim Ausblenden der Ebene?
9. Ist die Erfahrung mobil und bei langsamer Verbindung akzeptabel?
10. Wäre ein Skeleton Screen für Bereiche mit Datenwartezeit die bessere Wahl?

Erhalten Sie in dieser Liste mehr als ein Nein, empfehlen wir, den Preloader zu entfernen und die Ursachen zu beheben. Zudem lohnt es sich, die Liste nach jeder größeren Designänderung erneut durchzugehen, denn neue Plugins und Themeupdates können den Ladebildschirm still wieder einschalten.

Wie messen Sie das Ergebnis, nachdem Sie den Preloader entfernt haben?

Um die Wirkung zu sehen, vergleichen Sie dieselben Messwerte vorher und nachher. Labortests liefern schnelles Feedback, echte Nutzerdaten sammeln sich dagegen über einige Wochen.

• Labortest: Testen Sie dieselbe Seite mit denselben Einstellungen und notieren Sie den LCP Wert.
• Felddaten: Geben Sie den echten Nutzerdaten Zeit, sich zu verändern.
• Verhaltensdaten: Beobachten Sie in der Analyse, wie sich Sitzungen ohne Interaktion entwickeln.

Entscheiden Sie allerdings nicht anhand einer einzigen schwankenden Woche. Kampagnen, Saison und Besucherquellen verändern die Zahlen. Daher ist es sicherer, vergleichbare Zeiträume gegenüberzustellen.

Beispielrechnung: Vergleichen Sie die vier Wochen davor mit den vier Wochen danach, jeweils mit denselben Besucherquellen. So trennen Sie Kampagneneffekte besser. Ist das Ergebnis weniger klar als erwartet, prüfen Sie auch weitere Geschwindigkeitsprobleme der Seite.

Sollen wir den ersten Eindruck Ihrer Website gemeinsam aufbauen?

Auf den meisten Websites wirkt ein Preloader wie ein kleines Gestaltungsdetail. Dahinter stehen jedoch Entscheidungen über Geschwindigkeit, Barrierefreiheit und Conversion. Gestalten wir eine neue Website, planen wir den ersten Eindruck mit Inhalten zuerst und richten für schwere Bereiche Skeleton Screens und schrittweises Laden ein.

Hat Ihre bestehende Website einen Ladebildschirm und zeigen sich beim Entfernen Probleme, bauen wir diesen Bereich für Sie auf. Füllen Sie das Angebotsformular auf unserer Leistungsseite zum Webdesign aus, dann prüfen wir Ihre Website und erstellen ein Angebot mit Umfang und Zeitplan.

In unserem Angebot führen wir jeden Schritt einzeln auf: das Entfernen des Preloaders, das Vorziehen kritischer Inhalte, das Aufräumen von Bildern und Skripten sowie die Unterstützung für reduzierte Bewegung. So wissen Sie von Anfang an, wofür Sie zahlen und welches Ergebnis wir anstreben.