Fuentes variables: la única fuente que puede cambiar todo y bien para el rendimiento.

¿La web se carga lentamente por muchas fuentes? Problemas clásicos que la web hace para encontrar

¿Alguna vez has sentido que el sitio web que pretendemos diseñar maravillosamente? Use una variedad de fuentes para que se vea dimensional. Resulta ser un "actor", ¿haciendo que el sitio web se descargue increíblemente lento? Queremos temas negros (en negrita), contenido normal (regular) y algunas palabras ligeras, pero hacerlo en los viejos tiempos. Lo que significa que tenemos que ordenar al navegador del usuario que descargue 3 archivos de fuentes (.woff, .woff2, ttf) o más. En el que cada archivo tiene su propio tamaño suficiente, cuanto más peso de muchos estilos, la cantidad de archivos que deben cargarse se multiplica aún más. Este es el "punto de partida" del problema de rendimiento que permite a los usuarios esperar mucho tiempo hasta que esté frustrado. Y puede presionar para cerrar nuestro sitio web antes de ver la belleza que hemos preparado

‍

Solicitud de ilustraciones: las actuaciones de diseño de sitios web están en las sienes frente a la computadora. En la pantalla hay un gráfico de velocidad de carga que se eleva en rojo. Y hay muchos iconos de archivo de fuente, el archivo flota fuera de la pantalla. Representa la carga de peso y carga

¿Por qué usar muchos estilos de fuentes para hacer que la web sea más lenta?

La causa principal de este problema es muy sencilla. Es la arquitectura de "fuente tradicional" con la que hemos estado familiarizados durante mucho tiempo en el mundo de las fuentes estáticas, cada "estilo" o cada "peso" se almacenará en un archivo completamente separado. (700) Necesitamos descargar 4 archivos de fuentes diferentes. Imagine que cada vez que alguien va a nuestro sitio web. Su navegador tendrá que enviar una solicitud al servidor 4 veces para descargar esos archivos. Cuanta más solicitud y el tamaño de archivo más grande. El tiempo utilizado para descargar la carga de la página (tiempo de carga de la página) será más largo como sombra. Este problema es una de las principales causas que causan recursos de bloqueo de renderizado , que es lo que no les gustan las ideas de Google PageSpeed ​​Pages. Y afecta negativamente el rendimiento de nuestro sitio web directamente

‍

Solicitud de ilustraciones: comparación infográfica simple a la izquierda, que muestra "fuentes estáticas" con 4 cuadros (ligero, regular, medio, audaz), enviado al navegador derecho. Con una flecha señalando que lleva menos tiempo

Deje que el sitio web disminuya por muchas fuentes. Tendrá consecuencias más graves de lo esperado

La descarga lenta del sitio web debido a un archivo de fuente pesado, no es solo un asunto pequeño que hace que el usuario lo moleste. Pero afecta la cadena de nuestros objetivos comerciales. Imagine: 1. Experiencia del usuario destruida: a nadie le gusta esperar. Muchas investigaciones muestran que solo se pueden cargar 1-3 segundos, pueden aumentar la tasa de retorno de más del 30%. 2. Ranking de SEO: la velocidad de la página (velocidad de página) es uno de los factores importantes que Google ha sido clasificado durante mucho tiempo. Los sitios web lentos son vistos como de baja calidad. Y difícil de clasificar en los resultados de búsqueda 3. Tasa de conversión reducida: cuando el usuario se frustra y presiona primero el sitio web. La oportunidad para que lo cambie a un cliente. (Ya sea comprar, completar el formulario o solicitar la membresía), se convierte en cero de inmediato. 4. Descarga de recursos por razón: Tener que descargar muchos archivos al opuesto del de diseño web sostenible que se centra en crear una red de energía y amigable para el medio ambiente. Dejar que este problema sea crónico, es como si perdamos tanto a los clientes como a las oportunidades de negocios de forma gratuita todos los días.

‍

Solicitud de ilustraciones: la imagen de Dai Gram que muestra efectos negativos, comenzando desde la "carga de fuente lenta" conduce a "mala experiencia del usuario" (cara aleatoria), seguido de "alta tasa de rebote" (la flecha rebotó en el sitio web) y finalmente "baja ranning y conversión de SEO"

La solución está en "fuentes variables": la única fuente que puede hacer todo.

Y luego la tecnología nos dio la salida. Eso es ** fuentes variables ** o la fuente que puede "cambiar". Su concepto es la revolución de la fuente. En lugar de tener archivos separados para cada peso y todos los estilos. Variable Font incluirá todo en ** "un archivo" **! Este archivo genio mantendrá los datos principales principales de la fuente. Y permiten a los diseñadores o desarrolladores "ajustar los valores" de forma independiente a través del código CSS. Los ejes (ejes). El ajuste común es:

• Peso (WGHT): el grosor delglo de los personajes continuamente, de delgado a negro.
• Ancho (wdth): puede ajustar el ancho-la estrechez de las letras
• Inclinación (SLNT): ajuste el texto de la letra (similar a la cursiva pero puede ajustar los grados).
• Tamaño óptico (OPSZ): ajuste los detalles de las letras para adaptarse a la pantalla en varios tamaños.

El cambio a fuentes variables significa que el navegador desea descargar solo un archivo de fuente de archivo, lo que resulta en el número de solicitudes HTTP y reduce el enorme tamaño del archivo. Este es un cambio que es consistente con la última tendencia de diseño del sitio web que enfatiza tanto la belleza como la mayor actuación al mismo tiempo.

‍

Solicitud de ilustraciones: hermosos gráficos que muestran la única letra 'A', pero hay 4 controles deslizantes: peso, ancho, inclinación, tamaño óptico.

Ejemplos de lo real: cuando el sitio web de noticias cambia a fuentes variables

Para ser más claro, piense en un sitio web de noticias en línea que solía usar fuentes estáticas en su primera página, incluido el principal titular (negro 900), Bold 700), el nombre del nombre de la categoría 500 (Medium 500) y el contenido de noticias (400 regular), que incluye 4 archivos de fuentes de 50kb, haciendo que el sitio web se desacelere. Especialmente en teléfonos móviles que no son fuertes señales de Internet, el equipo de desarrollo decidió relanzar, un nuevo sitio web al cambiar a la fuente variable de la fuente familiar original. ¡El tamaño del archivo disminuye a solo 120 kb! El resultado es: 1. El tiempo de carga de la página disminuyó durante casi 2 segundos: impresiona al usuario desde el principio. 2. Google PageSpeed ​​Insights en la sección de rendimiento de 55 a 92: SEO claramente. 3. La tasa de rebote disminuyó un 15%: los usuarios en la web por más tiempo. Lea más noticias y 4. El equipo de diseño es más libertad: pueden crear un peso de fuente que "se ajuste" con el diseño, como el peso de 650 (semi-bill). Para la parte que no quiere ser tan gruesa, negrita es más prominente que el medio, lo cual es imposible con las fuentes estáticas.

‍

Solicitud de ilustraciones: Compare imágenes de la pantalla de antes y después de la pantalla del teléfono móvil que ingresa al sitio web de noticias a la izquierda (antes) tiene una carga de pivote y el gráfico de la energía de las páginas. La puntuación correcta (después) del contenido muestra resultados completos y el gráfico de la PageSpeed ​​tiene una puntuación verde alta.

¿Quieres usar fuentes variables? ¿Qué hacer? (Empiece de inmediato)

El comienzo de las fuentes variables no es difícil. Especialmente para las personas que ya están familiarizadas con CSS. Este es un paso simple. Que puedes seguir de inmediato:

1. Encuentre las fuentes variables correctas: la mejor fuente de inicio es Google Fonts . Simplemente marque el canal "Show Only Variable Fonts". Encontrará muchas fuentes de buena calidad que están disponibles de forma gratuita. O lo intentará de otras fuentes que también es confiable
2. Anuncio de fuentes en CSS: use @font-face para ejecutar la fuente. Pero en lugar de anunciar cada archivo, anunciaremos solo un archivo y especificaremos el rango del eje que admite. Por ejemplo: @Font-Face {
Font-Family: Inter VF ';
Src: url ('inter-variable.wof2') format ('woff2-varivests');
peso
: nmal;
}
3. Llame al estilo de las sábanas: después del anuncio, puede ejecutar el mismo peso como fuentes estáticas como Font-Weight: 700; O utilizará las calificaciones de la fuente de variación para controlar otros núcleos específicos: H1 {
Font-Family: 'Inter VF', Sans-Serif;
Font-peso: 800; / * Ajuste el grosor * /
}
P {
Font-Family: inter vf ', sans-serif;
Font-peso: 450; multas * /
variación de fuentes: '-5; / * Ajuste ligeramente * /
}
4. Planificación de la carga de fuente: para obtener el mejor rendimiento, debe estudiar una estrategia de carga de fuentes adicional, como el uso de fuentes de pantalla: swap; Para hacer que la pantalla del mensaje con una fuente de copia de seguridad se espera que cargue la fuente de la variable

Para obtener información adicional, se recomienda leer la guía de fuentes variables de MDN Web Docs, que es una gran fuente de desarrolladores.

‍

Solicitud de ilustraciones: Infigue paso a paso de 3 pasos: 1. El icono de aumento está mirando el logotipo de Google Fonts. Código de código con @Font-Face y Font-Variating-Settings . 3.

Preguntas que las personas tienden a preguntarse sobre las fuentes variables.

P: ¿La mayoría del navegador admite fuentes variables?
Respuesta: ¡Apoyo! El navegador más popular hoy (Chrome, Firefox, Safari, Edge). Tanto el escritorio como los dispositivos móviles han estado admitiendo fuentes variables durante muchos años y le permite usarlo con confianza que la mayoría de los usuarios (más del 95%) definitivamente verán su sitio web.

P: ¿Cómo sabemos qué fuente es una fuente variable?
Respuesta: La forma más fácil de observar es mirar a los proveedores de servicios de fuentes. En Google Fonts, habrá un signo "variable". O si se descarga como un archivo normal, el archivo de fuente variable tendrá la palabra 'variable', 'vf' o el nombre del eje. En el nombre del archivo y, por lo general, el tamaño del archivo es más grande que un solo archivo de fuente estática porque contiene todos los estilos de información

P: ¿Las fuentes variables siempre son mejores que las fuentes estáticas?
Respuesta: La mayoría de los "sí", especialmente cuando su proyecto quiere usar más de 2-3 estilos, utilizando fuentes variables. Un archivo dará un mejor rendimiento. Pero si su sitio web es muy fácil y usa solo un estilo (como regular). Usar una sola fuente estática puede ser ligeramente más pequeña. Sin embargo, la selección de fuente variable también proporciona una mejor flexibilidad para ajustar el diseño en el futuro.

P: ¿El uso de fuentes variables afectará el diseño de UI/UX?
Respuesta: ¡Impacto de una mejor manera! Da libertad y resolución en la detención de impresiones (tipografía) al diseñador basado en roles. Hace que sea más fácil ajustar todo para ser perfecto si necesita un servicio de diseño UX/UI que utilice esta tecnología moderna para crear la mejor experiencia. Esto es algo que los expertos pueden ayudarlo.

‍

Solicitud de ilustraciones: Preguntas y preguntas y respuestas con preguntas (?) Y correctas marcas (✓) con respuestas cortas. Eso es fácil de entender para cada pregunta que hay varios logotipos del navegador (Chrome, Firefox, Safari, Edge) que muestran para comunicar el apoyo integral.

Resumen: es hora de actualizar a fuentes variables para sitios web más rápidos y mejores.

En este punto, ya hemos acordado que las fuentes variables no son solo un juguete nuevo para los diseñadores, sino una "herramienta de cambio de juego" que ayuda a resolver el problema del rendimiento del sitio web directamente. Cambios de muchas descargas de fuentes estáticas a fuentes variables. Es una inversión que proporciona enormes rendimientos tanto en términos de velocidad de carga, mejor experiencia del usuario, mayor clasificación de SEO y lo más importante, independencia en diseños ilimitados Es una decisión que tiene un buen efecto en todas las partes. Tanto el propietario de la web, desarrolladores, diseñadores y especialmente nuestros "usuarios"

No permita que la belleza de la tipografía debe intercambiarse a la velocidad que se pierde más. Intente abrir su corazón y use las fuentes variables para aplicar a su proyecto a partir de hoy. Y encontrará que es posible crear un sitio web que sea "hermoso" y "rápido". ¡Y más fácil de lo que piensas!

‍

Solicitud de ilustraciones: gráficos potentes que realizan cohetes que se elevan al cielo, el cohete tiene la palabra "fuentes variables" adjuntas y tiene una ruta a través de varios íconos, como el corazón (amor del usuario) y la clasificación de SEO.

‍