Lo que de verdad mueve la aguja
Las fuentes suelen ser la mayor victoria de rendimiento que nadie mira. Lo que mueve los números es el pipeline: de dónde se sirve la fuente, en qué formato está, cuánto pesa y si el navegador sabe que debe pedirla pronto. Con eso bien hecho, la fuente llega lo bastante rápido como para que nada posterior tenga que disimular una carga lenta. Así que ese es el orden en el que trabajo — la palanca más pesada primero.
Autoaloja la fuente
Mi primer movimiento es siempre sacar la fuente de cualquier host externo y servirla desde mi propio origen. Una URL de Google Fonts implica una nueva resolución DNS, un handshake TLS y una conexión a otro servidor antes de que la fuente pueda siquiera empezar a descargarse — a menudo con una hoja de estilos que bloquea el render encima. Autoalojar reduce todo eso a una petición a un origen con el que el navegador ya está hablando.
La velocidad es la razón por la que lo hago, pero compensa por partida doble: es una dependencia externa menos y una llamada menos fuera de mi servidor, lo que es un poco más privado y un poco más robusto — nada de terceros que se rompa, cambie o vea quién visita. Vengo por los milisegundos, pero me llevo también la superficie más pequeña.
Sírvela en woff2
El formato es una victoria gratis. woff2 es el formato de fuente web más comprimido
que existe — bastante más pequeño que woff, y ni de lejos como un ttf
u otf en crudo — y todos los navegadores que me importan lo soportan desde hace
años. Sirvo woff2 y nada más; los formatos antiguos solo añadirían bytes para navegadores que no
tengo.
Haz subconjuntos y quita las fuentes que no necesitas
Esta es la mayor palanca de todas. Un archivo de fuente completo lleva glifos de sistemas de escritura que mi sitio nunca va a renderizar, así que hago un subconjunto a Latin y tiro el resto — ahí es donde desaparece la mayor parte del peso. Luego reduzco las familias y los pesos a los pocos que el diseño usa de verdad; cada peso extra es otro archivo que descargar.
Compone más de lo que parece. En un sitio que revisé hace poco con un amigo, ajustar solo la capa de fuentes — formato, autoalojamiento, subconjuntos, menos familias, precargar las correctas — redujo el peso de las fuentes en torno a 10× y llevó la página de un PageSpeed de 47, con FCP y LCP en la franja de los 10 segundos, a 92–96 con ambas métricas entre 2,0 y 2,7 s. Mismo contenido, mismo diseño — las fuentes simplemente dejaron de ser el cuello de botella.
Precarga las que importan
El navegador solo descubre una fuente cuando analiza el CSS que la pide, que es tarde. Un
<link rel="preload"> en el <head> le dice que empiece a
pedirla de inmediato, en paralelo con todo lo demás. Precargo exactamente las fuentes que usa la
primera pantalla y nada más — precarga todo y solo harás que tus fuentes compitan con tus
propios recursos críticos por el ancho de banda. Aquí son tres pesos, y es la razón por la que
la fuente está lista antes de que el texto la necesite.
dato curioso: la línea font-display
La parte friki, para quien disfrute esto tanto como yo. font-display decide qué
muestra el navegador mientras carga la fuente, y todas las guías dicen que uses swap.
Lo hice — y vi cómo la fuente de reserva saltaba a JetBrains Mono en cada carga. Nunca llegó a
afectar a mi CLS, pero el parpadeo se veía fatal. Como el pipeline de arriba hace que la fuente
pinte en unos 39 ms (PageSpeed Insights, móvil, 4G), me decanté por optional: su
ventana de ~100 ms es un margen cómodo sobre los 39 ms, y si la fuente alguna vez la superara,
el navegador simplemente conserva la de reserva — ni swap, ni salto. Con un pipeline rápido la
elección es casi cosmética, que es justo lo que quiero decir.
Cómo decidiría la próxima vez
Nada de lo anterior es una ley; es lo que este sitio necesitaba. Algunas cosas cambiarían mi respuesta:
- Más fuentes que estas — cuantas más familias y pesos use un diseño, más importan los subconjuntos y recortar pesos, y más difícil es precargarlas todas sin ahogar la ruta crítica. Pasado cierto punto, el arreglo honesto es menos fuentes, no una carga más ingeniosa.
-
Soporte legacy de verdad — sirvo solo woff2 porque todo lo que soporto lo entiende. Para
navegadores realmente antiguos añadiría un fallback en
woffen la listasrcdel@font-face, para que esos bytes caigan solo donde hacen falta. - Una fuente que no puedo hacer rápida — si una tipografía de marca tuviera que renderizarse siempre y no pudiera hacerla pequeña, subconjuntarla o precargarla (un archivo grande, o uno en un host que no controlo), lo honesto es cambiar la fuente, no servir una lenta.
Esa es toda la estrategia: haz la fuente pequeña y sírvela pronto. Mide primero el tiempo de llegada de tu propia fuente — el número te dice en cuál de estos casos estás.