Presentazione di Discourse Splash - Un preloader visivo mostrato durante il caricamento delle risorse del sito

Annunci
,
1

Discourse è un’applicazione Javascript a pagina singola.

Ciò significa che la navigazione all’interno dell’app è incredibilmente veloce. Il compromesso con le moderne applicazioni web è che devono essere caricate e analizzate alla visualizzazione iniziale della pagina. Sebbene abbiamo lavorato molto nel corso degli anni per ottimizzare il modo in cui serviamo gli asset del sito, questo a volte può essere un po’ lento in base alle condizioni del dispositivo/rete.

Nelle ultime settimane, abbiamo lavorato attivamente e testato potenziali miglioramenti per l’attesa iniziale che gli utenti su connessioni/dispositivi lenti incontrano. Siamo lieti di annunciare che a partire da questo commit, i siti Discourse visualizzeranno ora una schermata di avvio mentre gli asset del sito vengono caricati.

Che aspetto ha?

Abbiamo abilitato questa funzionalità su Meta per un po’, quindi potresti averla già vista. In caso contrario, ecco come appare.

Come funziona?

Se un utente carica il tuo sito Discourse e Discourse non viene analizzato entro i prossimi due secondi, mostriamo la schermata di avvio. Quindi, si basa sul tempo di connessione + 2 secondi.

Non mostriamo la schermata di avvio agli utenti su dispositivi/connessioni veloci.

Come posso ottenerla?

Questa è una funzionalità nel core e l’impostazione è abilitata per impostazione predefinita, quindi tutto ciò che devi fare è aggiornare all’ultima versione. Se, per qualche motivo, hai sperimentato con l’impostazione che abbiamo aggiunto e non la vedi, assicurati di avere abilitata l’impostazione del sito splash_screen.

Quali sono i vantaggi?

Oltre a mostrare qualcosa agli utenti su dispositivi/connessioni lenti. Questa funzionalità riduce anche i ritardi FCP/LCP sui siti Discourse. Abbiamo creato alcuni strumenti interni per monitorare FCP/LCP su Meta, ed ecco come appaiono i risultati

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

C’è altro che dovrei sapere?

Il testo “loading” che viene visualizzato nella schermata di avvio si basa sulla stringa di traduzione preloader_text. La nostra community è stata fantastica e quel testo è già stato tradotto in molte lingue. Se preferisci che sia qualcosa di diverso, puoi personalizzare quella stringa su /admin/customize/site_texts?q=preloader_text sul tuo sito.

La schermata di avvio non ritarda in alcun modo il tuo sito e viene visualizzata solo mentre gli asset del sito vengono caricati. Una volta che il sito è pronto, la schermata di avvio viene rimossa immediatamente. Non c’è alcun ritardo tra il momento in cui il sito è pronto e la rimozione della schermata di avvio.

67 Mi Piace
2

Sarebbe interessante sapere se i tuoi dati interni corrispondono ai dati che Google Search Console ha a disposizione per il tuo CWV.

6 Mi Piace
3

Utilizziamo la libreria Web-Vitals di Google per le metriche interne, quindi corrisponderanno. È solo che le informazioni nella Search Console hanno un ciclo di feedback più ampio, quindi le abbiamo catturate noi stessi per iterare più velocemente sulla soluzione.

Puoi anche verificare i nuovi valori LCP utilizzando lo strumento WebPageTest.

11 Mi Piace
4

Sembra fantastico!

So che questo potrebbe sembrare un dettaglio da nerd, ma è possibile cambiare i colori dei cerchi sulla cosa di caricamento? :grin:

4 Mi Piace
5

Per coloro che desiderano modificare il loader, ecco il file:

10 Mi Piace
6

Lo splash si trova in uno scope CSS diverso, quindi purtroppo non sarai in grado di modificare il CSS tramite temi. Detto questo, abbiamo in programma dei miglioramenti e ho iniziato con questo.

Una volta che la modifica sarà attiva sul tuo sito, i punti dello splash utilizzeranno i colori del tuo tema attuale.

19 Mi Piace
7

Penso che invece di quell’animazione, per coerenza dovrebbe essere mostrato lo spinner predefinito di Discourse. Solo un’opinione, comunque.

2 Mi Piace
8

Bella funzionalità, l’ho avuta nell’ultimo aggiornamento.

Avrei pensato che una priorità, prima di preoccuparci dell’arredamento, fosse la sincronizzazione con il tema scuro; un’improvvisa esplosione di BIANCO a schermo intero usando il tema scuro è un attacco folle ai sensori ottici di chiunque, specialmente in una stanza buia! :face_with_spiral_eyes:

Per favore, aggiungi degli occhiali da sole :sunglasses: per mantenere la coerenza con il tema scuro.

3 Mi Piace
9

La mia comprensione è che sincronizziamo già lo sfondo scuro @Johani?

Il problema è che possono volerci un paio di secondi perché il server ci dica che stiamo trattando con un tema scuro, potremmo migliorare il secondo caricamento con la magia dei service worker, ma è un problema molto, molto complicato.

4 Mi Piace
10

Ho notato qualcosa dal mio ultimo post, quindi per qualificare - quando disconnesso, ho notato che Discourse rileva il tema del sistema operativo come scuro, imposta il sito Discourse come scuro in tandem e quindi anche la schermata di caricamento utilizza uno sfondo scuro per sincronizzarsi con lo stile del tema.

Tuttavia, quando si accede come utente con il tema scuro abilitato per impostazione predefinita, la schermata di caricamento torna bianca.

Quindi potrei avere ragione nel dire che funziona già al 50% come previsto. :disguised_face:

Non l’ho testato, forse qualcun altro potrebbe provarci.

2 Mi Piace
11

Sì, l’ho testato oggi, questo è il suo comportamento, funziona quando non si è connessi e poi passa a una schermata bianca quando si accede come utente con il tema SCURO impostato, se riesci a farlo comportare allo stesso modo di quando il tema viene rilevato per il tema scuro del sistema operativo, allora sarà a posto.

4 Mi Piace
12

Stranamente, sembra basarsi sul fatto che il mio sistema operativo sia impostato su modalità chiara o scura, e Discourse fa l’opposto di quanto mi aspetterei. In pratica, quando è impostato sulla modalità scura, Discourse lampeggia in bianco, ma quando è impostato sulla modalità chiara, Discourse mostra una pagina scura finché il contenuto non viene caricato.

Ecco la modalità scura. Nota che inizia scura (iOS in attesa di ricevere dati dal server), poi lampeggia in bianco (caricamento iniziale della pagina per Discourse, credo), poi carica il tema scuro che ho impostato:

Ed ecco la modalità chiara. Inizia bianca (iOS in attesa di ricevere dati dal server), poi diventa scura (caricamento iniziale della pagina per Discourse, credo), poi rimane nel tema scuro che ho impostato:

5 Mi Piace
13

Interessante! Grazie per i video, @Johani darà un’occhiata e riferirà.

7 Mi Piace
14

Sì, è proprio così, un esempio perfetto anche con il video!

Sapevo di non stare impazzendo! :crazy_face:

3 Mi Piace
17

@Johani Ho aggiornato l’ultimo commit con quello che presumo sia il fix, o un fix sperato, ma non sono sicuro che abbia fatto la differenza (iOS, Safari / macOS Safari)

La mia connettività è troppo buona al momento per replicarlo facilmente, fammi trovare una connessione dial-up o qualcosa del genere… :rofl:

3 Mi Piace
18

Su desktop, puoi limitare la tua connessione utilizzando gli strumenti per sviluppatori del tuo browser: How to perform Network Throttling in Chrome | BrowserStack

Non so invece per i browser mobili.

3 Mi Piace
19

Grazie, non uso Chrome ma darò un’occhiata agli strumenti xCode e configurerò un po’ di throttling.

Ho avuto un po’ più di tempo e posso confermare che rimane lo stesso.

3 Mi Piace
20

Questo è forse correlato ai flash bianchi, quindi lo posterò qui.

iPhone in modalità chiara, la barra superiore è scura. Questo è previsto poiché corrisponde al layout scuro di Discourse che utilizzo.

image
image750×1334 137 KB

iPhone in modalità scura, la barra superiore è chiara. Questo è inaspettato e, come il flash bianco, sembra indicare che qualcosa nel layout stia convincendo il telefono che la pagina sia bianca. Il motivo per cui lo dico è che Safari su iPhone cerca di colorare la barra superiore per abbinarla al colore principale del sito che stai visualizzando.

image
image750×1334 136 KB

4 Mi Piace
21

Lo abbiamo fatto, ma ci siamo persi il caso in cui l’utente imposta solo lo schema di colori normale come scuro. In precedenza ci siamo affidati alla preferenza del sistema operativo per scegliere tra la modalità chiara/scura per la schermata iniziale con l’ipotesi che gli utenti impostassero entrambi e utilizzassero l’interruttore del sistema operativo.

Ho implementato un paio di correzioni:

Se lo schema normale è scuro, usalo. Se è chiaro, usa lo schema chiaro per la modalità chiara del sistema operativo e lo schema scuro per la modalità scura del sistema operativo (se è impostato).

Il problema, così come questo:

dovrebbe essere risolto ora. Grazie per le segnalazioni :+1:

11 Mi Piace
22

:+1: Fantastico, non vedo l’ora di provarlo!

Suggerimento - Branding

È possibile consentire una personalizzazione di base del logo sopra i punti animati o popolare i “punti” con il logo (immagine di dimensioni fav.ico) o un’immagine a bassa risoluzione fissa (se il caricamento e la velocità sono un problema).

Un altro utente ha suggerito di ripristinare il cerchio di caricamento, che è un artefatto familiare di discourse, che ritengo un’idea ordinata, per coerenza UI/UX e sarebbe migliorata consentendo la specifica di un’immagine/logo statico di base del sito: mantiene l’utente orientato e localizzato durante lo stato di caricamento limbo, aumentando l’esperienza utente e la fiducia dell’utente.

Da aggiungere: recuperare l’immagine dall’impostazione di branding esistente, fav.ico o “logo piccolo” è probabilmente una buona opzione predefinita.

6 Mi Piace