Eliminar render-blocking resources en Google Fonts header image

Eliminar render-blocking resources en Google Fonts

Para mejorar los resultados de Lighthouse

Publicado el 21 de octubre de 2020 por Victor Dieppa Garriga

Usar Google fonts es la forma más sencilla de añadir preciosas fuentes de estilo en tú página web, pero en detrimento de velocidad de carga.

Usando la herramienta Lighthouse de Google podrás descubrir que el CSS usado por para las fuentes es marcado como render-blocking.

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Alterando el <link> un poco, podremos pre-cargar y eliminar el bloqueo:

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" type="text/css"/>
</noscript>

Son solo 3 cambios:

  1. Hemos añadido rel="preload" y as="style" a nuestro código para que la fuente sea cargada antes de su uso.
  2. Hemos usado el atributo onload para restaurar la definición rel="stylesheet".
  3. Hemos añadido <noscript> en caso que en navegador no haga uso de JavaScript.

Quiero dar las gracias a Claudiu por publicar una nueva versión de esta solución ideada por Lucas Vazquez y aquí publicada.