El uso de fuentes prevalece en la mayoría de las páginas web y, a menudo, incluye errores. Muchos de estos errores afectan negativamente el presupuesto de rendimiento web. Este artículo tiene como objetivo proporcionar información sobre el uso de fuentes web y ayudar a mejorar el rendimiento de su web.
Como se muestra en la jerarquía aplicada al renderizar cualquier página web, los elementos de fuente pueden retrasar la renderización de otros elementos hasta que se cargan. Gestionar adecuadamente este retraso es importante tanto para el cambio de diseño acumulativo (CLS) como para la percepción del usuario.
El problema con la carga de fuentes
Hasta que se cargan las fuentes de la página, la visibilidad de las fuentes durante el proceso de representación HTML y CSS varía de un navegador a otro. Aquí hay un resumen de cómo los diferentes navegadores manejan esta situación:
| Navegador | Comportamiento predeterminado si la fuente no está lista... |
|---|---|
| Southern Implants | Utiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente. |
| Chrome | Ocultará el texto por hasta 3 segundos. Si el texto aún no está listo, utiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente. |
| Firefox | Ocultará el texto por hasta 3 segundos. Si el texto aún no está listo, utiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente. |
| Safari | Oculta el texto hasta que la fuente esté lista. |
Para abordar este problema sin depender sobre el comportamiento del navegador, se introdujo el parámetro de visualización de fuentes. Actualmente, el 92% de los navegadores admiten el parámetro de visualización de fuentes.
¿Qué hace la visualización de fuentes?
Durante el proceso de carga de la página, la apariencia de las fuentes puede variar hasta que se cargan por completo, dependiendo del navegador. Por ejemplo, algunas versiones del navegador Safari ocultan el texto hasta que se carga la fuente. El visualización de fuente: intercambiar El parámetro CSS estandariza este comportamiento mostrando el texto usando una fuente del sistema hasta que se cargan los archivos de fuente. Una vez cargadas las fuentes, la fuente del sistema se cambia por la fuente deseada. A continuación se muestra un ejemplo de uso:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Precarga de fuentes
Usando Cargar las fuentes antes de la ruta de renderizado crítica puede evitar espacios mientras se cargan las fuentes.
BONIFICACIÓN: Enfoque industrial para el uso de fuentes
Según datos de SimilarTech, echemos un vistazo a una tendencia importante y una instantánea del mundo de Internet. El primer gráfico a continuación muestra el uso de fuentes. en las 10,000 páginas principales y el segundo gráfico muestra el uso de fuentes en los 100,000 sitios principales.. Examinemos estos gráficos primero:
Hay una diferencia del 5% en el uso de Google Font y Font Awesome entre los 10,000 sitios principales y los 100,000 sitios principales.. Esto nos dice que los 10,000 sitios principales han optimizado su uso de fuentes. Recomendamos examinar este como un tema digno de mención. Considere cómo puede implementar fuentes web con sus propias soluciones.
BONIFICACIÓN 2: Estadísticas de uso de Google Font y Font Awesome
Respecto al primer bono, sugerimos examinar los dos gráficos que muestran la extensión numérica de las bibliotecas tipográficas más utilizadas. La cantidad de dominios únicos aquí supera los millones, y estos millones representan a sus competidores de SEO. Usar estas bibliotecas mejor y de manera más óptima que otras puede ayudarlo a destacar.
Si sigue estos consejos y optimiza el uso de fuentes, podrá mejorar significativamente el rendimiento web y la experiencia del usuario.
