Font: preload, swap e CLS misurati

Senza font-display il testo con font web è rimasto invisibile fino a un LCP di 644 ms; con swap l'LCP è 280 ms con lo stesso CLS di 0,0028. Il preload, nella nostra prova, ha peggiorato il FCP da 280 a 456 ms perché il font ha rubato banda al CSS.

Le quattro varianti

I 364 ms tra 644 e 280 sono il periodo di blocco: il browser nasconde il testo finché il file non arriva, e l'LCP aspetta quel testo. Con swap il testo appare subito nel font di fallback e il CLS misurato resta identico.

Il codice

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: "Inter", system-ui, sans-serif;
}

Il file va servito dalla tua origine, con cache lunga e immutable: quello del sito risponde con max-age=31536000 e pesa 48.256 byte. Il preload del peso usato nel primo schermo ha bisogno di crossorigin, altrimenti il browser scarica il file due volte.

Perché il preload ha peggiorato l'FCP

Il preload ha anticipato il download del font ma ha anche messo in coda il CSS: su una rete da 1,6 Mbps due file da 48 KB competono, e il primo paint è passato da 280 a 456 ms. Il preload conviene quando il font è davvero nel primo schermo e il CSS è già piccolo; non è una regola universale.

Le regole che tengono

• Metti sempre font-display: swap o optional: senza, il testo resta invisibile per il periodo di blocco. Fonte: web.dev, CC BY 4.0.
• Due pesi al massimo per famiglia. Il solo regular pesa 48.256 byte in woff2. Fonte: MDN, CC BY-SA 2.5.
• Preload solo del peso usato sopra la piega, con crossorigin. Fonte: MDN, CC BY-SA 2.5.
• Riduci il salto con size-adjust e ascent-override nel fallback locale, non con un line-height a caso.

Il limite da dichiarare

Il CLS di 0,0028 è piccolo perché il fallback Times e Inter hanno metriche vicine su questo testo. Con un fallback più largo il salto cresce, e un titolo grande sposta molto più di un paragrafo. La prova usa un font e una pagina: la scelta tra swap e optional dipende da quanto conta il carattere tipografico, non solo dal numero.

Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, per esempio gooey-text-morphing, e la griglia di 12.808 icone come icon-abc. Leggi font-display e CLS, la strategia di preload, le cause del CLS e come si fissa un performance budget.