WebFonts y su impacto en rendimiento

💬 WebFonts y su impacto en rendimiento

Developing a Robust Font Loading Strategy for CSS-Tricks-zachleat.com

typekit/webfontloader

• Los webs fonts son bastantes dañinos para el performance
• Puede impactar al punto de que el máximo debería ser 2, Lo recomendable es 1 pero si el rendimiento es crítico entonces no deberías traer web fonts
• En general hay tres formas de cargar fuentes y cada una causa un problem

• <link> común (i.e.: Google fonts)
• HTML parsing no continúa hasta que se descargue la fuente
• Bloqueante ⇒ Para el parsing del HTML, para descargar la fuente y una vez descargada, se continua con el parsing

• Fuente por defecto mientras carga la web Font
• Flash of Unstyled Text (FOUT)
• Ese cambio genera un parpadeo, el cual es perceptible para los usuarios

• No mostrar texto hasta que se descargue la fuente
• Flash of Invisible Text (FOIT)

• Google Fonts en las últimas versiones nos permite tener una fuente por defecto hasta que se cargue la que deseemos poniendo en el link &display=swap
• Tambien podemos hacerlo con una librería open source llamada web font loader
  • Esta librería nos brinda eventos de los estados de nuestras fuentes a través de clases

RESUMEN: Las webs fonts son recursos pesados y tienen bastante costo a nivel de performance, debemos tener un límite de dos fuentes y debemos tomar en cuenta todas las estrategias que tenemos para cargarlas.

FOUT: Flash Of Unstyled Text
FOIT: Flash Of Invisible Text

Los web fonts son muy populares en el diseño web para darle estilo e identidad en términos de diseño a los sitios web web. Sin embargo, en términos de rendimiento resultan ser muy dañinos. Son tan poco recomendados que incluso las comunidades de diseñadores y desarrolladores recomiendan como máximo 2 web fonts. Si está en tus manos solo deberías un web font. Pero si realmente te interesa el rendimiento de tu sitio web, ya sea porque tus usuarios dependen del rendimiento, no deberías ni siquiera usar web font.

Pero por lo general no tener un web font en los sitios web es muy difícil. Por eso, existen 3 métodos de cargar los web fonts para reducir el impacto de la carga del sitio web. No obstante estas tres maneras traen consigo 3 problemas. miremos:

1. MODO ESTILO: La primera forma de hacerlo es cargando los fonts como si fueran estilos CSS con la etiqueta <Link> Pero sabemos que por el CRP la carga de estilos son bloqueantes para el parsing del HTML. La carga de los fonts como estilos resultan ser bloqueantes también.
2. FORMA ALTERNA: La segunda forma de carga es mostrando una fuente por defecto, una fuente común que ya esté en el sistema de manera predeterminada. Por ejemplo Arial es una fuente que ya viene en todos los sistemas operativos. Descargar la fuente en paralelo, y una vez que ya la fuente esté descargada, hacer el cambio de fuente. Ese cambio de fuentes resulta ser perceptible al ojo humano por eso este método se conoce como: Flash Of Unstyled Text (FOUT).
3. DESPUES DEL HTML PARSING: esta 3ra estrategia consiste en no mostrar ningún texto hasta que se descargue la fuente. Esta estrategia se conoce como Flash Of Invisible Text (FOIT)

Google fonts es uno de los proveedores de fonts mas populares en Internet, y desde la liberación de sus últimas versiones, permite definir el comportamiento de carga de la fuente. **En los parámetros de su url puedes puedes usar el query-param display

• Para usar Flash Of Unstyled Text (FOUT). Podemos usar el valor swap
• Para usar Flash Of Invisible Text (FOIT). Podemos usar el valor block

<link
      href="https://fonts.googleapis.com/css?family=Muli&display=swap"
      rel="stylesheet"
 />

Pero no todos los proveedores tienen esta opción para facilitar la definición del comportamiento de carga de la fuente. Para eso podemos usar otras alternativas como:

webfontloader : https://github.com/typekit/webfontloader

En esta url muestra los diferentes valores que recibe el parametro display de google fonts

También se podría usar el swap si cargamos la fuente desde css sin necesidad de agregar una librería de js:

@font-face {
    font-family: "SomeFont";
    src: url("../SomeFont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }

En el src también se podría usar una url de donde proviene la fuente.

Wow, no tenía idea de Web Font Loader. Lo usaré en mis proyectos. Gracias.

Son muy malas para el rendimiento. Deberías usar solamente 1 Webfont, máximo 2.

3 maneras de cargar fuentes; 3 manera de crear problemas.

1. Link
2. Fuente por defecto. Flash O Unstyled Text (FOUT)
3. No mostrar texto hasta que se descargue la fuente. Flash Of Invisible Text (FOIT)

Web Font Loader es una manera de usar JS para cargar fuentes de distintos proveedores de una forma más óptima.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Agregué lo siguiente el head del html, según clases anteriores, esto debería ayudar en el rendimiento de la carga de la librería webfont.js, no?:

<link rel="preconnect" href="https://ajax.googleapis.com" crossorigin />
    <link rel="dns-prefetch" href="https://ajax.googleapis.com" />```

WebFont es como tomar Coca-Cola, si puedes tomar sola 1 al mes y sí puedes no la tomes.

Agh! webfonts… nunca me han gustado.