¿Por qué las páginas web no muestran su texto inmediatamente?

Si eres propenso a ver el panel del navegador con un ojo de águila, es posible que hayas notado que las páginas cargan con frecuencia sus imágenes y diseño antes de cargar su texto, el patrón de carga exactamente opuesto que experimentamos durante los años noventa. Que esta pasando?

La sesión de Preguntas y Respuestas de hoy nos llega por cortesía de SuperUser, una subdivisión de Stack Exchange, un grupo de sitios web de preguntas y respuestas impulsado por la comunidad..

La pregunta

El lector superusuario Laurent tiene mucha curiosidad acerca de por qué las páginas parecen cargar elementos de forma completamente diferente a como lo hacían antes. El escribe:

Me he dado cuenta de que recientemente muchos sitios web demoran en mostrar su texto. Por lo general, se cargarán el fondo, las imágenes, etc., pero no el texto. Después de un tiempo, el texto comienza a aparecer aquí y allá (no siempre todo al mismo tiempo).

Básicamente funciona a la inversa como solía hacerlo, cuando el texto se mostraba primero, luego las imágenes y el resto se cargaban después. ¿Qué nueva tecnología está creando este problema? Alguna idea?

Tenga en cuenta que estoy en una conexión lenta, lo que probablemente acentúa el problema.

Vea [arriba] para ver un ejemplo: todo está cargado, pero se necesitan unos segundos más antes de que se muestre finalmente el texto..

Entonces, ¿qué da? Laurent, y muchos de nosotros, recordamos un momento en que el texto se cargó primero y todo lo demás (GIF animados, fondos en mosaico y todos los demás artefactos de la navegación web de finales de los 90) llegó más tarde. ¿Qué causa la situación actual de los elementos de diseño primero, texto más tarde??

La respuesta

Daniel Andersson, colaborador de Superusuarios, ofrece una respuesta maravillosamente detallada que llega hasta el fondo del misterio de por qué las fuentes cargan el último misterio:

Una razón es que a los diseñadores web en la actualidad les gusta usar fuentes web (generalmente en formato WOFF), por ejemplo. a través de las fuentes web de google.

Anteriormente, las únicas fuentes que podían visualizarse en un sitio eran aquellas que el usuario tenía instaladas localmente. Desde, por ejemplo, Los usuarios de Mac y Windows no necesariamente tenían las mismas fuentes, los diseñadores instintivamente siempre definían las reglas como
Familia tipográfica: Arial, Helvetica, sans-serif; 
donde, si la primera fuente no se encontraba en el sistema, el navegador buscaría la segunda fuente, y por último una fuente "sans-serif" alternativa.

Ahora, uno puede dar una URL de fuente como una regla CSS para que el navegador descargue una fuente, como tal:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 
y luego cargue la fuente para un elemento específico por ejemplo:
Familia tipográfica: 'Droid Serif', sans-serif; 
Esto es muy popular para poder usar fuentes personalizadas, pero también conlleva el problema de que no se muestre texto hasta que el navegador haya cargado el recurso, que incluye el tiempo de descarga, el tiempo de carga de la fuente y el tiempo de procesamiento. Espero que este sea el artefacto que estás experimentando..

Como ejemplo: uno de mis periódicos nacionales, Dagens Nyheter, usa fuentes web para sus titulares, pero no para sus clientes potenciales, así que cuando ese sitio está cargado, generalmente veo los contactos primero, y medio segundo después, se llenan todos los espacios en blanco de arriba. con titulares (esto es cierto en Chrome y Opera, al menos. No he probado otros).

(Además, los diseñadores esparcen JavaScript absolutamente en todas partes en estos días, así que tal vez alguien esté tratando de hacer algo inteligente con el texto, por lo que se retrasa. Sin embargo, eso sería muy específico del sitio: la tendencia general a retrasar el texto en estos veces es el problema de fuentes web descrito anteriormente, creo.)

Adición:

Esta respuesta se volvió muy popular, aunque no entré en mucho detalle, o tal vez porque de esta. Ha habido muchos comentarios en el hilo de preguntas, así que intentaré ampliar un poco [...]

El fenómeno es aparentemente conocido como "destello de contenido sin estilo" en general, y "destello de texto sin estilo" en particular. Buscando "FOUC" y "FOUT" da más información.

Puedo recomendar la publicación del diseñador web Paul Irish en FOUT en relación con las fuentes web.

Lo que uno puede notar es que los diferentes navegadores manejan esto de manera diferente. Anteriormente escribí que había probado Opera y Chrome, quienes se comportaron de manera similar. Todos los basados en WebKit (Chrome, Safari, etc.) eligen evitar FOUT por no procesamiento de texto de fuente web con una fuente alternativa durante el período de carga de fuente web. Incluso si la fuente web esta en caché, hay será ser un retraso de render. Hay muchos comentarios en este hilo de preguntas que dicen lo contrario y que es totalmente erróneo que las fuentes almacenadas en caché se comporten de esta manera, pero, por ejemplo, desde el enlace de arriba:

¿En qué casos obtendrás un FOUT?

Será: Descarga y visualización de un control remoto ttf / otf / woff

Será: Visualización de un ttf / otf / woff en caché

Será: Descarga y visualización de datos-uri ttf / otf / woff

Será: Visualización de datos en caché-uri ttf / otf / woff

No va a Mostrar una fuente que ya está instalada y nombrada en su pila de fuentes tradicional

No va a Visualización de una fuente instalada y nombrada usando la ubicación local ()

Dado que Chrome espera hasta que el riesgo de FOUT desaparezca antes de renderizar, esto produce un retraso. A la que grado el efecto es visible (especialmente cuando se carga desde el caché) parece depender, entre otras cosas, de la cantidad de texto que se debe representar y quizás de otros factores, pero el almacenamiento en caché no elimina completamente el efecto.

Irish también tiene algunas actualizaciones sobre el comportamiento del navegador a partir del 2011-04-14 en la parte inferior de la publicación:

Firefox (a partir de FFb11 y FF4 Final) ya no tiene un FOUT! Wooohoo! Http: //bugzil.la/499292 Básicamente, el texto es invisible durante 3 segundos y luego devuelve la fuente alternativa. El webfont probablemente se cargará dentro de esos tres segundos aunque ... con suerte ...

IE9 admite WOFF y TTF y OTF (aunque requiere un conjunto de bits de incrustación, en su mayoría discutibles si usas WOFF). ¡¡¡SIN EMBARGO!!! IE9 tiene un FOUT. :(

Webkit tiene un parche a la espera de aterrizar para mostrar un texto alternativo después de 0,5 segundos. Así que el mismo comportamiento que FF pero 0.5s en lugar de 3s.

Si se tratara de una pregunta dirigida a los diseñadores, se podrían buscar formas de evitar este tipo de problemas, como cargador de fuente web, pero esa sería otra pregunta. El enlace de Paul Irish entra en más detalles sobre este asunto..

¿Tienes algo que agregar a la explicación? Apague el sonido en los comentarios. ¿Quieres leer más respuestas de otros usuarios de Stack Exchange con experiencia en tecnología? Echa un vistazo a la discusión completa aquí.