El <link> de Google Fonts en el <head> de este sitio era una de esas cosas que copié y pegué tan temprano en el proyecto que había dejado de verla. Funcionaba, las fuentes cargaban, y me dediqué a cosas que se sentían más importantes. Después corrí una traza en cascada y vi cómo la página entera esperaba a un dominio de terceros antes de que un solo heading pudiera renderizarse.
Lo que la petición realmente costaba
Un <link> a fonts.googleapis.com dispara una búsqueda DNS, una conexión, una redirección al CSS de fuente real, y después una segunda petición a fonts.gstatic.com por los archivos de fuente en sí —cuatro idas y vueltas antes de que cualquier texto con esa fuente pueda pintarse, a un dominio con el que el navegador nunca habló antes si es la primera visita de un lector.
npm install @fontsource/bricolage-grotesque @fontsource/karla@import '@fontsource/bricolage-grotesque/700.css';
@import '@fontsource/karla/400.css';Auto-alojar los dos pesos que realmente uso convirtió eso en archivos servidos desde el mismo dominio que todo lo demás, con las mismas cabeceras de caché, sin búsqueda DNS, sin redirección.
La parte que no esperaba
La ganancia más grande no fue el número de peticiones. Fue el layout shift. El font-display: swap de Google Fonts significaba que la página brevemente se renderizaba en una fuente de fallback y después saltaba cuando cargaba la fuente real —un salto pequeño pero medible en cada carga de página. Los archivos auto-alojados cargan lo bastante rápido, en la misma conexión que el HTML, que el intercambio ya no es visible en la práctica. El número de CLS de Lighthouse se movió más de lo que esperaba para lo que se sentía como un cambio de infraestructura pequeño.