𝗗𝗲𝗷𝗲́ 𝗱𝗲 𝘂𝘀𝗮𝗿 𝗲𝗹 𝗖𝗗𝗡 𝗱𝗲 𝗚𝗼𝗼𝗴𝗹𝗲 𝗙𝗼𝗻𝘁𝘀
Cargar fuentes desde un CDN de Google ralentiza tu sitio.
Solía usar un único enlace en mi cabecera. Parecía fácil. Luego revisé mis puntuaciones de Lighthouse.
El informe mostró un problema. El navegador tenía que realizar conexiones adicionales a los servidores de Google. Tenía que realizar búsquedas de DNS y negociaciones TLS. Esto causaba retrasos. En una conexión móvil lenta, el texto permanecía invisible durante demasiado tiempo.
Me cambié al self-hosting. Me tomó una tarde. Ahora lo hago en cada proyecto.
Aquí tienes la configuración que necesitas:
- Usa el formato WOFF2. Es un 30% más pequeño que WOFF. Ya no necesitas formatos antiguos como .ttf o .eot.
- Convierte tus fuentes. Usa la librería fonttools para comprimir archivos .ttf en .woff2.
- Usa la propiedad
font-display: swap. Esto muestra el texto de respaldo inmediatamente. Evita que el texto sea invisible mientras se carga la fuente. - Precarga las fuentes críticas. Añade un enlace de preload en tu
<head>para las fuentes que se usan en la parte superior de la página. - Usa siempre el atributo
crossorigin. Si lo olvidas, el navegador descargará la fuente dos veces. - Crea subconjuntos de tus fuentes. Si tu sitio usa inglés, elimina los glifos que no se utilicen. Esto puede reducir el tamaño del archivo en un 70%.
- Almacena tus archivos en caché. Usa un encabezado
cache-controlprolongado para mantener las fuentes en el navegador.
El flujo de trabajo es sencillo:
Convierte a WOFF2. Usa @font-face con swap. Precarga la fuente principal con crossorigin. Guarda el archivo en caché.
Esta configuración mejora tu velocidad de carga y elimina a un tercero de tu ruta crítica.
¿Sigues usando el CDN de Google para producción? Cuéntame por qué en los comentarios.