En las últimas semanas, por coincidencia en el trabajo y en proyectos de terceros, he aprendido mucho sobre las fuentes web, así como también sobre las fuentes de Google en particular. Gracias a esto, puedo dar una respuesta más detallada a una pregunta que me pareció simple en el pasado: ¿debería almacenar Google Fonts en su servidor?Hablando objetivamente, admito que las fuentes no son mi fuerte. Prefiero un enfoque más práctico y no me concentro en el diseño (mira este sitio y asegúrate de que sea así) y antes de eso no sentí la necesidad de usar fuentes no estándar. Por supuesto, se ven un poco más agradables y "marcan" el texto. Pero para el texto principal, tienen poco sentido. Nunca califiqué el artículo (o lo relacioné con su contenido de manera diferente), solo porque se utilizó una hermosa fuente para enviarlo. Sin embargo, era plenamente consciente del impacto negativo de las fuentes adicionales en el rendimiento y la velocidad de carga de la página, por lo que quizás debido a esto soy parcial.Sin embargo, muchos pueden estar en desacuerdo conmigo, y las fuentes, ya sean importantes para mí personalmente o no, son utilizadas regularmente por muchos otros desarrolladores y, a menudo, simplemente no tienen otra opción. Veamos qué se puede hacer para no perder la velocidad del sitio y dejar felices a los diseñadores.Recursos autohospedados vs externos
Hace unos años se consideraba normal usar CDN para conectar recursos compartidos (por ejemplo, jQuery con code.jquery.com , y sí, todavía lo usan mucho ). Para aclarar, por CDN me refiero a cargar recursos del dominio de otra persona, no de su propia CDN.La razón fue que los navegadores supuestamente limitaron el número de conexiones a cada dominio (generalmente a 6 conexiones), por lo que usar otro dominio le dio otras 6 conexiones. Esto podría ser cierto en el pasado (especialmente cuando la restricción era <6 dominios) y antes de que HTTPS se convirtiera en la norma, aumentando significativamente los costos de conexión. Además, HTTP / 2en realidad se beneficia del uso de una conexión (¡sobre todo!), por lo que usar otros dominios suele ser una pérdida de rendimiento en lugar de una adquisición.Otra forma de lograr lo mismo fue fragmentar el dominio principal con uno o más subdominios técnicos (por ejemplo, assets.example.com), y en este caso, las fuentes nuevamente no aparecen en su dominio principal, desde donde se carga su página web. Sin embargo, este método tiene los mismos problemas de conexión, por lo que no se puede llamar ganancia de rendimiento, incluso si alguna vez lo fue.Otra ventaja de un CDN público era la alta probabilidad de que los visitantes ya tuvieran esta versión de jQuery condicional en el caché. Pero, nuevamente, estoy convencido de que esto es demasiado. Hay tantas bibliotecas y sus versiones, yEl caché del navegador es más pequeño de lo que parece, por lo que una coincidencia de este tipo es muy poco probable. Además, Safari utiliza un caché HTTP único para cada dominio visitado, por razones de privacidad (caché de doble clave), y Chrome también presentará esta función pronto . Por lo tanto, no hay nada más para discutir.Este tema se convierte sin problemas en una conversación sobre el impacto de las CDN de terceros en la privacidad. No tiene idea de cómo y por qué están rastreando a sus usuarios, lo que no puede suceder con una solución autohospedada. Y las innovaciones recientes en la ley obligan a muchos sitios a enumerar explícitamente todas las cookies utilizadas en el sitio. No es la tarea más fácil cuando se usan CDN de terceros.Durante mucho tiempo, he estado convencido de que los CDN de terceros o incluso el fragmentación de sus propios dominios están muy lejos de la ganancia de rendimiento prometida. Con demasiada frecuencia, puede encontrar sitios donde el dominio principal distribuye solo index.html, y luego se pierde mucho tiempo desperdiciando la configuración de nuevas conexiones .Esto sin mencionar las implicaciones de seguridad de descargar recursos de sitios de terceros. Sí, hay SRI , pero puede causar problemas inesperados , y honestamente no veo el punto. Si es un recurso estático (donde puede usar SRI), almacénelo localmente, y si no es estático (porque el contenido puede cambiar), no puede usar SRI.Además, el uso de recursos de fuentes de terceros amenaza con convertirse en un único punto de falla (SPOF) y deshabilitar su sitio. Esto ha sucedido más de una vez y, aunque puede parecer poco probable que Google Fonts se caiga, puede ser bloqueado por representantes de la compañía o por países enteros .En general, cada vez más personas aconsejan mantener sus recursos estáticos en su lugar , idealmente en el dominio desde el que distribuye las páginas web. Las fuentes son recursos estáticos, por lo que se aplica lo mismo a ellas, ¿verdad? Bueno, resulta que no todo es tan simple, porque las fuentes tienen sus propias peculiaridades y técnicas de optimización, lo que puede hacer que el almacenamiento local sea un poco más complicado ...Fuentes de Google y cómo funcionan
Google Fonts es un recurso increíble si te gustan las fuentes. 977 fuentes gratuitas que cualquiera puede usar gratis. Las fuentes comerciales a menudo son ridículamente caras y generalmente tienen licencia en lugar de venderse, es decir, las tarifas se cobran en función del número esperado de visitas a la página. Por lo tanto, tener muchas fuentes gratuitas y fáciles de usar en una colección es muy útil.Pero eso no es todo. Google Fonts, como muchos proveedores de recursos para sitios (consulte el ejemplo de jQuery anterior), proporciona CDN y almacena fuentes para que todos puedan usar directamente desde sus servidores. Esto significa que puede comenzar a usar fuentes simplemente agregando una línea de código en su sitio para cargar la hoja de estilo:<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
También puede agregar más propiedades y fuentes en una línea para cargar varias fuentes y variaciones de cada una de ellas:<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
La desventaja es una caída en el rendimiento (la ventaja también está en el rendimiento, pero esto no es tan obvio, llegaremos a esto). El problema es que su sitio (digamos www.example.com ) carga una hoja de estilo de fonts.googleapis.com, que devuelve algunos CSS con reglas de fuente de fuente. Aquí está la fuente del enlace en el ejemplo anterior:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Hablaremos sobre lo que significan algunas de estas configuraciones más adelante (y también sobre por qué hay dos reglas de fuente), pero por ahora esto significa que puede usar esta fuente en sus estilos de esta manera:body {
font-family: 'Lato', sans-serif;
}
Sin embargo, ahora tiene que conectarse a fonts.googleapis.com, descargar CSS y luego conectarse a fonts.gstatic.com y descargar las fuentes por sí mismas (por qué Google no puede alojar tanto CSS como fuentes en el mismo dominio, ¡realmente no lo entiendo!).A menudo, el navegador detecta las fuentes con retraso al cargar la página (después de todo, debe cargar CSS para encontrar enlaces a ellas). Pero las fuentes de Google se descubren incluso más tarde, porque CSS necesita descargarse desde otro dominio, y luego las fuentes del tercer dominio y, como mencioné, establecer una conexión HTTPS tampoco es instantánea. Esto se puede ver en el siguiente diagrama en cascada generado por WebPageTest (tenga en cuenta que todas las pruebas se ejecutaron con Chrome - 3GSlow):
La línea 1 muestra que HTML se carga primero. Luego, tan pronto como se descarga y lee en menos de 2 segundos, el navegador detecta la necesidad de cargar el CSS de Google Fonts y lo carga en la línea 4. Se tarda un segundo en establecer una conexión, y luego se descarga un archivo durante 3,5 segundos. Finalmente, el navegador se enteró de la existencia de nuestra fuente y la cargó en la línea 6, después de haber perdido otro 1 ¼ de segundo en el camino hacia la conexión con fonts.gstatic.com.Por lo tanto, usar esta fuente de Google Fonts nos cuesta tres segundos completos de productividad desde el momento en que HTML está disponible, ¡sin tener en cuenta el tiempo para descargar la fuente en sí!Acelerar las fuentes de Google precargando recursos
Puede mitigar este terrible impacto en el rendimiento al cargar CSS y fuentes de dos dominios diferentes. El primer dominio (para CSS) debe ubicarse más cerca del comienzo del archivo index.html para que el navegador lo lea lo antes posible, pero el segundo aún está oculto. Sin embargo, sabemos cómo será este dominio (fonts.gstatic.com), por lo que podemos abrir la conexión de antemano para ahorrar tiempo en la segunda conexión más adelante:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Al volver a probar, vemos la siguiente imagen:
Aquí vemos que la conexión en la línea 5 está abierta de antemano, antes de cargar CSS. Entonces ganamos más de un segundo (descargando fuentes en 4 segundos, no 5.25), porque logramos evitar perder el tiempo durante la conexión y las fuentes se descargan inmediatamente después de leer las fuentes CSS Google.Puede pensar que podría seguir adelante y precargar toda la fuente, en lugar de estar contento con solo unirse al dominio, pero Google Fonts llama a las fuentes hashes únicos. En el ejemplo anterior, la fuente descargada se llama S6uyw4BMUTPHjx4wXg.woff2, no lato.woff2, por lo que la precarga no es posible a menos que desee que su sitio se bloquee un día cuando Google de repente decida cambiar este hash.En cualquier caso, si usa Google Fonts y no tiene intención de hacer nada más después de leer esta nota, agregue al menos una conexión preliminar al dominio, si aún no lo ha hecho. Esta es solo una línea de código y debería mejorar significativamente el rendimiento de su página.En realidad, Google Fonts proporciona un comando similar en los encabezados HTTP cuando procesa CSS:
Pero en muchos casos esto no ayudará mucho, porque para cuando reciba los encabezados de respuesta HTTP del servidor con CSS, el navegador ya sabe que desea conectarse a este dominio para descargar fuentes. Por lo tanto, es mejor que especifique esto en el código HTML para que la precarga funcione antes (no importa que esté duplicada de esta manera, simplemente se ignorará el segundo intento). Sin embargo, si su página aún se está procesando para cuando se reciben los encabezados del servidor CSS de Google Fonts y el DOM no está listo (¿tal vez esto es una señal de demasiado JavaScript en su página?), Esto puede ayudar a mejorar el rendimiento cuando finalmente se aclare qué fuente descargar.Visualización de fuente: intercambio
En el código de fuente anterior, puede ver la pantalla de fuente: swap; line. Esta es una instrucción relativamente nueva. Se puede agregar a la declaración de fuente y le indicará al navegador que use primero el respaldo, es decir, la fuente del sistema (sans-serif en este ejemplo), y luego reemplazarlo con la fuente real después de descargarlo. De esta forma, puede evitar retrasos en la carga de contenido cuando la fuente aún no se ha cargado y también puede mejorar el rendimiento.Sí, esto lleva a un brote de texto sin estilo (FOUT): los mismos "saltos" en el contenido durante la carga de la página, pero a algunas personas no les gusta (mi opinión está de acuerdo, el contenido es más importante que el estilo, pero el texto que salta a través de la página es molesto, aunque esto puede mitigarse ajustando la fuente de repuesto). Una alternativa es el texto invisible flash (FOIT). En este caso, el texto está oculto hasta que aparece la fuente, lo que obviamente retrasa la descarga y puede causar otros problemas si se carga un texto, ¡pero otros no !En cualquier caso, antes de la introducción de font-display: swap, diferentes navegadores trataban esto de manera diferente: algunos, como IE y Edge, usaban FOUT, otros usaban FOIT, y tenían diferentes tiempos hasta que esperaban a que las fuentes esperaran. Debido a esto, si la fuente no se carga, su contenido puede permanecer invisible durante mucho tiempo. La introducción de font-display: swap permitió a los desarrolladores de sitios web decidir por sí mismos cómo ocurriría esto. La mayoría de los navegadores admiten font-display: swap, con la excepción de IE y Edge, pero como se mencionó anteriormente, de todos modos usan esto de manera predeterminada. Las fuentes de Google también admiten varias opciones de visualización de fuentes y ofrecen visualización de fuentes: intercambio por defecto.Por lo tanto, otro consejo si usa las fuentes de Google es verificar que tiene el parámetro & display = swap en la URL, y si no (se ha admitido recientemente), agréguelo:por ejemplo, reemplace esto:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
En este:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
También puede especificar uno de los otros valores de visualización de fuente , por ejemplo opcional , si lo desea.Desafortunadamente, esto resuelve solo la mitad del problema. Esta instrucción está en CSS, que devuelve Google Fonts, por lo que solo es útil después de haber descargado el archivo CSS. Por lo tanto, ayuda a hacer frente al retraso mientras se cargan las fuentes, pero no ayuda mientras espera que se cargue este CSS. Por lo tanto, esta es una buena mejora (al menos para aquellos que prefieren FOUT), pero aún no es la solución completa en su conjunto.Google Fonts
Yo ayudé a crear Web almanaque (una mirada fantástica en el estado de la Internet - ver por sí mismo si no lo ha visto todavía) y la descarga lenta de las fuentes de Google en nuestro sitio me molesta y quería arreglarlo. Especialmente FOUT con visualización de fuente: intercambio. Me preguntaba si podríamos reducir el impacto de esto, y la solución local parecía estar almacenando archivos localmente, posiblemente usando precarga.Ya hemos utilizado las técnicas anteriores (precarga y visualización de fuentes: intercambio;), pero, por supuesto, sería mejor evitar conectar CSS desde el exterior. Sabemos lo que habrá en este CSS. Entonces, ¿con confianza elegir autohospedado? Aquí es donde se pone interesante ...Encontré un script conveniente en GitHub ( Descarga de fuentes de Google), lo que me ayudó a descargar todas las diferentes opciones de fuente (ya que había muchas, hasta 9 dependiendo de la página), y luego copié el CSS, que se muestra en nuestra hoja de estilo principal, y cargó las fuentes en el servidor. Existen otras herramientas en línea que hacen lo mismo. Todo parecía funcionar, y nos deshicimos de la molesta carga de CSS y la necesidad de trabajar con dos dominios.Sin embargo, después de una inspección más cercana, noté que las fuentes eran más grandes:
Como puede ver, ha habido un aumento significativo en el tamaño (¡hasta un 74% adicional para algunos de ellos!) En comparación con las fuentes descargadas de Google (derecha) y las fuentes ubicadas localmente (izquierda). Inicialmente, pensé que esto se debía a mi servidor web local, por ejemplo, debido a que la compresión estaba desactivada. Pero las fuentes WOFF2 son servidas sin compresión por el servidor web, o al menos debería serlo, ya que el formato incluye compresión Brotli. Además, la captura de pantalla anterior muestra los bytes cargados (negro en la parte superior), así como los bytes sin comprimir (ligeramente más claros en la parte inferior) para cada columna (son bastante similares en ambas columnas, ya que las fuentes se envían realmente sin compresión por el servidor web, pero los bytes descargados incluyen encabezados HTTP , por lo que son un poco más grandes), y hubo diferencias en los bytes comprimidos y no comprimidos, por lo que ese no es el punto.La comparación de las reglas de tipo de letra obtenidas usando la herramienta con las originales reveló una diferencia: de lasfuentes de Google:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Desde la herramienta de descarga:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:
local('Lato Regular'),
local('Lato-Regular'),
url('Lato_400.woff2') format('woff2'),
url('Lato_400.woff') format('woff');
}
La primera diferencia es que perdimos la visualización de la fuente: la línea de intercambio, pero esto se puede solucionar sin problemas. Mucho más interesante es el hecho de que Google Fonts distribuye dos fuentes, e incluye diferentes rangos Unicode en ellas. Esto se debe al subconjunto de fuentes y reduce los archivos de fuentes.Subconjunto de fuentes
El subconjunto de fuentes es la eliminación de caracteres que no va a utilizar para reducir el tamaño del archivo de fuente. Por lo general, la mayoría de los occidentales usan solo caracteres latinos, y descargar una fuente con todos los caracteres que probablemente no usará es irracional. Había escuchado sobre esto antes, ¡pero nunca pensé cuán significativo podría tener esto! Google Fonts renderiza automáticamente una fuente con un conjunto de caracteres latinos, y también, cuando es posible, conecta una segunda fuente para caracteres latinos extendidos (por ejemplo, Ā), que se descargarán solo si es necesario.De hecho, también puede solicitar una fuente especial que contenga solo los caracteres que necesita con el parámetro de texto:https://fonts.googleapis.com/css?family=Lato&text=ABCA juzgar por otras observaciones, la herramienta de carga de fuentes que utilicé aparentemente admite el subconjunto de fuentes, pero solo para todo el "idioma" (latín o latín extendido), y combina ambos subconjuntos de caracteres en un solo archivo. Al final, volví a usar lo que usaba mi navegador y dejé de usar esta herramienta. Esto dio tamaños de archivo similares (con una ligera diferencia debido a los encabezados HTTP en mi entorno de desarrollo), pero pronto descubrí que no era solo un subconjunto de fuentes.Google Fonts distribuye fuentes de forma inteligente
Google Fonts no siempre representa el mismo CSS y depende del agente de usuario utilizado . Por ejemplo, para Internet Explorer 11, envía lo siguiente:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}
Aquí puede ver que solo proporciona el formato WOFF, ya que IE 11 no es compatible con WOFF2 y, por la misma razón, no se especifica el rango unicode. Proporciona visualización de fuente: intercambio (como señalé en la URL para CSS), aunque el navegador no lo admite, pero no daña.No es solo el fabricante y la versión del navegador. Sugerencia de fuenteincluye instrucciones adicionales en el archivo de fuente, que luego se utilizan para proporcionar la mejor visualización de la fuente, especialmente en pantallas de baja resolución o para tamaños realmente pequeños. La sugerencia de fuentes se usa en Windows, pero no en MacOS, por lo que dependiendo del sistema operativo con el que trabaje al recibir fuentes de Google, utilizando un navegador (incluso si usa Chrome en cada plataforma), puede obtener archivos de fuentes con sugerencias o sin él. Si descargas la versión de Windows y la usas por ti mismo, en realidad harás que los usuarios de MacOS sufran la necesidad de procesar grandes archivos de fuentes llenos de sugerencias no utilizadas, y si haces lo contrario, puedes hacer que los usuarios de Windows sufran una peor visualización de fuentes, sin sugerencia de fuente.Cuando usé Google Fonts, y cuando descargué fuentes para uso local, lo hice en mi Mac, así que obtuve archivos más pequeños. Cuando utilicé la herramienta, obtuve fuentes completas, con sugerencias. ¡Esa fue otra razón para la gran diferencia de tamaño!¿La sugerencia de fuentes sigue siendo relevante?, porque las pantallas de alta definición se han vuelto más comunes; esta es una buena pregunta, y muchas fuentes se entregan inicialmente sin sugerencias, ya que lleva mucho tiempo crearlas. Cuando está presente, puede aumentar significativamente el tamaño de la fuente. En el caso de Lato, el tamaño se duplica. ¿Vale la pena la carga de trabajo adicional que encontrarás al abandonar Google Fonts y localizar las fuentes localmente? Esta es otra decisión que debes tomar por ti mismo.Por lo tanto, Google Fonts CDN es compatible con un script inteligente que regala las fuentes más adecuadas, optimizándolas para mantener el máximo rendimiento. Al cambiar al almacenamiento local de fuentes, tendrá que configurar todo esto usted mismo, y existe la posibilidad de perder la visualización correcta de sus fuentes en algunos navegadores si no lo hace.Para Web Almanac, analizamos las estadísticas de los navegadores de los visitantes y decidimos admitir solo WOFF2, y también usar versiones de MacOS sin sugerencias, ya que pesan la mitad. Este CSS simplificado (especialmente porque el rango unicode es compatible con todos los navegadores que admiten WOFF2), y los usuarios de IE 11 y otros navegadores antiguos ven sans-serif de forma predeterminada, lo que no se ve muy bien, pero en nuestra opinión, las fuentes son una mejora progresiva, e incluso sin ellas, el sitio aún es más que utilizable. Además, los navegadores más antiguos pueden incluso beneficiarse del uso de fuentes predeterminadas del sistema, ya que es probable que se usen en máquinas más antiguas y de baja potencia.También puede hacer otros ajustes a las fuentes que usa si lo desea (¡compruebe las licencias primero!), Pero copiar las fuentes predeterminadas de Google utilizadas en Chrome en MacOS probablemente sea suficiente para la mayoría de nosotros si desea admitir solo los navegadores WOFF2 sin sugerencias. .Sin embargo, si nos decidimos por las fuentes de Google, tendríamos WOFF (e incluso formatos más antiguos) e insinuaríamos cuando sea necesario, sin la necesidad de una configuración profunda de sustitución de la fuente correcta dependiendo del navegador. Por lo tanto, el uso de Google Fonts para fuentes aún tiene ciertas ventajas, y al elegir el almacenamiento local, las rechaza. Esto también se aplica a cualquier mejora futura de Google Fonts .Mejoras de fuentes futuras
Como profundicé en el tema de las fuentes y advertí que podría perder cualquier beneficio futuro de las fuentes de Google al ir al almacenamiento local, quiero alejarme un poco del tema principal y hablar sobre otras cosas interesantes que descubrí. ¿Cuáles son los próximos grandes cambios en el mundo de las fuentes? Bueno, hay dos cambios que actualmente se están discutiendo activamente y que pueden afectar las fuentes en el futuro (y, por lo tanto, pueden ser compatibles con Google Fonts, posiblemente de forma predeterminada si elige usar este servicio): fuentes variables y enriquecimiento progresivo de fuentes .Fuentes variables
Las fuentes variables le permiten usar diferentes estilos de fuente sin tener que descargar archivos individuales. Mencioné anteriormente que Web Almanac usa hasta 9 archivos de fuentes diferentes, pero en realidad son solo 2 fuentes. La razón es simple: el sitio también utiliza negrita, cursiva, negrita e incluso versiones más delgadas de uno o ambos. Tantas variaciones de la misma fuente pueden parecer inapropiadas y puede pensar que el navegador en sí se encargará de cambiar el grosor del texto o escribir en cursiva. Sí, es posible. Pero cada navegador hace esto un poco diferente, y los resultados pueden ser radicalmente diferentes , por lo que muchos los llaman "fuentes artificiales".La única forma de garantizar la misma pantalla es utilizar una "fuente real" específicamente para cada estilo que necesite.Las fuentes variables estandarizan la visualización de diversas variaciones de fuentes y la necesidad de archivos adicionales desaparece. Teóricamente, podríamos reemplazar estas 9 fuentes con 2 cuando sus versiones de fuente variable estén disponibles.Esto abre un montón de posibilidades para usar fuentes en Internet. Aunque me parezca que las 9 opciones para las dos fuentes son demasiado, en realidad no lo es, mientras que las fuentes variables permitirían variaciones infinitas. En dispositivos móviles, puede establecer un grosor ligeramente diferente para "negrita" que en computadoras de escritorio y tabletas. Fuentes variables con unas simples instrucciones CSSpermita esto sin el costo de los recursos para descargar una fuente adicional. Recientemente en DotCSS, Jason Pamental habló sobre las fuentes variables y demostró cómo puede obtener una página bellamente diseñada con lo que parecen ser muchas fuentes diferentes, ¡todo usando un solo archivo!Usar fuentes variables también significa cargar todas las variaciones de fuentes al mismo tiempo , evitando la confusión causada por los problemas mencionados anteriormente. Esto también conduce a menos redibujos del diseño: sin fuentes variables, el navegador volverá a dibujar la página una y otra vez a medida que se cargue cada variante de fuente individual.Las fuentes variables tienen buen soporteen los navegadores modernos, pero su inconveniente es el gran tamaño, porque almacenar diferentes variaciones de fuente requiere más espacio, como es el caso con las sugerencias de fuentes. Depende de la fuente, pero generalmente son dos veces más grandes después de la compresión, por lo que para justificar su uso, debe necesitar al menos dos estilos. Aun así, es mejor que prefiera un archivo más pequeño que se carga para mostrar texto crítico, en lugar de un archivo más grande para mostrar todo el texto. Y de nuevo, ¿puede usar font-display: swap ser una solución menos problemática? ¡Esto depende de cada propietario del sitio para decidir!Enriquecimiento progresivo de fuentes
El enriquecimiento progresivo de fuentes , en esencia, lleva el subconjunto a un nuevo nivel y le permite descargar definiciones de caracteres adicionales según sea necesario en forma de una secuencia de información adicional que complementa la fuente cargada actualmente, pero no agrega una adicional. Esto puede parecer una pequeña ventaja para nosotros los occidentales, pero para otros idiomas, especialmente en el Lejano Oriente, los archivos de fuentes pueden ser muy masivos (por ejemplo, 2Mb ), debido a la gran cantidad de caracteres en estos idiomas. Por esta razón, las fuentes web se usan con menos frecuencia en dichos países y el enriquecimiento progresivo de las fuentes puede tener un efecto positivo en la situación.El enriquecimiento progresivo de fuentes, según tengo entendido, se encuentra en una etapa mucho más temprana que las fuentes variables, pero haydemostración en línea . En cualquier caso, este es otro cambio potencialmente interesante relacionado con las fuentes.¿Google Fonts continuará mejorando?
Dado cómo funciona Google Fonts, es fácil imaginar que puede seguir creciendo con nuevas mejoras, como las que se describen en este artículo (¡o muchas otras!), Con solo cambiar el CSS que proporciona. Y él puede hacerlo sabiamente. Por ejemplo, determinar si su navegador admite nueva tecnología (como lo hace ahora con el formato de fuente - WOFF o WOFF2), o de otras maneras. Por ejemplo, si solicita más de dos fuentes y le da a la fuente variable menos recursos, entonces puede automatizar y vincular el mismo archivo de fuente en varios anuncios de fuente, y si solicita solo una opción, consulte una más liviana, fuente tradicional ¿Suena descabellado? Ya lo hicieron con una fuente.(Oswald)! Honestamente, no sé si lo mismo es posible con el enriquecimiento progresivo de fuentes, porque no entiendo completamente el principio de su trabajo, pero será interesante verlo.Además, vale la pena mencionar que al usar Fuentes de Google, al actualizar fuentes, por ejemplo, para agregar nuevos conjuntos de caracteres o corregir errores en los glifos, obtienes nuevas fuentes automáticamente. Con el almacenamiento local, esto no funcionará, al menos no sin intervención de una mano. Tal vez podría mirar en la dirección de las solicitudes de proxy a través de su dominio y, por lo tanto, tomar lo mejor de ambas opciones, pero esto probablemente será más lento y requerirá una configuración y administración adicionales.Por otro lado, el almacenamiento local proporciona estabilidad, ya que algunas actualizaciones pueden afectar su diseño, por ejemplo, si un título en una línea comienza a extenderse a dos debido a un cambio de fuente. Hay una categoría de personas que están muy molestas por estoBeneficios del almacenamiento de fuentes locales
Por lo tanto, hemos discutido muchas teorías, y aunque existen beneficios potenciales obvios del almacenamiento local, también hay dificultades para considerar, por lo que usar Google Fonts también tiene algunos beneficios obvios. Entonces, ¿vale la pena alojarse en uno mismo? Depende de las comodidades reales en una situación particular. Si la diferencia en el rendimiento es insignificante, puede valer la pena seguir usando Google Fonts, si es grande, respectivamente.Para Web Almanac, recientemente seleccionamos el almacenamiento local de Google Fonts, y las pruebas mostraron cambios dramáticos:
La imagen inferior contiene fuentes locales en nuestro servidor de prueba, y puede ver que el tiempo de descarga se redujo a la mitad, ¡de 6 a 3 segundos! ¡Después de un análisis más profundo, vi que la productividad aumentó aún más (3 ⅓ segundos de ahorro)!Lo que no es tan obvio (pero lo que veremos más adelante), en este punto, las fuentes no están completamente cargadas en ninguna de las imágenes, con el almacenamiento local, toma 7.5 segundos y 10.5 segundos cuando se usa Google Fonts. Sin embargo, las fuentes utilizadas son bastante similares a las estándar, y no hay saltos notables en el diseño. Esto se puede ver en el siguiente diagrama:
El diagrama muestra que la página con almacenamiento local (en rojo) se carga casi por completo en 2,4 segundos, y luego se actualiza varias veces más a medida que se cargan las imágenes, después de lo cual también se muestran las fuentes. Sí, me gustaría simplificar todo, pero aún así es imposible optimizar algunos costos de descarga de fuentes.La razón por la que las mejoras son realmente tangibles se debe a una cosa más que no tuve en cuenta al principio: la representación de bloques CSS. Entonces, si hay un enlace a Google Fonts CSS, el navegador no solo retrasa la visualización del texto, sino que también retrasa la visualización de todo el contenido de la página. La fuente es una mejora progresiva, por lo que podemos renderizar con seguridad el resto de la página e incluso el texto en sí (con fuentes estándar / alternativas), pero el navegador no lo hace, solo ve que hay algo de CSS e intenta cargarlo, posponiendo la descarga El resto de la página. No hay carga asincrónica para CSS- pero tal vez debería ser para tales casos? Sin embargo, corremos el riesgo de que, en caso de problemas para conectarse a Google Fonts, ¡no se pueda acceder a todo su sitio hasta que el navegador deje de intentar procesar el enlace!
En la tabla de comparación anterior, la línea verde vertical del Inicio de procesamiento ya ocurre después de 6 segundos, ya que tiene que esperar hasta que se cargue el CSS de Google Fonts en la línea 12, pasando la mitad del tiempo conectándose al dominio y la otra mitad cargando realmente.Compare esto con la versión local:
aquí podemos comenzar a renderizar tan pronto como se cargue y procese el CSS del sitio en 2.5 segundos. Esto se debe a que no hay demora para conectarse al dominio de Google Fonts.En ambos casos, vemos que el inicio del renderizado ocurre antes de que se carguen las fuentes, y gracias a la magia de la visualización de fuentes: intercambio, el texto aún es visible. Por lo tanto, al menos cuando se usa font-display: swap, sería mejor si Google Fonts no se cargara usando la representación de bloqueo de CSS, sino que, por ejemplo, se cargara a través de JavaScript asíncrono, que inserta fuentes CSS en la página solo después de cómo se descargan Si el proceso se implementara de esta manera, no se producirían demoras en el procesamiento, sin embargo, todavía hay demoras al conectarse y una larga espera para que el texto se muestre correctamente.UPD: Creé un problema en GitHub Google Fonts con una propuesta para agregar una forma de descargar Google Fonts sin bloquear el renderizado. ¡Vote si usted también lo desea!Zach Leatherman aboga por este enfoque para reducir el número de redibujos , y muestra que esto también es posible solo con JavaScript, sin la necesidad de un archivo CSS. Luego, muestra otras ventajas de administrar sus fuentes con JavaScript, por ejemplo, puede negarse a descargar las fuentes si el sitio está abierto desde una red lenta (utilizando la API de información de red ), o si el usuario tiene habilitada la configuración Guardar-Datos o Prefiere-Movimiento reducido . Características interesantes!Precargando Fuentes
Una vez que se haya alejado de las URL hash de Google, podrá precargar la fuente para mejorar aún más el rendimiento. Sin embargo, esta opción tiene algunas fallas potenciales, como lo discutió Andy Davies en el artículo Precargando fuentes y el rompecabezas de las prioridades . Básicamente, al precargar las fuentes y subirlas en el orden de prioridad, implícitamente disminuye la prioridad de otras descargas críticas (por ejemplo, CSS), y debido a un error en Chrome, las fuentes pueden incluso saltar por encima de algunas de ellas.Además, la precarga cuando no se utilizará la fuente provocará una carga innecesaria innecesaria, por ejemplo, si la versión local existe y se puede usar con prioridad, o si el navegador no admite este formato de fuente (aunque todos los navegadores que admiten la carga previa también admiten WOFF2 ) Junto con la recomendación de usar la carga previa, Google claramente le advierte sobre esto , y es bueno ver que le prestan atención.Cuando se utiliza la función font-display: swap, la necesidad de precargar puede no ser tan fuerte. Aunque en este caso, aún puede ganar tiempo descargando la cantidad mínima requerida de fuentes y evitando FOUT y redibujando. Por el momento, no utilizamos la precarga en Web Almanac y antes de comenzar, necesitamos algunas pruebas más, pero por ahora estoy satisfecho con lo que es.Conclusión
Respondiendo una pregunta en el título del artículo: sí, vale la pena, ya que el aumento de rendimiento es significativo. Por supuesto, sus resultados pueden variar, ya que todo depende del sitio en particular, así que pruebe, pruebe y pruebe nuevamente. Pero, creo, esta sigue siendo la mejor opción, en términos de rendimiento, para la mayoría de los sitios.Sin embargo, Google Fonts no es solo un repositorio de cientos de fuentes gratuitas, sino que también es un mecanismo de entrega inteligente que utiliza muchas de las últimas técnicas de optimización para representar las fuentes más adecuadas con el mínimo esfuerzo por parte del propietario del sitio. Al cambiar a autohospedado, idealmente debería volver a implementar muchas mejoras útiles, como la visualización de fuentes: intercambio, eliminación de sugerencias de fuentes (al menos para algunos navegadores), o de lo contrario, solo puede dañar el rendimiento de las pesadas. archivos de fuenteEsta no es una tarea fácil (y Google Fonts lo hace por usted, sí). Pero dado que ahora usar solo el formato WOFF2 es la única opción realista, y los navegadores admiten la mayoría de las técnicas de optimización, todo se ha vuelto mucho más fácil que antes. Sin embargo, vale la pena tener algún conocimiento sobre las fuentes web antes de configurarlo todo (¡espero que esta publicación haya ayudado en esto!), Y al mismo tiempo esté atento a los nuevos cambios en el mundo de las fuentes, ya que sin duda habrá más mejoras.Bueno, ¿tal vez estábamos demasiado interesados en la optimización y con el almacenamiento local podemos permitirnos usar la fuente completa, sin subconjuntos y con sugerencias? En el sitio web de Google Fonts, puede descargar cualquier fuente y es relativamente simple, aunque es extraño que el archivo no incluya los formatos WOFF y WOFF2cuando utilizo este método de carga, ¡lo cual es completamente incomprensible para mí! Sin embargo, si está realmente interesado en mejorar el rendimiento (¡y debería estar interesado!), Entonces debe intentar hacer lo correcto. Este artículo solo muestra que es un poco más complicado que simplemente descargar y colocar fuentes en su sitio, como siempre esperé.¡Guau, algo de texto resultó ser más largo de lo que esperaba! Pero espero que haya estado tan interesado en comprender el tema como usted y ahora tenga un par de ideas nuevas para acelerar las descargas de fuentes en su sitio. Le recomiendo que siga a Jason y Zach en Twitter para obtener más información sobre las fuentes, y a Andy para obtener más información sobre la velocidad general de las aplicaciones web.