Optimización del rendimiento de las fuentes de Google

Es justo decir que las fuentes de Google son populares. Al momento de escribir, se han visto más de 29 billones de veces en la web y es fácil entender por qué: la colección le brinda acceso a más de 900 hermosas fuentes que puede usar en su sitio web de forma gratuita. Sin Google Fonts, estaría limitado al puñado de "fuentes del sistema" instaladas en el dispositivo de su usuario.

Las fuentes del sistema o 'Fuentes seguras para la Web' son las fuentes preinstaladas más comúnmente en todos los sistemas operativos. Por ejemplo, Arial y Georgia están empaquetados con distribuciones de Windows, macOS y Linux.

Como todas las cosas buenas, Google Fonts tiene un costo. Cada fuente tiene un peso que el navegador web debe descargar antes de que se puedan mostrar. Con la configuración correcta, el tiempo de carga adicional no se nota. Sin embargo, si se equivoca, los usuarios podrían estar esperando unos segundos antes de que se muestre el texto.

Las fuentes de Google ya están optimizadas

La API de Google Fonts hace más que solo proporcionar los archivos de fuentes al navegador, también realiza una verificación inteligente para ver cómo puede entregar los archivos en el formato más optimizado.

Miremos a Roboto, GitHub nos dice que la variante regular pesa 168kb.

Sin embargo, si solicito la misma variante de fuente de la API, se me proporciona este archivo. Que es sólo 11kb. ¿Como puede ser?

Cuando el navegador realiza una solicitud a la API, Google primero verifica qué tipos de archivos admite el navegador. Estoy usando la última versión de Chrome, que como la mayoría de los navegadores es compatible con WOFF2, por lo que la fuente se me entrega en ese formato altamente comprimido.

Si cambio mi agente de usuario a Internet Explorer 11, recibo la fuente en formato WOFF.

Finalmente, si cambio mi agente de usuario a IE8, obtengo la fuente en formato EOT (Embedded OpenType).

Google Fonts mantiene más de 30 variantes optimizadas para cada fuente y detecta y entrega automáticamente la variante óptima para cada plataforma y navegador.

— Ilya Grigorik, optimización de fuentes web

Esta es una gran característica de Google Fonts, al verificar el agente de usuario, pueden servir los formatos de mayor rendimiento a los navegadores que los admiten, al mismo tiempo que muestran las fuentes de manera consistente en los navegadores más antiguos.

Almacenamiento en caché del navegador

Otra optimización integrada de Google Fonts es el almacenamiento en caché del navegador.

Debido a la naturaleza ubicua de Google Fonts, el navegador no siempre necesita descargar los archivos de fuentes completos. SmashingMagazine, por ejemplo, usa una fuente llamada 'Mija', si es la primera vez que su navegador ve esa fuente, deberá descargarla por completo antes de que se muestre el texto, pero la próxima vez que visite un sitio web que use esa fuente , el navegador utilizará la versión en caché.

A medida que la API de Google Fonts se usa cada vez más, es probable que los visitantes de su sitio o página ya tengan las fuentes de Google utilizadas en su diseño en la memoria caché de su navegador.

— Preguntas frecuentes, Fuentes de Google

La memoria caché del navegador de Google Fonts está configurada para caducar después de un año, a menos que la memoria caché se borre antes.

Nota: Mija no es una fuente de Google, pero los principios del almacenamiento en caché no son específicos del proveedor.

Es posible una mayor optimización

Si bien Google invierte un gran esfuerzo en optimizar la entrega de los archivos de fuentes, todavía hay optimizaciones que puede realizar en su implementación para reducir el impacto en los tiempos de carga de la página.

1. Limite las familias de fuentes

La optimización más fácil es simplemente usar menos familias de fuentes. Cada fuente puede agregar hasta 400 kb al peso de su página, multiplíquelo por algunas familias de fuentes diferentes y, de repente, sus fuentes pesan más que toda la página.

Recomiendo usar no más de dos fuentes, una para los encabezados y otra para el contenido suele ser suficiente. Con el uso correcto del tamaño de fuente, el peso y el color, puede lograr una excelente apariencia incluso con una sola fuente.

2. Excluir variantes

Debido al estándar de alta calidad de Google Fonts, muchas de las familias de fuentes contienen el espectro completo de pesos de fuente disponibles:

• Delgado (100)
• Cursiva fina (100i)
• Luz (300)
• Cursiva clara (300i)
• Regulares (400)
• Cursiva normal (400i)
• Medio (600)
• Cursiva media (600i)
• Negrita (700)
• negrita cursiva (700i)
• Negro (800)
• Cursiva negra (800i)

Eso es excelente para casos de uso avanzado que pueden requerir las 12 variantes, pero para un sitio web normal, significa descargar las 12 variantes cuando es posible que solo necesite 3 o 4.

Por ejemplo, la familia de fuentes Roboto pesa ~144kb. Sin embargo, si solo usa las variantes Regular, Cursiva regular y Negrita, ese número se reduce a ~ 36 kb. ¡Un 75% de ahorro!

El código predeterminado para implementar Google Fonts se ve así:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Si lo hace, cargará solo la variante 'normal 400'. Lo que significa que todo el texto ligero, en negrita y en cursiva no se mostrará correctamente.

En cambio, para cargar todas las variantes de fuentes, debemos especificar los pesos en la URL de esta manera:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Es raro que un sitio web utilice todas las variantes de una fuente, desde Thin (100) hasta Black (900), la estrategia óptima es especificar solo los pesos que planea usar:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Esto es especialmente importante cuando se utilizan varias familias de fuentes. Por ejemplo, si está utilizando Lato para encabezados, tiene sentido solicitar solo la variante en negrita (y posiblemente en negrita cursiva):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Combinar solicitudes

El fragmento de código con el que trabajamos anteriormente realiza una llamada a los servidores de Google ( fonts.googleapis.com ), que se denomina solicitud HTTP. En términos generales, cuantas más solicitudes HTTP necesite realizar su página web, más tiempo tardará en cargarse.

Si quisiera cargar dos fuentes, podría hacer algo como esto:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Eso funcionaría, pero daría como resultado que el navegador hiciera dos solicitudes. Podemos optimizar eso combinándolos en una sola solicitud como esta:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

No hay límite para la cantidad de fuentes y variantes que puede contener una sola solicitud.

4. Sugerencias de recursos

Las sugerencias de recursos son una función compatible con los navegadores modernos que pueden mejorar el rendimiento del sitio web. Vamos a echar un vistazo a dos tipos de sugerencias de recursos: 'Precarga de DNS' y 'Preconexión'.

Nota: si un navegador no admite una característica moderna, simplemente la ignorará. Entonces su página web seguirá cargando normalmente.

Precarga de DNS

La precarga de DNS permite que el navegador inicie la conexión con la API de fuentes de Google ( fonts.googleapis.com ) tan pronto como la página comience a cargarse. Esto significa que cuando el navegador está listo para realizar una solicitud, parte del trabajo ya está hecho.

Para implementar la captación previa de DNS para Google Fonts, simplemente agregue esta línea a sus páginas web <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Preconectar

Si observa el código de incrustación de Google Fonts, parece ser una única solicitud HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Sin embargo, si visitamos esa URL, podemos ver que hay tres solicitudes más a una URL diferente, https://fonts.gstatic.com. Una solicitud adicional para cada variante de fuente.

El problema con estas solicitudes adicionales es que el navegador no comenzará los procesos para realizarlas hasta que se complete la primera solicitud a https://fonts.googleapis.com/css . Aquí es donde entra Preconexión.

Preconnect podría describirse como una versión mejorada de prefetch. Se establece en la URL específica que va a cargar el navegador. En lugar de simplemente realizar una búsqueda de DNS, también completa la negociación TLS y el protocolo de enlace TCP.

Al igual que la captación previa de DNS, se puede implementar con una línea de código:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Simplemente agregar esta línea de código puede reducir el tiempo de carga de su página en 100 ms. Esto es posible al iniciar la conexión junto con la solicitud inicial, en lugar de esperar a que se complete primero.

5. Alojar fuentes localmente

Las fuentes de Google tienen una licencia 'Libre' o de 'software libre', que le brinda la libertad de usar, cambiar y distribuir las fuentes sin solicitar permiso. Eso significa que no necesita usar el alojamiento de Google si no lo desea, ¡puede alojar las fuentes usted mismo!

Todos los archivos de fuentes están disponibles en Github. También está disponible un archivo zip que contiene todas las fuentes (387 MB).

Por último, hay un servicio de ayuda que le permite elegir qué fuentes desea usar y luego proporciona los archivos y CSS necesarios para hacerlo.

Hay una desventaja en alojar fuentes localmente. Cuando descargas las fuentes, las estás guardando tal como están en ese momento. Si se mejoran o actualizan, no recibirá esos cambios. En comparación, cuando solicita fuentes de la API de Google Fonts, siempre recibe la versión más actualizada.

Tenga en cuenta el parámetro lastModified en la API. Las fuentes se modifican y mejoran regularmente.

6. Visualización de fuentes

Sabemos que el navegador tarda un tiempo en descargar Google Fonts, pero ¿qué sucede con el texto antes de que esté listo? Durante mucho tiempo, el navegador mostraba un espacio en blanco donde debería estar el texto, también conocido como "FOIT" (Flash of Invisible Text).

Lectura recomendada : “FOUT, FOIT, FOFT” de Chris Coyier

No mostrar nada en absoluto puede ser una experiencia discordante para el usuario final, una mejor experiencia sería mostrar inicialmente una fuente del sistema como alternativa y luego "intercambiar" las fuentes una vez que estén listas. Esto es posible usando la propiedad CSS font-display .

Al agregar font-display: swap; a la declaración @font-face, le decimos al navegador que muestre la fuente alternativa hasta que Google Font esté disponible.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

En 2019, Google anunció que agregaría soporte para font-display: swap. Puede comenzar a implementar esto de inmediato agregando un parámetro adicional a la URL de las fuentes:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Usa el parámetro de Text

Una característica poco conocida de la API de fuentes de Google es el parámetro de text . Este parámetro poco utilizado le permite cargar solo los caracteres que necesita.

Por ejemplo, si tiene un logotipo de texto que debe ser una fuente única, puede usar el parámetro de text para cargar solo los caracteres utilizados en el logotipo.

Funciona así:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Obviamente, esta técnica es muy específica y solo tiene unas pocas aplicaciones realistas. Sin embargo, si puede usarlo, puede reducir el peso de la fuente hasta en un 90%.

Nota: cuando se utiliza el parámetro de text , solo se carga el peso de fuente "normal" de forma predeterminada. Para usar otro peso, debe especificarlo explícitamente en la URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Terminando

Con un 53 % estimado del millón de sitios web principales que utilizan Google Fonts, la implementación de estas optimizaciones puede tener un gran impacto.

¿Cuántos de los anteriores has probado? Házmelo saber en la sección de comentarios.