¿SabÃas que las fuentes suelen ser uno de los recursos más pesados de una web? Si no las optimizas, tus usuarios verán una pantalla en blanco o un salto de texto brusco al cargar. Para Google, esto se traduce en una mala experiencia de usuario y peores métricas en Core Web Vitals.
Aquà te explico cómo dominar el rendimiento de tus fuentes en 4 pasos:
1. Usa el formato WOFF2
OlvÃdate de TTF o OTF para la web. WOFF2 es el estándar de oro. Utiliza una compresión superior (hasta un 30% mejor que WOFF) que reduce drásticamente el tiempo de descarga.
2. Implementa font-display: swap
Este es el truco maestro para el SEO. Al añadir esta propiedad en tu CSS, le dices al navegador: «Muestra una fuente del sistema primero y, en cuanto la fuente personalizada esté lista, cámbiala».
- Beneficio: Evitas el «Flash of Invisible Text» (FOIT) y mejoras el tiempo de renderizado percibido.
3. Precarga las fuentes crÃticas (preload)
Si usas una fuente especÃfica para tus tÃtulos (H1), no esperes a que el navegador descubra el CSS para empezar a bajarla. Usa un rel="preload" en el <head> de tu HTML:
<link rel="preload" href="/fonts/mi-fuente.woff2" as="font" type="font/woff2" crossorigin>4. Haz un «Subsetting» (Subconjuntos)
¿Realmente necesitas los caracteres cirÃlicos, griegos o los sÃmbolos matemáticos de esa fuente? Probablemente no.
- Acción: Recorta la fuente para que solo incluya los caracteres que usas (ej. LatÃn). Esto puede reducir el peso del archivo de 100kb a solo 15kb.
0 comentarios 
Deja una respuesta