Apresentando Discourse Splash - Um pré-carregador visual exibido enquanto os ativos do site carregam

Anúncios
,
1

O Discourse é um aplicativo Javascript de página única.

Isso significa que a navegação dentro do aplicativo é incrivelmente rápida. A desvantagem das aplicações web modernas é que elas precisam ser carregadas e analisadas na visualização inicial da página. Embora tenhamos trabalhado muito ao longo dos anos para otimizar como servimos os ativos do site, isso às vezes pode ser um pouco lento dependendo das condições do dispositivo/rede.

Nas últimas semanas, temos trabalhado ativamente e testado melhorias potenciais para a espera inicial que os usuários em conexões/dispositivos lentos encontram. Temos o prazer de anunciar que, a partir de este commit, os sites do Discourse agora exibirão uma tela de apresentação enquanto os ativos do site carregam.

Como se parece?

Temos isso habilitado no Meta há algum tempo, então você pode já ter visto. Se não, veja como se parece.

Como funciona?

Se um usuário carregar seu site Discourse, e o Discourse não for analisado nos próximos dois segundos, exibimos a tela de apresentação. Portanto, é baseado no tempo de conexão + 2 segundos.

Não exibimos a tela de apresentação para usuários em dispositivos/conexões rápidas.

Como consigo?

Este é um recurso principal, e a configuração está habilitada por padrão agora, então tudo o que você precisa fazer é atualizar para a versão mais recente. Se, por algum acaso, você experimentou a configuração que adicionamos e não a vê, certifique-se de que a configuração do site splash_screen esteja habilitada.

Quais são os benefícios?

Além de mostrar algo para usuários em dispositivos/conexões lentas. Este recurso também reduz os atrasos de FCP/LCP em sites do Discourse. Construímos algumas ferramentas internas para rastrear FCP/LCP no Meta, e aqui estão os resultados:

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

Algo mais que eu deveria saber?

O texto “carregando” que aparece na tela de apresentação é baseado na string de tradução preloader_text. Nossa comunidade tem sido fantástica, e esse texto já foi traduzido para muitos idiomas. Se você preferir que seja algo diferente, pode personalizar essa string em /admin/customize/site_texts?q=preloader_text em seu site.

A tela de apresentação não atrasa seu site de forma alguma e só é exibida enquanto os ativos do site carregam. Assim que o site estiver pronto, a tela de apresentação é removida imediatamente. Não há atraso entre o site estar pronto e a remoção da tela de apresentação.

67 curtidas
2

Teria interesse em saber se seus dados internos correspondem aos dados que o Google Search Console tem arquivados para o seu CWV.

6 curtidas
3

Usamos a biblioteca Web-Vitals do próprio Google para as métricas internas, então elas corresponderão. É apenas que as informações no Search Console têm um loop de feedback mais amplo, então nós as capturamos nós mesmos para iterar mais rapidamente na solução.

Você também pode verificar os novos valores de LCP usando a ferramenta WebPageTest.

11 curtidas
4

Isso parece ótimo!

Sei que pode parecer um detalhe nerd, mas é possível mudar as cores dos círculos na animação de carregamento? :grin:

4 curtidas
5

Para aqueles que desejam modificar o loader, aqui está o arquivo:

10 curtidas
6

O splash vive em um escopo CSS diferente, então, infelizmente, você não poderá modificar o CSS por meio de temas. Dito isso, temos melhorias planejadas, e eu comecei com esta.

Assim que a alteração estiver ativa em seu site, os pontos de splash usarão as cores do seu tema atual.

19 curtidas
7

Eu acho que, em vez dessa animação, o spinner padrão do Discourse deveria ser exibido para consistência. É apenas uma opinião.

2 curtidas
8

Ótimo recurso, já o tenho na atualização mais recente.

Eu teria pensado que uma prioridade antes de nos preocuparmos com a decoração seria sincronizar com o tema escuro. Um clarão repentino de tela cheia BRANCA usando o tema escuro é um ataque insano aos sensores ópticos de alguém quando também em um ambiente escuro! :face_with_spiral_eyes:

Por favor, adicione alguns :sunglasses: para manter a consistência com o tema escuro.

3 curtidas
9

Meu entendimento é que já sincronizamos o fundo escuro @Johani?

O problema é que pode levar alguns segundos para o servidor nos informar que estamos lidando com um tema escuro, poderíamos melhorar a segunda carga com a magia do service worker, mas é um problema muito, muito complicado.

4 curtidas
10

Notei algo desde minha última postagem, para qualificar - quando deslogado, notei que o Discourse capta o tema do SO como escuro, define o site do Discourse como escuro em conjunto e, portanto, a tela de carregamento usa cor de fundo escura também para sincronizar com a estilização do tema.

No entanto, quando logado como um usuário que tem o tema escuro habilitado por padrão, ele reverte para uma tela de carregamento branca.

Então, posso estar certo ao dizer que já está 50% funcionando como esperado. :disguised_face:

Eu não testei, talvez alguém possa tentar.

2 curtidas
11

Sim, testei isso hoje, é assim que está se comportando, funciona quando deslogado e então exibe uma tela branca quando logado como um usuário com o tema ESCURO definido, se você puder fazer com que se comporte da mesma forma que quando o tema é detectado para o tema Escuro do SO, então é isso.

4 curtidas
12

Estranhamente, parece ser baseado se o meu SO está definido para modo claro ou escuro, e o Discourse faz o oposto do que eu esperaria. Basicamente, quando definido para modo escuro, o Discourse pisca em branco, mas quando definido para modo claro, o Discourse mostra uma página escura até que o conteúdo seja carregado.

Aqui está o modo escuro. Note que ele começa escuro (iOS esperando para obter dados do servidor), depois pisca em branco (carga inicial da página para o Discourse, eu acho), depois carrega o tema escuro que defini:

E aqui está o modo claro. Ele começa branco (iOS esperando para obter dados do servidor), depois fica escuro (carga inicial da página para o Discourse, eu acho), depois permanece no tema escuro que defini:

5 curtidas
13

Interessante! Obrigado pelos vídeos, @Johani dará uma olhada e reportará.

7 curtidas
14

Sim, é isso, exemplo perfeito com vídeo também!

Eu sabia que não estava ficando louco! :crazy_face:

3 curtidas
17

@Johani Atualizei o último commit com o que presumi ser a correção, ou uma correção esperançosa, mas não tenho certeza se fez alguma diferença (iOS, Safari / macOS Safari)

Minha conectividade está boa demais no momento para replicá-lo facilmente, deixe-me encontrar um dial-up ou algo assim… :rofl:

3 curtidas
18

No desktop, você pode limitar sua conexão usando as ferramentas de desenvolvedor do seu navegador: How to perform Network Throttling in Chrome | BrowserStack

Não sei sobre navegadores móveis, no entanto.

3 curtidas
19

Obrigado, não uso o Chrome, mas darei uma olhada nas ferramentas do Xcode e configurarei alguns limites.

Tive um pouco mais de tempo e posso confirmar que permanece o mesmo.

3 curtidas
20

Isso possivelmente está relacionado aos flashes brancos, então vou postar aqui.

iPhone no modo claro, a barra superior é escura. Isso é esperado, pois combina com o layout escuro do Discourse que uso.

image
image750×1334 137 KB

iPhone no modo escuro, a barra superior é clara. Isso é inesperado e, assim como o flash branco, parece indicar que algo no layout está convencendo o telefone de que a página é branca. A razão pela qual digo isso é porque o Safari no iPhone tenta colorir a barra superior para combinar com a cor principal do site que você está visualizando.

image
image750×1334 136 KB

4 curtidas
21

Nós fizemos, mas perdemos o caso em que o usuário define apenas o esquema de cores regular como escuro. Anteriormente, dependíamos da preferência do sistema operacional para escolher entre o modo claro/escuro para o splash com a suposição de que os usuários definem ambos e usam o alternador do sistema operacional.

Enviei algumas correções:

Se o esquema regular for escuro, use-o. Se for claro, use o esquema claro para o modo claro do sistema operacional e o esquema escuro para o modo escuro do sistema operacional (se estiver definido).

O problema, assim como este:

deve estar corrigido agora. Obrigado pelos relatos :+1:

11 curtidas
22

:+1: Legal, mal posso esperar para experimentar!

Sugestão - Branding

É possível permitir uma personalização básica do logotipo acima dos pontos animados ou popular os “pontos” com o logotipo (imagem do tamanho de fav.ico) ou uma imagem de baixa resolução de tamanho fixo (se o carregamento e a velocidade forem um problema).

Outro usuário sugeriu retornar o círculo de carregamento, que é um artefato familiar do discourse, o que acho uma ideia interessante, para consistência de UI/UX e seria aprimorado permitindo a especificação de uma imagem/logotipo estático base - mantém o usuário orientado e localizado durante o estado de carregamento em limbo, aumentando a experiência e a confiança do usuário.

Para adicionar - pegar a imagem da configuração de branding existente, fav.ico ou “logo pequeno” é provavelmente uma boa opção padrão.

6 curtidas