Optimización del rendimiento de las fuentes de Google

Los buenos diseños de sitios web se adornan con imágenes y fuentes impresionantes. Desafortunadamente, estos dos elementos web contribuyen en gran medida a las razones por las que muchos sitios web muestran una latencia molesta. Por supuesto, solo las fuentes web pueden ofrecer algo refrescante, inesperado y nuevo.

Sin embargo, hay formas de contener este horrible fenómeno. SVG está ayudando a los desarrolladores a gestionar algunos de los desafíos de la representación de imágenes. Y para Google Fonts, que es la fuente web más utilizada, mejorar el tiempo de renderizado de una página consiste simplemente en implementar varios trucos disponibles para optimizar el rendimiento de Google Font.

¿Qué son las fuentes de Google?

Las fuentes de Google son una colección especialmente ajustada de glifos que componen fuentes para su uso en sitios web. Están diseñados específicamente para ser utilizados en Internet, de ahí el nombre de fuentes web.

Lanzado como Google Web Fonts en 2010 con solo unas 30 fuentes, Google Fonts ahora tiene alrededor de 17 mil millones de fuentes y actualmente funciona alrededor del 57% de todos los sitios web. Google Fonts, que es completamente gratuito, registra alrededor de 500 000 visitas por segundo al momento de escribir este artículo y ha acumulado más de 37 billones de visitas desde 2010.

El uso de fuentes de Google en su sitio web le permite dejar de estar limitado a las fuentes del sistema o "fuentes seguras para la web", como Arial y Georgia, que en su mayoría están preinstaladas en todos los sistemas operativos.

Cómo implementar las fuentes de Google

La implementación de Google Fonts en un sitio web se realiza mediante la interfaz de programación de aplicaciones (API), haciendo referencia a la elección de fuentes del usuario. Esta API que ofrece Google podría incrustarse en su documento HTML utilizando la etiqueta de enlace CSS estándar o la sintaxis para importar. A continuación se muestra un ejemplo de las API para implementar Baloo Chettan 2.

Usando la etiqueta de enlace CSS estándar

Usando la sintaxis de importación
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Con cualquiera de las API anteriores en su documento HTML, puede usar la familia de fuentes en su documento CSS haciendo referencia a ella, como se ve en el ejemplo a continuación.

familia de fuentes : 'Baloo Chettan 2', cursiva;

Importancia de optimizar el rendimiento de las fuentes de Google

La implementación y el uso de Google Fonts, al igual que otras fuentes web, no son un gran problema, sino entregar las fuentes a los visitantes de su sitio web. Recuerde, los usuarios no tienen estas fuentes en sus dispositivos. En otras palabras, sus navegadores deben descargarlos antes de poder ver el contenido de su sitio web.

peso de la fuente

Cada fuente viene con un peso preparado para afectar negativamente la latencia de su sitio web. Por ejemplo, la fuente Baloo Chettan 2 de Google tiene un tamaño total de 720 KB. Eso significa que debe tener en cuenta aproximadamente 9 MB en la carga de su sitio web si debe usar toda la familia de fuentes Baloo (19), con todos los idiomas y variantes disponibles en su sitio web. Por supuesto, eso no es ideal y no se parece en nada a la optimización de fuentes web. Sin embargo, hacerlo mal significa hacer que los visitantes de su sitio web esperen unos segundos antes de que puedan ver cualquier texto en su sitio web.

formato de fuente

Lamentablemente, ninguno de estos formatos se considera un formato universal que funcione en todos los navegadores.

EOT solo es compatible con IE. Chrome y Opera tienen la mayor compatibilidad con la mayoría de los formatos, mientras que aproximadamente el 86 por ciento de todos los navegadores admiten el formato WOFF. Esto puede requerir que incluya todos los formatos de fuente para cada fuente que desee usar. La idea es brindar una experiencia consistente al garantizar que todos los navegadores puedan mostrar todas las fuentes.

Estos problemas son parte de las muchas razones por las que existe una necesidad crucial de optimizar el rendimiento de las fuentes de Google.

Optimización del rendimiento de las fuentes de Google

La optimización de fuentes de Google comienza con la ubicación de la API de fuentes y el formato de solicitud, hasta la representación. Aquí hay trucos simples sobre cómo optimizar las fuentes de Google.

Precargar recursos de fuentes de Google

Se recomienda enfáticamente que utilice la nueva característica de la plataforma web: <link rel="preload"> que le permite cargar sus fuentes web con anticipación. Esta función le permite omitir el comportamiento predeterminado del navegador, que generalmente retrasa la representación del texto al construir primero el árbol de representación para saber qué recursos de fuentes necesita antes de acceder al enlace de recursos.

<link rel="preload"> generalmente se incluye en la etiqueta <head> de su HTML para activar una solicitud de sus fuentes con suficiente anticipación, sin esperar la creación del CSSOM. La función solo le da al navegador una información previa de que sus fuentes web se necesitarán pronto, sin proporcionar ninguna información sobre cómo se utilizarán.

Además, se recomienda utilizar una definición CSS @font-face adecuada junto con la función de precarga para informar al navegador sobre cómo utilizar la URL del recurso. Vea un ejemplo en el siguiente punto.

Use una solicitud para múltiples fuentes

Otra buena medida para la optimización de fuentes de Google es combinar varias solicitudes de fuentes en una sola etiqueta. No incluir una etiqueta <link> separada para cada fuente, enviando así múltiples solicitudes en diferentes lotes. Para combinar solicitudes de fuentes, simplemente separe las fuentes en la API con el | personaje. Sin embargo, esto también podría lograrse simplemente seleccionando todas las fuentes que necesitaría a la vez en la página de fuentes de Google.

Formato de solicitudes de fuentes incorrectas:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Formato de solicitud de fuente recomendado:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Al combinar múltiples solicitudes de fuentes en una sola etiqueta, evitamos que el navegador tenga que viajar varias veces al servidor y también ayudamos a los navegadores más antiguos con un máximo de 2 conexiones a la vez por dominio.

Formatos de fuente optimizados para todos los navegadores

Los navegadores que no admiten un formato de fuente específico simplemente lo ignoran y saltan al siguiente paso en el árbol de representación. Y para brindar una experiencia consistente, debe incluir todos los formatos de fuente en su declaración CSS @font-face.

Sin embargo, el peso podría reducirse. Los gráficos individuales que describen una fuente se componen de información similar que se puede comprimir con un compresor compatible como GZIP. Si bien los formatos TTF y EOT se comprimen de forma predeterminada, debe asegurarse de que sus servidores estén configurados para aplicar la compresión al entregar ambos formatos de fuente.

Utilice la configuración de compresión óptima para WOFF, que tiene compresión integrada y recurra a algoritmos de preprocesamiento y compresión personalizados para entregar WOFF2 con una reducción del tamaño de archivo de ~30 %.

Ejemplo de declaración CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Da prioridad a local() en tu lista src

Aunque es posible que esta idea de optimización de fuentes de Google no se aplique realmente a los usuarios de teléfonos móviles, a menos que haga referencia a las fuentes predeterminadas del sistema, sigue siendo un truco eficaz para optimizar las fuentes web.

Si observa el ejemplo anterior de declaración CSS @font-face, notará que local() encabeza la lista separada por comas de variantes de recursos en el descriptor src:. Esta priorización es a propósito, y la idea es enviar el navegador del usuario a la primera fuente local de la fuente antes de optar por descargarla si no está disponible localmente.

Esto asegura que el navegador no descargue fuentes ya instaladas localmente en la computadora del usuario, lo que garantiza un mejor rendimiento del sitio web.

Personalizar la representación de fuentes: CSS font-display

Controlar el rendimiento de las fuentes con el descriptor de visualización de fuentes para @font-face le permite decidir cómo se deben representar las fuentes de Google, según el tiempo que tarde en descargarse. Originalmente, los navegadores web tienen configuraciones predeterminadas sobre qué hacer cuando las fuentes tardan demasiado en cargarse. La mayoría de ellos establecen un tiempo de espera después del cual usan la fuente alternativa, pero desafortunadamente, su período de tiempo de espera es diferente.

La propiedad font-display recién introducida actualmente admite cinco rangos de valores: auto | bloque | permuta | reserva | opcional

Debe establecer la propiedad para bloquear el valor si la representación del texto en un tipo de letra particular es muy importante. Esto se debe a que permite que el navegador use texto invencible en lugar de la fuente preferida cuando no están listos y los cambia tan pronto como terminan de descargarse. La mayoría de los navegadores usan este valor como su valor predeterminado ( automático ).

El intercambio podría usarse en los casos en los que pueda permitirse renderizar una fuente temporal hasta que la fuente preferida esté lista. Intercambiar es similar a bloquear, pero representa la fuente alternativa inmediatamente después de que la página comienza a cargarse y la reemplazará con el tipo de letra preferido tan pronto como esté lista. Este valor tiene un período de intercambio infinito y un período de bloque de cero segundos.

El valor de intercambio no es ideal para el texto del cuerpo para no interrumpir la experiencia del lector a la mitad cambiando el texto. Puede usar esto para el texto del logotipo donde necesita mostrar el nombre o el eslogan de la empresa rápidamente usando un respaldo pero eventualmente requiere el tipo de letra oficial para fines de marca.

Ejemplo: propiedad de visualización de fuente configurada para intercambiar
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

El valor de intercambio se puede ver implementado en las primeras líneas de código (Google Font API) utilizado para demostrar cómo vincular las fuentes de Google en su documento HTML.

El respaldo es similar al intercambio , pero tiene un período de intercambio limitado. Si el tipo de fuente preferido no se carga dentro de un período determinado, generalmente un segundo cero, el texto mantendrá la fuente alternativa durante el resto de la vida útil de la página. Este es un buen candidato para el cuerpo del texto; representa el texto lo más rápido posible y no lo cambiará cuando alguien comience a leer.

El valor opcional es una réplica del respaldo , pero permite que el navegador decida si iniciar o no la descarga de la fuente web, teniendo en cuenta la velocidad de la red de los usuarios. En una situación en la que la conexión es demasiado débil, el navegador tendría que limitar las solicitudes y priorizar los recursos más necesarios al no enviar ninguna solicitud para descargar la fuente web.

Limite la familia de fuentes y las variantes

Debido a que cada familia de fuentes y variante contribuyen al peso de la página, parte de su proceso de optimización de fuentes de Google debe incluir la limitación de estos dos elementos.

La disponibilidad de varias variantes, como cursiva , normal, negrita , etc., no significa necesariamente que tenga la opción de incluirlas en su descarga. Reduzca su descarga a la variante exacta requerida y evite incluir demasiadas. Sería un desperdicio descargar una variante completa porque solo desea usar una palabra de ella. Aquí es donde el próximo truco de optimización para Google Fonts resulta útil.

Usar el parámetro de texto

El parámetro de texto es uno de los mejores trucos de optimización de fuentes de Google que necesita saber y, sorprendentemente, la mayoría de los desarrolladores no lo usan. El parámetro le permite cargar solo los caracteres que necesita.

Suponiendo que desea utilizar solo dos letras de una fuente en el nombre de su empresa, como en el ejemplo a continuación. Usé diferentes fuentes para las letras C y N:

nombre de empresa

Puede solicitar cargar solo esas dos letras, en lugar de la fuente completa. La URL de la fuente incluirá parámetros adicionales como este:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

En conclusión

La optimización de fuentes de Google es una estrategia crucial para mejorar el rendimiento general de un sitio web.

La accesibilidad y la legibilidad son siempre los principales factores en los que centrarse, además de un buen diseño tipográfico. Los métodos mencionados anteriormente para mejorar el rendimiento de las fuentes se centran en reducir el peso de la fuente, acceder a las fuentes web lo más rápido posible y generar formatos/alternativas válidas cuando la red del usuario es inestable.

Háganos saber si ha probado alguno de estos métodos y sobre cualquier proceso de optimización de fuentes web que no se menciona en este artículo.