Optimización de WebFonts para Mejorar el Rendimiento Web

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
Viendo ahora

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:30

Optimización de WebFonts para Mejorar el Rendimiento Web

Curso de Optimización Web

Clase 14 de 38

Clase 14 / 38

Recursos

¿Por qué los WebFonts afectan el rendimiento de una página web?

Los WebFonts, aunque populares por permitir personalización tipográfica en sitios web, representan un desafío considerable para el rendimiento de las páginas. Tener múltiples fuentes web puede ralentizar significativamente el tiempo de carga. Es recomendable limitar el uso a un máximo de dos WebFonts, o incluso evitarlos por completo en casos donde el rendimiento es crítico. Vamos a explorar tres métodos para optimizar la carga de estos recursos y minimizar su impacto en el rendimiento.

¿Cuáles son las tres estrategias de carga de WebFonts comunes?

Existe una variedad de estrategias para cargar WebFonts que, aunque necesarias para el diseño, traen consigo ciertos inconvenientes. Vamos a abordar tres métodos básicos de carga:

Carga normal mediante CSS: Los WebFonts se añaden mediante un enlace en el CSS, lo que resulta bloqueante para el proceso de renderización, deteniendo el parsing del HTML hasta que la fuente se descarga por completo.
Shift de fuente (Flash of Unstyled Text - FoUT): Consiste en usar una fuente del sistema predeterminada (ej. Arial) mientras los WebFonts deseados se cargan en paralelo. Esto genera un "FLASH" perceptible cuando las fuentes cambian, un fenómeno conocido como Flash of Unstyled Text.
Texto invisible (Flash of Invisible Text - FOIT): Aquí, ningún texto se muestra hasta que los WebFonts estén completamente descargados, provocando un momento de "invisibilidad" que puede resultar inquietante para el usuario.

¿Cómo podemos optimizar la carga de WebFonts?

Optimizar WebFonts implica un análisis cuidadoso de cómo se carga la fuente y qué herramientas podemos usar para mejorar esta experiencia. Te presento varias estrategias útiles.

Uso de display en Google Fonts

Una técnica eficiente consiste en usar la propiedad display: swap en Google Fonts, lo que permite mostrar un texto con una fuente de sistema hasta que la fuente web se cargue y puede intercambiar (swap) automáticamente cuando esté disponible, mejorando así la percepción del usuario.

<link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;1,300&display=swap" rel="stylesheet">

WebFontLoader para mayor control

Para obtener un control más granular sobre WebFonts, es recomendable usar WebFontLoader, una librería open source que facilita la gestión de fuentes desde diversos proveedores, como Google Fonts, TypeKit, y Font Deck.

<script>
  WebFont.load({
    google: {
      families: ['Muli']
    }
  });
</script>

Implementación de eventos CSS

La librería WebFontLoader emite eventos según el estado de la fuente (cargando, activa, inactiva), permitiendo ajustes CSS dinámicos para cambiar entre fuentes del sistema y WebFonts elegantemente.

html {
  font-family: Arial, sans-serif;
}

html.wf-active {
  font-family: 'Muli', sans-serif;
}

¿Por qué limitar los WebFonts en tu proyecto?

Reducir el número de WebFonts no sólo mejora el rendimiento, sino que también ofrece una experiencia más consistente al usuario. Idealmente, usar un único WebFont, o incluso ninguno, es lo más recomendable. Al tomar medidas específicas y utilizar herramientas adecuadas, como WebFontLoader, garantizamos que las fuentes carguen eficientemente, evitando efectos indeseados como texto invisible o cambios bruscos de fuente. Además, es esencial seguir aprendiendo y considerar estrategias avanzadas, como las detalladas por expertos como Zach Lederman, para alcanzar nuevas metas en la optimización web.

Andres Rodriguez

Hace 6 años

Los web fonts son muy populares en el diseño web para darle estilo e identidad en términos de diseño a los sitios web web. Sin embargo, en términos de rendimiento resultan ser muy dañinos. Son tan poco recomendados que incluso las comunidades de diseñadores y desarrolladores recomiendan como máximo 2 web fonts. Si está en tus manos solo deberías un web font. Pero si realmente te interesa el rendimiento de tu sitio web, ya sea porque tus usuarios dependen del rendimiento, no deberías ni siquiera usar web font.

Pero por lo general no tener un web font en los sitios web es muy difícil. Por eso, existen 3 métodos de cargar los web fonts para reducir el impacto de la carga del sitio web. No obstante estas tres maneras traen consigo 3 problemas. miremos:

MODO ESTILO: La primera forma de hacerlo es cargando los fonts como si fueran estilos CSS con la etiqueta <Link> Pero sabemos que por el CRP la carga de estilos son bloqueantes para el parsing del HTML. La carga de los fonts como estilos resultan ser bloqueantes también.
FORMA ALTERNA: La segunda forma de carga es mostrando una fuente por defecto, una fuente común que ya esté en el sistema de manera predeterminada. Por ejemplo Arial es una fuente que ya viene en todos los sistemas operativos. Descargar la fuente en paralelo, y una vez que ya la fuente esté descargada, hacer el cambio de fuente. Ese cambio de fuentes resulta ser perceptible al ojo humano por eso este método se conoce como: Flash Of Unstyled Text (FOUT).
DESPUES DEL HTML PARSING: esta 3ra estrategia consiste en no mostrar ningún texto hasta que se descargue la fuente. Esta estrategia se conoce como Flash Of Invisible Text (FOIT)

Google fonts es uno de los proveedores de fonts mas populares en Internet, y desde la liberación de sus últimas versiones, permite definir el comportamiento de carga de la fuente. **En los parámetros de su url puedes puedes usar el query-param display

Para usar Flash Of Unstyled Text (FOUT). Podemos usar el valor swap
Para usar Flash Of Invisible Text (FOIT). Podemos usar el valor block

<link
      href="https://fonts.googleapis.com/css?family=Muli&display=swap"
      rel="stylesheet"
 />

Pero no todos los proveedores tienen esta opción para facilitar la definición del comportamiento de carga de la fuente. Para eso podemos usar otras alternativas como:

webfontloader :

Diego Andres Cabrera Rojas

Hace 6 años

muy buen resumen de la clase amigo 👏

Comentarios (14)14 comentarios

Fernando Quinteros Gutierrez

Jesus Antonio Castaneda Valencia

Andrés Felipe Viracachá Suarez

Héctor Emmanuel Ortiz Pineda

Hace 4 años

Rubén Ernesto Aragón Gil

Miguel Angel Reyes Moreno

Luis Alejandro Vera Hernandez

Hace 5 años

Carlos Rodríguez

Jonathan 🦑 Alvarez

Profesor

Victor Andres Castillo Zambrano

Hector Vasquez

Mauricio Costanzo

Kenneth Angulo L

Hace un mes

luis alejandro castañeda varon

Jose Ever Muñoz Muñoz

Hace 3 años

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Optimización de WebFonts para Mejorar el Rendimiento Web