Discourse Splash vorgestellt – Eine visuelle Preloader, die angezeigt wird, während Website-Assets geladen werden

Ankündigungen
,
1

Discourse ist eine Single-Page-Javascript-Anwendung.

Das bedeutet, dass die Navigation innerhalb der App blitzschnell ist. Der Kompromiss bei modernen Webanwendungen ist, dass sie beim ersten Seitenaufruf geladen und geparst werden müssen. Obwohl wir im Laufe der Jahre viel Arbeit investiert haben, um die Auslieferung von Website-Assets zu optimieren, kann dies je nach Geräte-/Netzwerkbedingungen manchmal etwas langsam sein.

In den letzten Wochen haben wir aktiv an der Verbesserung der anfänglichen Wartezeit für Benutzer mit langsamen Verbindungen/Geräten gearbeitet und diese getestet. Wir freuen uns, Ihnen mitteilen zu können, dass ab diesem Commit Discourse-Websites nun einen Splashscreen anzeigen, während die Website-Assets geladen werden.

Wie sieht das aus?

Wir haben dies bereits seit einiger Zeit auf Meta aktiviert, daher haben Sie es vielleicht schon gesehen. Wenn nicht, hier ist, wie es aussieht.

Wie funktioniert es?

Wenn ein Benutzer Ihre Discourse-Website lädt und Discourse nicht innerhalb der nächsten zwei Sekunden geparst ist, zeigen wir den Splashscreen an. Es basiert also auf der Verbindungszeit + 2 Sekunden.

Wir zeigen den Splashscreen nicht für Benutzer auf schnellen Geräten/Verbindungen an.

Wie bekomme ich es?

Dies ist eine Kernfunktion, und die Einstellung ist jetzt standardmäßig aktiviert. Alles, was Sie tun müssen, ist auf die neueste Version zu aktualisieren. Wenn Sie aus irgendeinem Grund mit der von uns hinzugefügten Einstellung experimentiert haben und sie nicht sehen, stellen Sie sicher, dass die Website-Einstellung splash_screen aktiviert ist.

Was sind die Vorteile?

Neben der Anzeige von etwas für Benutzer auf langsamen Geräten/Verbindungen. Diese Funktion reduziert auch die FCP/LCP-Verzögerungen auf Discourse-Websites. Wir haben einige interne Tools entwickelt, um FCP/LCP auf Meta zu verfolgen, und hier sind die Ergebnisse:

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

Gibt es noch etwas, das ich wissen sollte?

Der “Lade”-Text, der im Splashscreen angezeigt wird, basiert auf dem Übersetzungsstring preloader_text. Unsere Community war fantastisch und dieser Text wurde bereits in viele Sprachen übersetzt. Wenn Sie möchten, dass er anders lautet, können Sie diesen String unter /admin/customize/site_texts?q=preloader_text auf Ihrer Website anpassen.

Der Splashscreen verzögert Ihre Website in keiner Weise und wird nur angezeigt, während die Website-Assets geladen werden. Sobald die Website bereit ist, wird der Splashscreen sofort entfernt. Es gibt keine Verzögerung zwischen der Bereitschaft der Website und dem Entfernen des Splashscreens.

67 „Gefällt mir“
2

Ich wäre daran interessiert zu erfahren, ob Ihre internen Daten mit den Daten übereinstimmen, die die Google Search Console für Ihre CWV gespeichert hat.

6 „Gefällt mir“
3

Wir verwenden die eigene Web-Vitals-Bibliothek von Google für die internen Metriken, sodass diese übereinstimmen. Es ist nur so, dass die Informationen in der Search Console eine breitere Rückkopplungsschleife haben, daher haben wir diese selbst erfasst, um schneller an der Lösung zu iterieren.

Sie können die neuen LCP-Werte auch mit dem WebPageTest-Tool überprüfen.

11 „Gefällt mir“
4

Das sieht großartig aus!

Ich weiß, das klingt vielleicht nach einem nerdigen Detail, aber ist es möglich, die Farben der Kreise im Ladebildschirm zu ändern? :grin:

4 „Gefällt mir“
5

Für diejenigen, die den Loader ändern möchten, hier ist die Datei:

10 „Gefällt mir“
6

Der Splashscreen befindet sich in einem anderen CSS-Scope, daher können Sie das CSS leider nicht über Themes ändern. Allerdings sind Verbesserungen geplant, und ich habe mit dieser begonnen.

Sobald die Änderung auf Ihrer Website live ist, verwenden die Splash-Punkte die Farben Ihres aktuellen Themes.

19 „Gefällt mir“
7

Ich denke, anstelle dieser Animation sollte der Standard-Discourse-Spinner zur Konsistenz angezeigt werden. Nur meine Meinung.

2 „Gefällt mir“
8

Schöne Funktion, habe sie jetzt im neuesten Upgrade.

Ich hätte gedacht, eine Priorität, bevor wir uns um die Dekoration kümmern, wäre, dass sie mit dem dunklen Thema synchronisiert wird. Ein plötzlicher Ausbruch von vollflächigem WEISS im dunklen Thema ist ein irrsinniger Angriff auf die optischen Sensoren, wenn man sich auch in einem dunklen Raum befindet! :face_with_spiral_eyes:

Bitte fügen Sie einige :sunglasses: hinzu, um die Konsistenz mit dem dunklen Thema zu wahren.

3 „Gefällt mir“
9

Mein Verständnis ist, dass wir den dunklen Hintergrund bereits synchronisieren, @Johani?

Das Problem ist, dass es ein paar Sekunden dauern kann, bis der Server uns mitteilt, dass wir es mit einem dunklen Thema zu tun haben. Wir könnten die zweite Ladung mit Service-Worker-Zauberei verbessern, aber es ist ein sehr, sehr kniffliges Problem.

4 „Gefällt mir“
10

Mir ist seit meinem letzten Beitrag etwas aufgefallen. Um es zu qualifizieren: Wenn ich abgemeldet bin, bemerke ich, dass Discourse das OS-Theme als dunkel erkennt, die Discourse-Seite synchron dazu dunkel einstellt und somit der Ladebildschirm ebenfalls eine dunkle Hintergrundfarbe verwendet, um sich an das Theme-Styling anzupassen.

Wenn ich mich jedoch als Benutzer anmelde, bei dem das dunkle Theme standardmäßig aktiviert ist, wechselt der Ladebildschirm zurück zu einem weißen Hintergrund.

Ich könnte also richtig liegen, wenn ich sage, dass es bereits zu 50 % wie erwartet funktioniert. :disguised_face:

Ich habe es nicht getestet, vielleicht kann es jemand anderes ausprobieren.

2 „Gefällt mir“
11

Ja, habe das heute getestet, so verhält es sich. Es funktioniert, wenn man abgemeldet ist, und zeigt dann einen weißen Bildschirm an, wenn man als Benutzer mit eingestelltem DUNKLEM Design angemeldet ist. Wenn es sich so verhält, wie wenn das Design für das dunkle OS-Design erkannt wird, dann sollte das alles sein.

4 „Gefällt mir“
12

Seltsamerweise scheint es davon abzuhängen, ob mein Betriebssystem auf hellen oder dunklen Modus eingestellt ist, und Discourse macht das Gegenteil von dem, was ich erwarten würde. Grundsätzlich, wenn auf dunklen Modus eingestellt, flackert Discourse weiß, aber wenn auf hellen Modus eingestellt, zeigt Discourse eine dunkle Seite an, bis der Inhalt geladen ist.

Hier ist der dunkle Modus. Beachten Sie, dass er dunkel beginnt (iOS wartet auf Daten vom Server), dann weiß flackert (ich glaube, die anfängliche Seitenladung für Discourse) und dann das dunkle Thema lädt, das ich eingestellt habe:

Und hier ist der helle Modus. Er beginnt weiß (iOS wartet auf Daten vom Server), wird dann dunkel (ich glaube, die anfängliche Seitenladung für Discourse) und bleibt dann im dunklen Thema, das ich eingestellt habe:

5 „Gefällt mir“
13

Interessant! Danke für die Videos, @Johani wird sich das ansehen und berichten.

7 „Gefällt mir“
14

Ja, das ist es, perfektes Beispiel auch mit Video!

Ich wusste, dass ich nicht verrückt wurde! :crazy_face:

3 „Gefällt mir“
17

@Johani Ich habe den letzten Commit mit dem aktualisiert, was ich für die Korrektur oder eine hoffnungsvolle Korrektur hielt, aber ich bin mir nicht sicher, ob es einen Unterschied gemacht hat (iOS, Safari / macOS Safari)

Meine Verbindung ist im Moment zu gut, um es leicht zu reproduzieren. Lassen Sie mich etwas Einwahlleitung oder so finden… :rofl:

3 „Gefällt mir“
18

Auf dem Desktop können Sie Ihre Verbindung über die Entwicklertools Ihres Browsers drosseln: How to perform Network Throttling in Chrome | BrowserStack

Ich weiß jedoch nichts über mobile Browser.

3 „Gefällt mir“
19

Danke, ich benutze Chrome nicht, aber ich werde mir die Xcode-Tools ansehen und eine Drosselung konfigurieren.

Ich hatte etwas mehr Zeit und kann bestätigen, dass es unverändert bleibt.

3 „Gefällt mir“
20

Dies hängt möglicherweise mit den weißen Blitzen zusammen, daher poste ich es hier.

iPhone im Lichtmodus, die obere Leiste ist dunkel. Dies ist zu erwarten, da es dem dunklen Discourse-Layout entspricht, das ich verwende.

image
image750×1334 137 KB

iPhone im Dunkelmodus, die obere Leiste ist hell. Dies ist unerwartet und scheint, wie der weiße Blitz, darauf hinzuweisen, dass etwas am Layout das Telefon davon überzeugt, dass die Seite weiß ist. Der Grund, warum ich das sage, ist, dass Safari auf dem iPhone versucht, die obere Leiste passend zur Hauptfarbe der von Ihnen angezeigten Website einzufärben.

image
image750×1334 136 KB

4 „Gefällt mir“
21

Das haben wir, aber wir haben den Fall übersehen, dass der Benutzer nur das normale Farbschema als dunkel einstellt. Zuvor haben wir uns auf die Betriebssystemeinstellung verlassen, um zwischen dem hellen/dunklen Modus für den Splashscreen zu wählen, mit der Annahme, dass Benutzer beides einstellen und den Betriebssystemschalter verwenden.

Ich habe ein paar Korrekturen vorgenommen

Wenn das normale Schema dunkel ist, verwende dieses. Wenn es hell ist, verwende das helle Schema für den hellen Betriebssystemmodus und das dunkle Schema für den dunklen Betriebssystemmodus (falls eingestellt).

Das Problem, sowie dieses hier

sollte jetzt behoben sein. Danke für die Berichte :+1:

11 „Gefällt mir“
22

:+1: Cool, ich freue mich darauf, das auszuprobieren!

Vorschlag – Branding

Ist es möglich, eine einfache Logo-Anpassung über den animierten Punkten zu erlauben oder die „Punkte“ mit dem Logo (fav.ico-Größe Bild) oder einer festen, niedrig aufgelösten, festen Größe zu füllen (falls Ladezeit und Geschwindigkeit ein Problem darstellen)?

Ein anderer Benutzer schlug vor, den Ladekreis zurückzugeben, der ein bekanntes Artefakt von Discourse ist, was meiner Meinung nach eine gute Idee für UI/UX-Konsistenz ist und durch die Möglichkeit, ein statisches Basisbild/Logo anzugeben, verbessert würde – es hält den Benutzer während des Schwebezustands der Ladezeit orientiert und verortet, was die Benutzererfahrung und das Vertrauen des Benutzers erhöht.

Hinzuzufügen – das Bild aus dem bestehenden Branding-Setup, fav.ico oder „logo small“ zu nehmen, ist wahrscheinlich eine gute Standardeinstellung.

6 „Gefällt mir“