Présentation de Discourse Splash - un préchargeur visuel affiché pendant le chargement des ressources du site

Annonces
,
1

Discourse est une application Javascript monopage.

Cela signifie que la navigation dans l’application est extrêmement rapide. Le compromis avec les applications web modernes est qu’elles doivent être chargées et analysées lors de la première visualisation de la page. Bien que nous ayons beaucoup travaillé au fil des ans pour optimiser la façon dont nous servons les actifs du site, cela peut parfois être un peu lent en fonction des conditions de l’appareil/réseau.

Au cours des dernières semaines, nous avons activement travaillé et testé des améliorations potentielles pour le temps d’attente initial rencontré par les utilisateurs sur des connexions/appareils lents. Nous sommes heureux d’annoncer qu’à partir de ce commit, les sites Discourse afficheront désormais un écran de démarrage pendant le chargement des actifs du site.

À quoi cela ressemble-t-il ?

Nous avons activé cela sur Meta depuis un certain temps, vous l’avez donc peut-être déjà vu. Sinon, voici à quoi cela ressemble.

Comment ça marche ?

Si un utilisateur charge votre site Discourse, et que Discourse n’est pas analysé dans les deux secondes suivantes, nous affichons l’écran de démarrage. Donc, c’est basé sur le temps de connexion + 2 secondes.

Nous n’affichons pas l’écran de démarrage pour les utilisateurs sur des appareils/connexions rapides.

Comment puis-je l’obtenir ?

C’est une fonctionnalité du cœur de Discourse, et le paramètre est activé par défaut maintenant, donc tout ce que vous avez à faire est de mettre à jour vers la dernière version. Si, par hasard, vous avez expérimenté avec le paramètre que nous avons ajouté et que vous ne le voyez pas, assurez-vous que le paramètre du site splash_screen est activé.

Quels sont les avantages ?

En plus d’afficher quelque chose aux utilisateurs sur des appareils/connexions lents. Cette fonctionnalité réduit également les retards FCP/LCP sur les sites Discourse. Nous avons créé des outils internes pour suivre le FCP/LCP sur Meta, et voici à quoi ressemblent les résultats :

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

Y a-t-il autre chose que je devrais savoir ?

Le texte “loading” qui s’affiche dans l’écran de démarrage est basé sur la chaîne de traduction preloader_text. Notre communauté a été fantastique, et ce texte a déjà été traduit dans de nombreuses langues. Si vous préférez qu’il soit différent, vous pouvez personnaliser cette chaîne sous /admin/customize/site_texts?q=preloader_text sur votre site.

L’écran de démarrage ne retarde en aucun cas votre site et ne s’affiche que pendant le chargement des actifs du site. Une fois le site prêt, l’écran de démarrage est immédiatement supprimé. Il n’y a aucun délai entre le moment où le site est prêt et la suppression de l’écran de démarrage.

67 « J'aime »
2

Je serais intéressé de savoir si vos données internes correspondent aux données que Google Search Console a enregistrées pour votre CWV.

6 « J'aime »
3

Nous utilisons la propre bibliothèque Web-Vitals de Google pour les métriques internes, elles correspondront donc. C’est juste que les informations sur la console de recherche ont une boucle de rétroaction plus large, nous les avons donc capturées nous-mêmes afin d’itérer plus rapidement sur la solution.

Vous pouvez également vérifier les nouvelles valeurs LCP à l’aide de l’outil WebPageTest.

11 « J'aime »
4

Cela semble excellent !

Je sais que cela peut paraître un détail pointilleux, mais est-il possible de changer les couleurs des cercles sur l’indicateur de chargement ? :grin:

4 « J'aime »
5

Pour ceux qui souhaitent modifier le chargeur, voici le fichier :

10 « J'aime »
6

L’écran de démarrage réside dans une portée CSS différente, vous ne pourrez donc malheureusement pas modifier le CSS via les thèmes. Cela dit, nous avons prévu des améliorations, et j’ai commencé par celle-ci.

Une fois que le changement sera en ligne sur votre site, les points de l’écran de démarrage utiliseront les couleurs de votre thème actuel.

19 « J'aime »
7

Je pense qu’au lieu de cette animation, le spinner par défaut de Discourse devrait être affiché par souci de cohérence. Ce n’est qu’une opinion, cependant.

2 « J'aime »
8

Belle fonctionnalité, je l’ai maintenant dans la dernière mise à niveau.

J’aurais pensé qu’une priorité avant de nous soucier de la décoration serait qu’elle se synchronise avec le thème sombre. Une explosion soudaine de blanc plein écran en utilisant le thème sombre est une attaque insensée sur les capteurs optiques de quelqu’un, surtout dans une pièce sombre ! :face_with_spiral_eyes:

Veuillez ajouter des :sunglasses: pour maintenir la cohérence avec le thème sombre.

3 « J'aime »
9

Ma compréhension est que nous synchronisons déjà le fond sombre @Johani ?

Le problème est que le serveur peut mettre quelques secondes à nous indiquer que nous avons affaire à un thème sombre. Nous pourrions améliorer le second chargement avec la magie des service workers, mais c’est un problème très, très délicat.

4 « J'aime »
10

J’ai remarqué quelque chose depuis mon dernier message. Pour préciser : lorsque je suis déconnecté, j’ai remarqué que Discourse capte le thème de l’OS comme sombre, définit le site Discourse comme sombre en parallèle et donc l’écran de chargement utilise également une couleur de fond sombre pour synchroniser avec le style du thème.

Cependant, lorsque je suis connecté en tant qu’utilisateur pour qui le thème sombre est activé par défaut, il revient à un écran de chargement blanc.

Je pourrais donc avoir raison de dire que c’est déjà 50% fonctionnel comme prévu. :disguised_face:

Je ne l’ai pas testé, peut-être que quelqu’un d’autre pourrait essayer.

2 « J'aime »
11

Oui, j’ai testé cela aujourd’hui, c’est ainsi que cela se comporte, cela fonctionne lorsque je suis déconnecté, puis cela affiche un écran blanc par défaut lorsque je suis connecté en tant qu’utilisateur avec le thème SOMBRÉ défini, si vous pouvez faire en sorte que cela se comporte de la même manière que lorsque le thème est détecté pour le thème Sombré de l’OS, alors ce sera parfait.

4 « J'aime »
12

Étrangement, cela semble basé sur le fait que mon système d’exploitation est réglé sur le mode clair ou sombre, et Discourse fait le contraire de ce à quoi je m’attendrais. En gros, lorsqu’il est réglé sur le mode sombre, Discourse clignote en blanc, mais lorsqu’il est réglé sur le mode clair, Discourse affiche une page sombre jusqu’à ce que le contenu se charge.

Voici le mode sombre. Notez qu’il commence sombre (iOS attendant d’obtenir les données du serveur), puis clignote en blanc (chargement initial de la page pour Discourse, je pense), puis charge le thème sombre que j’ai défini :

Et voici le mode clair. Il commence blanc (iOS attendant d’obtenir les données du serveur), puis devient sombre (chargement initial de la page pour Discourse, je pense), puis reste dans le thème sombre que j’ai défini :

5 « J'aime »
13

Intéressant ! Merci pour les vidéos, @Johani va y jeter un œil et fera un retour.

7 « J'aime »
14

Oui, c’est ça, parfait exemple avec vidéo aussi !

Je savais que je n’étais pas fou ! :crazy_face:

3 « J'aime »
17

@Johani J’ai mis à jour le dernier commit avec ce que je pensais être le correctif, ou un correctif potentiel, mais je ne suis pas sûr que cela ait fait une différence (iOS, Safari / macOS Safari)

Ma connectivité est trop bonne pour le reproduire facilement, laissez-moi trouver une connexion RTC ou quelque chose comme ça… :rofl:

3 « J'aime »
18

Sur ordinateur, vous pouvez limiter votre connexion à l’aide des outils de développement de votre navigateur : How to perform Network Throttling in Chrome | BrowserStack

Je ne connais pas les navigateurs mobiles par contre.

3 « J'aime »
19

Merci, je n’utilise pas Chrome mais je vais examiner les outils xCode et configurer un étranglement.

J’ai eu un peu plus de temps et je peux confirmer que cela reste identique.

3 « J'aime »
20

Ceci est peut-être lié aux flashs blancs, je vais donc le poster ici.

iPhone en mode clair, la barre supérieure est sombre. C’est attendu car cela correspond à la mise en page sombre de Discourse que j’utilise.

image
image750×1334 137 KB

iPhone en mode sombre, la barre supérieure est claire. C’est inattendu et, comme le flash blanc, semble indiquer que quelque chose dans la mise en page convainc le téléphone que la page est blanche. La raison pour laquelle je dis cela est que Safari sur iPhone essaie de colorer la barre supérieure pour correspondre à la couleur principale du site que vous consultez.

image
image750×1334 136 KB

4 « J'aime »
21

Nous l’avons fait, mais nous avons manqué le cas où l’utilisateur ne définit que le schéma de couleurs normal comme sombre. Nous nous appuyions auparavant sur la préférence du système d’exploitation pour choisir entre le mode clair/sombre pour l’écran de démarrage, en supposant que les utilisateurs définissaient les deux et utilisaient le commutateur du système d’exploitation.

J’ai poussé quelques corrections :

Si le schéma normal est sombre, utilisez-le. S’il est clair, utilisez le schéma clair pour le mode clair du système d’exploitation et le schéma sombre pour le mode sombre du système d’exploitation (s’il est défini).

Le problème, ainsi que celui-ci :

devraient être résolus maintenant. Merci pour vos signalements :+1:

11 « J'aime »
22

:+1: Génial, j’ai hâte d’essayer !

Suggestion - Branding

Est-il possible de permettre une personnalisation basique du logo au-dessus des points animés ou de remplir les « points » avec le logo (image de taille fav.ico) ou une taille fixe basse résolution fixe (si le chargement et la vitesse posent problème).

Un autre utilisateur a suggéré de revenir au cercle de chargement, qui est un artefact familier de Discourse, ce que je trouve une idée astucieuse, pour la cohérence de l’interface utilisateur/expérience utilisateur et qui serait améliorée en permettant la spécification d’une image/logo statique de base - cela maintient l’utilisateur orienté et situé pendant l’état de chargement liminal, augmentant l’expérience utilisateur et la confiance de l’utilisateur.

À ajouter - récupérer l’image de la configuration de marque existante, fav.ico ou « logo petit » est probablement un bon défaut.

6 « J'aime »