He notado que recientemente muchos sitios web tardan 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 empieza a aparecer aquí y allá (no siempre todo al mismo tiempo).
Básicamente funciona al revés de como solía hacerlo, cuando primero se mostraba el texto, luego las imágenes y el resto se cargaba después. ¿Qué nueva tecnología está creando este problema? ¿Alguna idea?
Tenga en cuenta que tengo una conexión lenta, lo que probablemente acentúa el problema.
Vea a continuación un ejemplo: todo está cargado, pero pasan unos segundos más antes de que finalmente se muestre el texto:
Respuesta1
Una razón es que hoy en día a los diseñadores web les gusta usar fuentes web (generalmente enWOFFformato), por ejemplo, medianteFuentes web de Google.
Anteriormente, las únicas fuentes que podían mostrarse en un sitio eran aquellas que el usuario había instalado localmente. Dado que, por ejemplo, los usuarios de Mac y Windows no tenían necesariamente las mismas fuentes, los diseñadores siempre definieron instintivamente las reglas como
font-family: Arial, Helvetica, sans-serif;
donde, si la primera fuente no se encontraba en el sistema, el navegador buscaría la segunda y, por último, una fuente alternativa "sans-serif".
Ahora, se puede proporcionar una URL de fuente como 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:
font-family: 'Droid Serif',sans-serif;
Esto es muy popular para poder usar fuentes personalizadas, pero también genera el problema de que no se muestra ningún texto hasta que el navegador haya cargado el recurso, lo que incluye el tiempo de descarga, el tiempo de carga de la fuente y el tiempo de renderizado. Espero que este sea el artefacto que estás experimentando.
Como ejemplo: uno de mis periódicos nacionales,Dagens Nyheter, usan fuentes web para sus titulares, pero no para sus clientes potenciales, por lo que cuando se carga ese sitio, generalmente veo los clientes potenciales primero y, medio segundo después, todos los espacios en blanco de arriba se llenan con titulares (esto es cierto en Chrome y Opera, en menos. No he probado otros).
(Además, hoy en día los diseñadores distribuyen JavaScript por todas partes, por lo que tal vez alguien esté intentando hacer algo inteligente con el texto, razón por la cual se retrasa. Sin embargo, eso sería muy específico del sitio: la tendencia general de que el texto se retrase en estos días veces es el problema de las fuentes web descrito anteriormente, creo).
Suma
Esta respuesta recibió muchos votos positivos, aunque no entré en muchos detalles, o tal vezporquede esta. Ha habido muchos comentarios en el hilo de preguntas, así que intentaré expandirlo un poco (muchos comentarios parecen haber desaparecido poco tiempo después de que se protegió el tema; probablemente algún moderador los limpió manualmente). Además, lea las otras respuestas en este hilo, ya que todas se expanden a su manera.
Al parecer, el fenómeno se conoce como "destello de contenido sin estilo" en general, y "destello de texto sin estilo" en particular. La búsqueda de "FOUC" y "FOUT" proporciona más información.
Puedo recomendarPublicación del diseñador web Paul Irish en FOUT en relación con las fuentes web.
Lo que se puede notar es que diferentes navegadores manejan esto de manera diferente. Escribí arriba que había probado Opera y Chrome, y ambos se comportaron de manera similar. Todos los basados en WebKit (Chrome, Safari, etc.) eligen evitar FOUT alnorenderizar texto de fuente web con una fuente alternativa durante el período de carga de la fuente web.Incluso sila fuente web está almacenada en caché, allívoluntadser un retraso de renderizado. Hay muchos comentarios en este hilo de preguntas que dicen lo contrario y que es totalmente incorrecto que las fuentes almacenadas en caché se comporten así, pero, por ejemplo, en el enlace anterior:
¿En qué casos obtendrás una FOUT?
- Voluntad:Descarga y visualización de un ttf/otf/woff remoto
- Voluntad:Mostrando un ttf/otf/woff en caché
- Voluntad:Descargar y mostrar un data-uri ttf/otf/woff
- Voluntad:Mostrando una uri de datos en caché ttf/otf/woff
- No:Mostrar una fuente que ya está instalada y nombrada en su pila de fuentes tradicional
- No:Mostrar una fuente instalada y nombrada usando la ubicación local()
Dado que Chrome espera hasta que desaparezca el riesgo FOUT antes de renderizar, esto genera un retraso. A la quemedidael 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 por completo el efecto.
Irish también tiene algunas actualizaciones sobre el comportamiento del navegador a partir del 14/04/2011 al final de la publicación:
- Firefox(a partir de FFb11 y FF4 Final)ya no tiene FOUT!¡Guauuuuu!http://bugzil.la/499292Básicamente, el texto es invisible durante 3 segundos y luego recupera la fuente alternativa. Sin embargo, la fuente web probablemente se cargará en esos tres segundos... con suerte...
- IE9 admite WOFF, TTF y OTF (aunque requiereun poco de incrustación establecer cosa– mayormente discutible si usas WOFF).¡¡¡SIN EMBARGO!!! IE9 tiene una FOUT.:(
- Webkit tieneun parche esperando aterrizarpara mostrar el texto alternativo después de 0,5 segundos. El mismo comportamiento que FF pero 0,5 segundos en lugar de 3 segundos.
- Suma: El parpadeo tieneun error registrado para esto también, pero parece que no se ha llegado a un consenso final sobre qué hacer con él (actualmente tiene la misma implementación que WebKit).
Si esta fuera una pregunta dirigida a diseñadores, se podrían buscar formas de evitar este tipo de problemas, comowebfontloader, pero esa sería otra cuestión. El enlace de Paul Irish entra en más detalles sobre este asunto.
Respuesta2
La razón de esto es que el texto que aún no puedes leer se está procesando conuna fuente webque todavía está en camino hacia su navegador.
Además, dado que su navegador es Google Chrome, que utiliza WebKit para representar la página,fue decidido por ellos(Es decir, WebKit) que es mejor para usted no ver ningún texto hasta que se descargue la fuente web. Sin embargo, si usted es un desarrollador que prefiere que el texto sea legible en una fuente de sistema alternativa adecuada, entonces puede usar algo comoCargador de fuentes web de Googlelograr esto.
Respuesta3
Hayvarias causasde sitios web que son"lento para mostrar su texto". La lentitud enaplicacionesportátiles.comes causado por la descargaWOFFfuentes. Sin embargo, lo que usted describe como"El texto comienza a aparecer aquí y allá"es más a menudo causado porAJAX.
Un sitio web se compone de muchas partes. La forma en que se descargan y ensamblan estas piezas es unaelección de diseñobajo el control de ladiseñador web. La lentitud se debe a la forma en que el desarrollador elige ensamblar los siguientes componentes básicos:
- Página HTML inicial
- CSS
- js
- Imágenes
- fuentes WOFF
- solicitudes AJAX
- manipulación DOM
Sitios web tradicionales:
Tradicionalmente, era común que los desarrolladores colocaran el contenido del texto en elpágina HTML inicialy mostrarlotan pronto como estuvo disponible. El HTML haría referencia a varios recursos que luego se descargarían. El navegador entoncesredibujar progresivamentela pantalla para incluir los estilos e imágenes a medida que estuvieron disponibles. AJAX y WOFF no estaban disponibles.
Sitios web de WOFF:
Las fuentes WOFF permiten que un sitio web utilice fuentes que normalmente no están disponibles para el navegador, aldescargar fuentes con el sitio web. Algunos desarrolladores indican al navegador que no muestre el contenido del texto hasta que se hayan descargado todas las fuentes WOFF. En mi experiencia, este enfoque aún no se ha utilizado mucho.
Sitios web AJAX:
Algunos desarrolladores optan por no incluir el contenido de texto en la página HTML inicial. En su lugar, optan por descargar el contenido de texto utilizando AJAX. Esto pasadespués de cargar la página básica. En mi experiencia, este método ha ganado muchoadopción más ampliaque las fuentes WOFF y suele ser la causa de la lentitud que usted describe.
Determinando la causa
Para determinar la causa de un sitio específico se requiere un análisis utilizando herramientas comoinsecto de fuegooHerramientas para desarrolladores de Chrome. O alternativamente, puede abrir el sitio usandoInternet Explorer 8, que admite AJAX pero no WOFF. Si el sitio sigue lento, el problema es AJAX y no WOFF.
Respuesta4
Como han señalado otros, es probable que las fuentes personalizadas contribuyan al retraso.
Para dar un poco más de contexto, el navegador hace aproximadamente lo siguiente antes de poder mostrar el contenido de la página en la pantalla:
- buscar HTML (varios viajes de ida y vuelta para DNS, TCP, solicitud/respuesta)
- comience a analizar HTML, descubra recursos externos como CSS y JS externos. Tenga en cuenta que CSS bloquea el diseño y JS bloquea el análisis. Por lo tanto, los recursos externos como CSS y JS que se cargan al principio del documento (por ejemplo, en el encabezado) ralentizan el tiempo que tarda una página en mostrar el contenido en la pantalla.
- buscar CSS y JS externos (varios viajes de ida y vuelta: DNS y TCP si estos recursos están en un dominio diferente, como CDN, así como un RTT para la solicitud/respuesta)
- una vez que el CSS y JS externos hayan terminado de cargarse, analizar/ejecutar JS, analizar/aplicar estilos
- Si el CSS hace referencia a fuentes personalizadas, esas fuentes ahora también deben descargarse, lo que genera retrasos adicionales en el viaje de ida y vuelta para representar cualquier parte de la página que dependa de las fuentes personalizadas.
Aunque no se trata específicamente de los retrasos causados por las fuentes personalizadas, recientemente escribí una publicación en el blog que brinda información adicional sobre las causas de los retrasos en el procesamiento. Ofrece algunas sugerencias para minimizar el tiempo necesario para pintar sus páginas por primera vez. Esperamos que esto sea útil para los lectores interesados en hacer que sus páginas muestren contenido más rápido, incluidas aquellas páginas que desean utilizar fuentes personalizadas:http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-segundo/