Carga asíncrona de Typekit ::¿Vale la pena o mejor no usarlo en absoluto?

Question

Intentando reducir el tiempo de carga de la página.

Seguí el tercer ejemplo descrito. aquí para cargar de forma asincrónica el javascript TypeKit.

Para que funcione tienes que agregar un .wf-loading #some-element {visibility: hidden;} a cada elemento que usa la fuente, y después de 1) se carga o 2) después de un tiempo establecido (1 segundo), la fuente se vuelve visible.

La cuestión es que el CSS con el que estoy trabajando tiene la fuente asignada a unos 200 elementos, por lo que son 200 elementos de .wf-loading{ } (nota:Yo no escribí este CSS).

Siento que esto ralentizaría el tiempo de carga más que simplemente dejar que se cargue regularmente, ya que DOM atraviesa tantas cosas.Si este es el caso, simplemente eliminaré Typekit por completo y optaré por una fuente normal.

¿Existe alguna herramienta que pueda utilizar para ejecutar pruebas de rendimiento en este tipo de cosas?¿O alguien ha probado estas cosas?

Answer 1

En realidad, no estás modificando más de un elemento DOM (la raíz) con este enfoque.Esto significa que nuestros navegadores modernos dependerán de su súper motores CSS rápidos, por lo que la cantidad de elementos involucrados no tendrá un efecto notable en la carga de la página.

En cuanto a la carga y el parpadeo de la página, la latencia de la red suele ser un orden de magnitud peor que la manipulación del DOM.Siempre habrá un parpadeo en la primera carga de la página (sin preparar) mientras el navegador espera a que se descargue la fuente.Solo asegúrese de que su fuente esté almacenada en caché para su reutilización e intente mantener el tamaño del archivo lo más pequeño posible.

Seguí este camino hace unos años con Cufon.Al final, elegí el camino más sencillo con un rendimiento aceptable y me detuve ahí.Es fácil quedar atrapado en la optimización de la carga de páginas, pero probablemente haya áreas más prometedoras para mejorar: características, errores, refactorización, etc.

Answer 2

El problema es, como mencionan en el Blog, las raras ocasiones (pero definitivamente sucede, ciertamente más de una vez para mí) en las que el CDN de Typekit falla por completo y los usuarios simplemente ven una página en blanco.Aquí es cuando desearás haber usado la carga asíncrona.