👶🏼 👂🏾 🕌 Sobre el impacto positivo de las fuentes variables en el rendimiento del proyecto web 🤷🏻 🦕 🍲

Al pensar en las fuentes web y el impacto que tienen en el rendimiento del sitio, a menudo prestan atención a los siguientes tres indicadores:

Número de solicitudes para descargar archivos de fuentes.
Tamaños de archivos de fuentes.
El tiempo hasta la primera página de renderizado.

Quería saber cómo el uso de fuentes variables afecta estos indicadores. Por lo tanto, los comparé con las fuentes regulares. Eso fue lo que hice.

Reduzca la cantidad de solicitudes para descargar archivos de fuentes

Hay varias formas de reducir la cantidad de solicitudes de descarga de fuentes. Por ejemplo, esto es el almacenamiento en caché, usando CDN, reduciendo el número de variantes de fuentes utilizadas. No hablaré aquí sobre el uso de CDN o el almacenamiento en caché, ya que esto es, en general, lo mismo cuando se trabaja con fuentes regulares, como cuando se trabaja con fuentes variables. En cambio, hablaré sobre reducir la cantidad de opciones de estilo de fuente.

En el mundo de fuentes estándar, reducir la cantidad de opciones de fuente utilizadas reduce la cantidad de solicitudes de descarga de fuentes. Esto sucede porque usar menos estilos significa que se necesitan menos archivos de fuentes. Por lo general, para esto necesita planificar la selección de fuentes y encontrar un equilibrio entre diseño y rendimiento, decidiendo si el diseño más atractivo y "pesado" vale el impacto que tiene en el rendimiento.

El uso de fuentes variables, debido al hecho de que pueden almacenar diferentes opciones de fuente en un archivo, significa reducir la cantidad de solicitudes para descargar archivos de fuente sin tener que hablar con el diseñador para reducir la cantidad de opciones de fuente utilizadas en el proyecto.

El uso de fuentes variables conduce a una reducción en el número de solicitudes solo debido a las características del dispositivo de los archivos de dichas fuentes. Pero si el archivo contiene toda la información sobre las diferentes opciones de fuente, es apropiado preguntar cómo esto afecta el tamaño del archivo.

Reducción de tamaños de archivo de fuente

Hay muchas formas de reducir el tamaño de los archivos de fuentes. Por lo general, el primer paso en este proceso es elegir el formato más eficiente para almacenar fuentes web. Por ejemplo - WOFF2.

▍ Punto de referencia de búsqueda

Realicé un estudio de los tamaños de varios archivos de fuentes. En particular, utilizando la fuente Source Sans Pro de Adobe. Elegí esta fuente en particular porque su código está alojado en GitHub y porque es de código abierto.

Comparación de los tamaños de los archivos OTF de la fuente Source Sans Pro: un archivo que almacena una fuente de una saturación y un archivo que almacena una fuente variable.

Como punto de referencia, tomé un archivo que describe una fuente de una saturación de la versión estándar de Source Sans Pro. Su tamaño en formato OTF es de 248 Kb. El tamaño del archivo OTF de fuente variable es 405 Kb. Esto significa que el tamaño del archivo de la fuente variable es un 73% mayor que el tamaño del archivo que contiene una versión del Source Sans Pro estándar.

Pero teniendo en cuenta el hecho de que el archivo de fuente variable contiene toda la información necesaria para las variantes de fuente con cualquier saturación, el tamaño de un conjunto de archivos de fuente regular, similar en capacidades, será de aproximadamente 1170 Kb.

Y esto es casi 3 veces el tamaño del archivo de fuente variable.

Incluso si necesita una fuente en las opciones de saturación normales y en negrita, los dos archivos necesarios para almacenar estas opciones de fuente resultarán en más de un archivo de fuente variable.

▍ Comparación de formatos OTF y WOFF2

Los archivos OTF, en comparación con los formatos comprimidos WOFF y WOFF2, resultan ser bastante grandes.

Un archivo con una opción de fuente: OTF - 234 Kb, WOFF2 - 111 Kb. Archivo de fuente variable: OTF - 405 KB, WOFF2 - 112 KB.

Si compara los tamaños de archivo de diferentes formatos, resulta que puede reducir en gran medida el tamaño del archivo simplemente usando el formato WOFF2.

Me pareció interesante cuántos ahorros se obtienen al usar el formato WOFF2 cuando se almacenan datos de fuentes variables. El hecho de que el tamaño del archivo haya disminuido de 405 Kb a 112 Kb lleva al hecho de que el archivo de fuente variable es casi del mismo tamaño que el archivo que almacena solo una versión del Source Sans Pro estándar.

Esto resultó ser una sorpresa para mí, y estoy absolutamente seguro de que tal ahorro no será posible en todos los casos. Pero es muy agradable ver cuán efectiva puede ser la compresión WOFF2 cuando se aplica a una fuente variable.

▍ Reducir el tamaño de los archivos usando subconjuntos de fuentes

Cuando se trabaja con fuentes estándar, hay otra forma de reducir el tamaño de los archivos. Consiste en usar subconjuntos de fuentes. Esto le permite deshacerse de caracteres innecesarios o reducir el conjunto de caracteres de la fuente, por ejemplo, dejando solo aquellos que son necesarios para mostrar textos escritos en latín.

Crear subconjuntos de fuentes conlleva algunos riesgos. El uso de subconjuntos puede hacer que algunas partes del texto se muestren usando una fuente alternativa. Esto puede suceder si los caracteres necesarios se eliminaron accidentalmente de la fuente utilizada.

Puede crear subconjuntos de fuentes usando herramientas especiales, como glyphhanger. En particular, se ha preparado una buena guía sobre GitHub para esta herramienta. Funciona con fuentes estándar y variables.

Procesé las versiones estándar y variables de Source Sans Pro con glyphhanger y seleccioné caracteres en minúsculas y mayúsculas del alfabeto latino, así como números y caracteres especiales como signos de exclamación.

Uso de subconjuntos de fuentes para reducir el tamaño de los archivos

Esta operación permitió reducir el tamaño de un archivo que contiene una fuente de una saturación de 111 Kb a 16 Kb (ahorrar 85% es muy bueno). En el caso de una fuente variable, el tamaño del archivo disminuyó de 112 Kb a 27 Kb (75% es un nivel aceptable de ahorro).

Nuevamente, estos resultados me sorprendieron. Esperaba que un archivo de fuente variable fuera más grande. Teniendo en cuenta el hecho de que en situaciones típicas usan la misma fuente de saturación normal y negrita, resulta que un archivo de fuente variable de 27 KB es más pequeño que dos archivos, cada uno de los cuales contiene información sobre la misma fuente de diferentes saturaciones. Como resultado, creo que este enfoque proporciona muy buenos ahorros.

Es cierto que es importante tener en cuenta que aquí solo se describen mis experimentos con la fuente Source Sans Pro. En otras fuentes, los mismos métodos pueden conducir a otros resultados no tan buenos. El uso de una fuente variable puede no producir el mismo nivel de reducción de tamaño de archivo. Como resultado, le recomiendo que tenga cuidado cuando use subconjuntos de fuentes. Es decir, antes de aplicar esta técnica de optimización en la práctica, vale la pena probar todo bien, evaluarlo y comprender qué es lo mejor para un proyecto en particular.

▍ Consideraciones adicionales sobre los tamaños de archivo

Algunas consideraciones adicionales a tener en cuenta al hablar sobre los tamaños de los archivos de fuentes son que descargar un archivo grande llevará más tiempo que descargar varios archivos más pequeños.

Por ejemplo, cuando se utilizan fuentes estándar, los archivos que almacenan información sobre su tipo de saturación normal suelen ser más pequeños que otros. Como resultado, el cuerpo del documento se puede mostrar rápidamente, inmediatamente después de descargar el archivo pequeño correspondiente. Y más tarde, después de cargar la versión en negrita de la fuente, puede aplicarla. La ventaja de este enfoque es que le permite mostrar texto en la página más rápido que usar una fuente variable. El punto aquí es que los archivos de fuente estándar individuales son más pequeños que el archivo de fuente variable.

Al usar una fuente variable, debe esperar la carga de un solo archivo grande antes de mostrar el texto. Esto puede aumentar el tiempo que lleva preparar una página para el trabajo. Sin embargo, la necesidad de esperar todos los datos de fuente antes de que se muestre el texto le permite evitar el problema de que las fuentes descargadas gradualmente afecten al texto que ya se muestra. Además, dado que cuando se usan fuentes variables, todos los tipos de fuente se cargan al mismo tiempo, no tenemos que obligar al navegador a volver a dibujar la página cada vez que se carga una nueva versión de fuente.

Como resultado, si hablamos del tamaño de los archivos de fuentes, la conclusión que se puede extraer sobre el uso de fuentes variables depende de la situación específica. A saber: de las características del proyecto, de los requisitos de diseño, de las fuentes utilizadas.

Reduzca el tiempo para renderizar primero

Ahora hablemos de reducir el tiempo antes de la primera representación de la página. Cuanto más corto sea este tiempo, mejor será el rendimiento. Esto es bastante obvio. Además, debe tenerse en cuenta que, como ya se mencionó, el único archivo de fuente variable grande puede cargar más lentamente que unos pocos archivos de fuente pequeños. Pero incluso un ligero retraso en la salida de la página, el único "destello de texto invisible" (Destello de texto invisible, FOIT) puede llevar al hecho de que el usuario sentirá que la página se está cargando más lentamente de lo que realmente sucede. Como resultado, creo que en lugar de exponer la página al riesgo FOIT, deberíamos tratar de limitar este problema a lo que se llama el "Flash de texto sin estilo" (FOUT).

▍FOIT

Así es como se ve FOIT.

Un ejemplo de la manifestación visual de FOIT

"Flash de texto invisible" se produce cuando bloqueamos o retrasamos la salida de texto hasta que se carga la fuente deseada. Como resultado, antes de cargar la fuente, la página se verá en blanco.

▍FOUT

Y aquí hay un ejemplo de FOUT.

Un ejemplo de la manifestación visual de FOUT

"Flash de texto no estilizado" se produce si el texto se muestra primero con una fuente de respaldo, y luego, cuando la fuente deseada está disponible, cambia a ella o reemplaza la fuente utilizada anteriormente.

Creo que es mejor si el usuario encuentra FOUT en lugar de la imposibilidad de leer el contenido de la página. Por lo tanto, es mejor si, por un lado, imaginamos un escenario con la aparición de FOUT ante el usuario, y por otro lado, intentamos que afecte lo menos posible a la usabilidad del proyecto.

La forma más fácil de implementar el mecanismo FOUT en un proyecto es mediante el uso de una propiedadfont-displaycon un valorswap. Esto permitirá que el texto se muestre utilizando la fuente alternativa descrita en el conjunto de fuentes. Luego, después de cargar la fuente deseada, reemplazará la fuente de respaldo. La propiedad font-displaypuede tomar otros valores, y le recomiendo que los examine, pero para implementar el comportamiento FOUT de los textos, el valor swapes un buen punto de partida.

font-display: swap;

Uno de los problemas con FOUT es que al reemplazar una fuente, a menudo se puede ver el texto reorganizado en la página para adaptar el contenido a una fuente cuyos parámetros se "miden" de manera diferente a los parámetros de una fuente utilizada previamente.

Al trabajar con fuentes estándar, podemos modificar propiedades como line-height, font-sizey letter-spacingal hacer esto, para adaptar el texto para reemplazar la fuente y reducir los cambios de contenido que ocurren durante este proceso. Puede hacerlo con la fantástica herramienta Font Style Matcher . Fue creado por Monica Dinkulescu , quien se inspiró en este excelente artículo de Helen Holmes (en serio, un artículo maravilloso, recomiendo leerlo).

Espero que con el tiempo, las fuentes variables disfruten de un soporte más amplio para los sistemas operativos. Esto le permitirá facilitar el cambio en los diseños utilizando la fuente variable del sistema como copia de seguridad.

Fuente variable de respaldo

Imagine lo que sucedería si tuviéramos una fuente del sistema que admite la capacidad de controlar su saturación, ancho y tamaño óptico. Esto permitiría modificar las propiedades de dicha fuente para adaptarla a las características de las fuentes especiales que utilizamos. Si combina esto con los métodos existentes para establecer propiedades comoline-heightofont-size, esto nos dará la oportunidad de crear transiciones casi imperceptibles entre las dos fuentes. Esto significa que los usuarios experimentarán manifestaciones menos notables de FOUT, y que los navegadores, debido a cambios más pequeños en los diseños al cambiar la fuente, tendrán que hacer menos trabajo para volver a dibujar las páginas.

Eso sería maravilloso, y espero que sea así.

Resumen

El uso de fuentes variables reduce el tamaño general de los datos de fuente descargados por el navegador. El hecho de que se use una fuente variable en lugar de la habitual en la página automáticamente significa que para preparar la página para la salida, tendrá que realizar menos solicitudes.

Incluso si los tamaños de archivo de las fuentes variables pueden parecerle bastante grandes, preste atención al hecho de que al usar esas fuentes, puede aplicar otras técnicas de optimización. Es decir, estamos hablando de formatos de fuente avanzados como WOFF2, sobre la formación de subconjuntos de fuentes, sobre el uso de la propiedad font-display: swap. Todo esto sugiere que, usando fuentes variables, podemos obtener una reducción en los datos de fuentes y un aumento significativo en la capacidad de diseñar páginas.

Si podemos enfrentar algunos de los desafíos de rendimiento existentes, esto nos permitirá prestar más atención al diseño. Es decir, ya no tiene que buscar compromisos entre el diseño y el rendimiento de la página.

En el campo del uso de fuentes variables, tenemos la oportunidad de comprender cómo esta tecnología puede ayudar a crear una experiencia de usuario más positiva al trabajar con nuestros proyectos. Debido al hecho de que el uso de una fuente variable significa la posibilidad de usar muchas opciones de fuente, podemos crear proyectos que puedan adaptarse de manera flexible a las características de los dispositivos que se utilizan para trabajar con ellos. Esto le permite crear texto accesible y legible, sin preocuparse por el hecho de que los archivos de fuentes regulares adicionales afectarán gravemente el tamaño de los datos necesarios para garantizar que las páginas funcionen.

¡Queridos lectores! ¿Utiliza fuentes variables en sus proyectos?

Sobre el impacto positivo de las fuentes variables en el rendimiento del proyecto web