Presentamos Discourse Splash - Un precargador visual que se muestra mientras se cargan los recursos del sitio

Anuncios
,
1

Discourse es una aplicación Javascript de página única.

Esto significa que la navegación dentro de la aplicación es increíblemente rápida. La contrapartida de las aplicaciones web modernas es que deben cargarse y analizarse en la vista inicial de la página. Si bien hemos estado trabajando mucho a lo largo de los años para optimizar cómo servimos los activos del sitio, esto a veces puede ser un poco lento según las condiciones del dispositivo/red.

Durante las últimas semanas, hemos estado trabajando activamente y probando posibles mejoras para la espera inicial que encuentran los usuarios en conexiones/dispositivos lentos. Nos complace anunciar que, a partir de este commit, los sitios de Discourse ahora mostrarán una pantalla de presentación mientras se cargan los activos del sitio.

¿Cómo se ve?

Hemos tenido esto habilitado en Meta durante un tiempo, por lo que es posible que ya lo hayas visto. Si no, aquí tienes cómo se ve.

¿Cómo funciona?

Si un usuario carga tu sitio de Discourse y Discourse no se analiza en los próximos dos segundos, mostramos la pantalla de presentación. Por lo tanto, se basa en el tiempo de conexión + 2 segundos.

No mostramos la pantalla de presentación a los usuarios en dispositivos/conexiones rápidas.

¿Cómo lo obtengo?

Esta es una característica principal y la configuración está habilitada por defecto ahora, así que todo lo que necesitas hacer es actualizar a la última versión. Si, por alguna casualidad, experimentaste con la configuración que agregamos y no la ves, asegúrate de tener habilitada la configuración del sitio splash_screen.

¿Cuáles son los beneficios?

Además de mostrar algo a los usuarios en dispositivos/conexiones lentas. Esta característica también reduce los retrasos de FCP/LCP en los sitios de Discourse. Hemos creado algunas herramientas internas para rastrear FCP/LCP en Meta, y aquí están los resultados:

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

¿Hay algo más que deba saber?

El texto “loading” que se muestra en la pantalla de presentación se basa en la cadena de traducción preloader_text. Nuestra comunidad ha sido fantástica y ese texto ya ha sido traducido a muchos idiomas. Si prefieres que sea algo diferente, puedes personalizar esa cadena en /admin/customize/site_texts?q=preloader_text en tu sitio.

La pantalla de presentación no retrasa tu sitio de ninguna manera y solo se muestra mientras se cargan los activos del sitio. Una vez que el sitio está listo, la pantalla de presentación se elimina inmediatamente. No hay demora entre que el sitio está listo y la eliminación de la pantalla de presentación.

67 Me gusta
2

Estaría interesado en saber si sus datos internos coinciden con los datos que Google Search Console tiene registrados para su CWV.

6 Me gusta
3

Usamos la biblioteca Web-Vitals propia de Google para las métricas internas, por lo que coincidirán. Es solo que la información en la consola de búsqueda tiene un ciclo de retroalimentación más amplio, por lo que la capturamos nosotros mismos para iterar más rápido en la solución.

También puedes verificar los nuevos valores de LCP usando la herramienta WebPageTest.

11 Me gusta
4

¡Esto se ve genial!

Sé que puede sonar a un detalle nerd, pero ¿es posible cambiar los colores de los círculos en la animación de carga? :grin:

4 Me gusta
5

Para aquellos que quieran modificar el cargador, aquí tienen el archivo:

10 Me gusta
6

El splash vive en un ámbito CSS diferente, por lo que lamentablemente no podrás modificar el CSS a través de temas. Dicho esto, tenemos mejoras planificadas y comencé con esta.

Una vez que el cambio esté activo en tu sitio, los puntos del splash usarán los colores de tu tema actual.

19 Me gusta
7

Creo que en lugar de esa animación, se debería mostrar el spinner predeterminado de Discourse por coherencia. Es solo una opinión.

2 Me gusta
8

Bonita función, ya la tengo en la última actualización.

Hubiera pensado que una prioridad antes de preocuparnos por la decoración sería que se sincronizara con el tema oscuro, una explosión repentina de blanco a pantalla completa usando el tema oscuro, bueno, ¡es un ataque insano a los sensores ópticos de uno cuando también está en una habitación oscura! :face_with_spiral_eyes:

Por favor, añadan unas :sunglasses: para mantener la coherencia con el tema oscuro.

3 Me gusta
9

Entiendo que ya sincronizamos el fondo oscuro @Johani.

El problema es que el servidor puede tardar un par de segundos en indicarnos que estamos tratando con un tema oscuro. Podríamos mejorar la segunda carga con algo de magia de service worker, pero es un problema muy, muy complicado.

4 Me gusta
10

He notado algo desde mi última publicación, para aclarar: cuando no he iniciado sesión, he notado que Discourse capta el tema del sistema operativo como oscuro, establece el sitio de Discourse como oscuro en paralelo y, por lo tanto, la pantalla de carga utiliza un color de fondo oscuro para sincronizarse con el estilo del tema.

Sin embargo, cuando he iniciado sesión como un usuario que tiene el tema oscuro habilitado por defecto, vuelve a una pantalla de carga blanca.

Así que podría tener razón al decir que ya funciona al 50% como se esperaba. :disguised_face:

No lo he probado, quizás alguien más pueda intentarlo.

2 Me gusta
11

Sí, lo probé hoy, así es como se comporta, funciona cuando no se ha iniciado sesión y luego, por defecto, muestra una pantalla blanca cuando se inicia sesión como un usuario con el tema OSCURO configurado. Si puedes hacer que se comporte igual que cuando el tema se detecta para el tema oscuro del sistema operativo, entonces eso sería todo.

4 Me gusta
12

Curiosamente, parece basarse en si mi sistema operativo está configurado en modo claro u oscuro, y Discourse hace lo contrario de lo que esperaría. Básicamente, cuando está configurado en modo oscuro, Discourse parpadea en blanco, pero cuando está configurado en modo claro, Discourse muestra una página oscura hasta que se carga el contenido.

Aquí está el modo oscuro. Tenga en cuenta que comienza oscuro (iOS esperando obtener datos del servidor), luego parpadea en blanco (carga inicial de la página para Discourse, creo), luego carga el tema oscuro que he configurado:

Y aquí está el modo claro. Comienza en blanco (iOS esperando obtener datos del servidor), luego se vuelve oscuro (carga inicial de la página para Discourse, creo), luego permanece en el tema oscuro que he configurado:

5 Me gusta
13

¡Interesante! Gracias por los videos, @Johani los revisará y nos informará.

7 Me gusta
14

¡Sí, eso es, un ejemplo perfecto con video también!

¡Sabía que no me estaba volviendo loco! :crazy_face:

3 Me gusta
17

@Johani He actualizado el último commit con lo que supuse que era la solución, o una solución esperanzadora, pero no estoy seguro de que haya marcado la diferencia (iOS, Safari / macOS Safari)

Mi conectividad es demasiado buena en este momento para replicarlo fácilmente, déjame buscar una conexión dial-up o algo así… :rofl:

3 Me gusta
18

En el escritorio, puedes limitar tu conexión usando las herramientas de desarrollador de tu navegador: How to perform Network Throttling in Chrome | BrowserStack

Sin embargo, no sé sobre los navegadores móviles.

3 Me gusta
19

Gracias, no uso Chrome, pero echaré un vistazo a las herramientas de xCode y configuraré algo de limitación.

He tenido un poco más de tiempo y puedo confirmar que sigue igual.

3 Me gusta
20

Esto posiblemente está relacionado con los destellos blancos, así que lo publicaré aquí.

iPhone en modo claro, la barra superior es oscura. Esto es esperado ya que coincide con el diseño oscuro de Discourse que uso.

image
image750×1334 137 KB

iPhone en modo oscuro, la barra superior es clara. Esto es inesperado y, al igual que el destello blanco, parece indicar que algo en el diseño está convenciendo al teléfono de que la página es blanca. La razón por la que digo eso es porque Safari en iPhone intenta colorear la barra superior para que coincida con el color principal del sitio que estás viendo.

image
image750×1334 136 KB

4 Me gusta
21

Lo hicimos, pero nos perdimos el caso en que el usuario solo configura el esquema de color normal como oscuro. Anteriormente, dependíamos de la preferencia del sistema operativo para elegir entre el modo claro/oscuro para la pantalla de presentación con la suposición de que los usuarios configuraban ambos y usaban el interruptor del sistema operativo.

Envié un par de correcciones:

Si el esquema normal es oscuro, úsalo. Si es claro, usa el esquema claro para el modo claro del sistema operativo y el esquema oscuro para el modo oscuro del sistema operativo (si está configurado).

El problema, así como este:

deberían estar solucionados ahora. Gracias por los informes :+1:

11 Me gusta
22

:+1: ¡Genial, espero probar esto!

Sugerencia - Marca

¿Es posible permitir una personalización básica del logotipo encima de los puntos animados o poblar los “puntos” con el logotipo (imagen del tamaño de fav.ico) o un tamaño fijo bajo de resolución fija (si la carga y la velocidad son un problema)?

Otro usuario sugirió devolver el círculo de carga, que es un artefacto familiar de Discourse, lo que creo que es una idea ingeniosa, para la consistencia de la interfaz de usuario/experiencia de usuario y se mejoraría permitiendo la especificación de una imagen/logotipo estático base. Mantiene al usuario orientado y ubicado durante el estado de carga de limbo, aumentando la experiencia y la confianza del usuario.

Para añadir: tomar la imagen de la configuración de marca existente, fav.ico o “logo pequeño” es probablemente una buena opción predeterminada.

6 Me gusta