Cuando se trata de crear un sitio web o una aplicación web, es importante prestar atención a las métricas de rendimiento para garantizar una experiencia de usuario óptima. Dos de las métricas más importantes son el FCP (First Contentful Paint) y el FMP (First Meaningful Paint), que miden el tiempo que tarda en aparecer el primer contenido visible en la página y el tiempo que tarda en aparecer el contenido significativo en la página, respectivamente.
En un proyecto de GatsbyJS, se pueden utilizar diversas herramientas y técnicas para mejorar estas métricas de rendimiento, incluyendo el uso del paquete Typefaces. Este paquete proporciona fuentes precompiladas y optimizadas en formatos WOFF2 y WOFF para mejorar la velocidad de carga de la página y las métricas de rendimiento de Google.
1. Instale el paquete Typefaces en su proyecto de GatsbyJS
Utilizando npm o yarn. Por ejemplo, para instalar la fuente Open Sans:
npm install typeface-open-sans2. Importe la fuente
Importe la fuente en su archivo de configuración de GatsbyJS (gatsby-browser.js o gatsby-ssr.js) utilizando la sintaxis proporcionada por el paquete Typefaces. Por ejemplo:
import 'typeface-open-sans';3. Usa de la fuente
Finalmente, se debe utilizar la fuente en el CSS como se haría normalmente. Al usar la fuente, GatsbyJS cargará automáticamente la fuente optimizada del paquete Typefaces en lugar de tener que hacer una solicitud adicional a un servidor externo.
El paquete Typefaces proporciona fuentes precompiladas y optimizadas en formatos WOFF2 y WOFF para mejorar la velocidad de carga de la página y las métricas de rendimiento de Google. Al utilizar este paquete, no es necesario cargar fuentes adicionales desde un servidor externo, lo que puede mejorar la velocidad de carga de la página y reducir el tiempo necesario para que se muestre el contenido. Esto a su vez puede mejorar las métricas de FCP y FMP de Google, lo que puede mejorar la experiencia del usuario en su sitio web.