Solucionando "Ensure text remains visible during webfont load" en Lighthouse.

Asegúrate de que el texto permanezca visible mientras se cargan las webfonts

Antes de que existieran las webfonts, los diseñadores web estaban limitados a un pequeño número de fuentes preinstaladas. Las webfonts te dan la libertad de usar cualquier fuente en un sitio web. 

Por supuesto que suena bien, pero las webfonts también tienen sus desventajas; ralentizan la velocidad de carga de la página de varias maneras.

Las webfonts suelen ser archivos grandes que no están instalados en una computadora por defecto. Así que las webfonts deben descargarse antes de poder usarse. Mientras se descarga una webfont, el texto en una página web estará temporalmente oculto hasta que la webfont se haya cargado completamente. Esto crea una mala experiencia de usuario; nadie quiere mirar una pantalla vacía por demasiado tiempo.

Tan pronto como la webfont se carga y renderiza, el navegador reemplaza el “texto invisible” por el texto final con la nueva webfont. Este momento se llama Flash of Invisible Text (FOIT). Este FOIT es lo que causa que aparezca el mensaje de error "Ensure text remains visible during webfont load"..

¿Cargando una webfont en tu página y no tomando ninguna precaución para prevenir este Flash of Invisible Text? Mientras analizas el PageSpeed en Lighthouse, aparecerá el siguiente mensaje: "Ensure text remains visible during webfont load". Esto te dice cuánto tiempo podrías ahorrar haciendo visible el texto antes de que la webfont se cargue. Para 1 sola fuente, esto es fácilmente 100ms.

¿Por qué es malo el texto invisible para la velocidad de la página?

El texto invisible realmente no ralentizará el tiempo de carga medido final de una página. Entonces, ¿por qué piensa Lighthouse que es tal problema? 

Google piensa que es importante que una página web proporcione la mejor experiencia de usuario posible. La experiencia de usuario se puede mejorar mostrando contenido en la página lo más rápido posible. Compara las dos versiones de tira de película de nuestra página de inicio a continuación:

Flash of Invisible Text

Sin flash of invisible text con display:swap

Como puedes ver, las dos páginas terminaron de cargar exactamente al mismo tiempo. Aún así, la última versión del sitio web se ve mucho mejor para los visitantes. Los visitantes pueden empezar a leer inmediatamente.

Por eso es inteligente mostrar texto de todos modos - no en la fuente final, sino en una fuente de “fallback”. De esta manera el visitante piensa que tu página realmente carga superrápido.

Un breve recordatorio: FOIT y FOUT

Antes de ir más lejos, es útil distinguir los siguientes conceptos: FOIT y FOUT. FOIT significa Flash of Invisible Text y ocurre cuando las webfonts no son visibles durante la carga. Puedes mitigar esto incluyendo una fuente de fallback. Cuando la fuente de fallback es reemplazada por la webfont, se llama FOUT, Flash of Unstyled Text.

Haz visibles las webfonts durante la carga

Hay dos formas de hacer visibles las webfonts durante la carga: primero es vía el valor CSS font-display; segundo es usando una fuente de fallback vía una clase. Ambos métodos tienen ventajas y desventajas, que discutiré a continuación.

Método 1: Font-display:swap

Font-display es un descriptor CSS que está disponible para todos los navegadores modernos. El descriptor font-display determina cómo se muestra una fuente basado en si y cuándo fue descargada. Font-display se usa en una regla @font-face. 

Hay diferentes valores de font-display: block, swap, fallback y optional. Usa el valor swap para evitar FOIT, y para que el texto aparezca en la pantalla lo más rápido posible, usa el valor swap. 

Una vez que establecemos el valor font-display: swap en la regla @font-face, las fuentes predeterminadas del sistema se usan mientras la página carga hasta que las webfonts se hayan cargado. Esto ayuda al visitante a leer el texto en la página inmediatamente.

Google fonts

Cuando uses Google fonts, puedes usar el método font-display: swap con un simple “&display=swap” en la hoja de estilo o código de inserción.  

<!-- vía una hoja de estilo externa -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- vía el método import -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

Por cierto, no somos fans de Google fonts. Casi siempre es mucho más rápido alojar las webfonts tú mismo. Te da más control sobre el proceso de “preloading” de las fuentes. Puedes usar la conexión http/2 ya existente y no tienes que descargar una hoja de estilo extra.

Fuentes locales

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 font-display: swap
}

Método 2: Fuentes con una clase

La segunda forma de hacer visibles las fuentes durante la carga es trabajar con clases. Estas clases se agregan usualmente (pero no siempre) al elemento <body> o <html>.

La ventaja de este método es que tienes más control sobre la fuente de fallback y el tiempo del Flash of Unstyled Text.

Este método funciona de la siguiente manera: Indica en tu hoja de estilo que una página debe renderizarse inicialmente con una fuente (la fuente de fallback). Luego cargas la webfont vía la API JavaScript FontFace o vía preloading. Después de que esta fuente se ha cargado, agrega una clase a tu página. La clase se asegura de que la webfont se active.

¿Por qué harías eso, podrías preguntar? Haces esto para ganar más control sobre la fuente de fallback. Puedes mostrar la fuente de fallback con un espaciado de línea más grande o un tamaño diferente para que coincida mejor con la webfont. Esto previene cambios de diseño (layout shifts).

Cuando uses múltiples webfonts, puedes usar el método de la API FontFace para cambiar todas las fuentes a la vez. Esto ahorra muchos repaints del navegador. Personalmente no soy fan de este método; esto asegura que el FOUT tenga lugar después de que la última fuente se haya cargado. Así que eso es siempre más tarde de lo necesario.

Fuente con una clase vía la API FontFace:

<style>
  //fuente fallback con un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //fuente webfont con un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Vía un enlace preload

El segundo método es vía un enlace preload. Preload la fuente como se describe a continuación. Una vez hecho esto, cambia la clase del elemento <html>.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //fuente fallback con un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //fuente webfont con un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, se activa solo tan pronto como la clase .fl se agrega a la etiqueta html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Consejos y trucos extra

1.    Siempre preload https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? fuentes visibles. Las fuentes no se descargan por defecto hasta que se usa una fuente. ¿Seguro que necesitas una webfont? En ese caso, hazle preload para que esté disponible antes.
2. ¿Quieres evitar FOIT y FOUT completamente? Usa font-display: optional en combinación con preloading.
3. Alojar webfonts tú mismo es siempre más rápido que webfonts vía Google fonts u otro CDN externo.