Font loading: smettila di ignorarlo
I font sono spesso il collo di bottiglia invisibile delle performance web. Un font mal caricato causa layout shift, testo invisibile e pagine che sembrano rotte.
Il problema fondamentale: i browser caricano i font solo quando trovano il primo elemento che li usa. Se il font è caricato via @import in CSS, questo non inizia fino al CSS, che non inizia fino all'HTML. Il ritardo si accumula. La soluzione è il preload: <link rel='preload' href='font.woff2' as='font' crossorigin /> nell'head dell'HTML, prima che qualsiasi altro asset venga richiesto.
font-display: swap è quasi sempre la scelta giusta. Mostra il testo con il font di fallback immediatamente, poi swappa quando il font custom è pronto. Il testo è sempre leggibile, anche durante il caricamento. L'alternativa font-display: optional è buona per font decorativi non critici: se il font non è pronto al primo render, non viene mai usato, eliminando il layout shift.
Il dettaglio che molti ignorano è il font di fallback. Se il font di fallback ha metriche molto diverse dal font custom (line-height, ascent, descent, advance width), lo swap causa un layout shift visibile. La soluzione moderna: @font-face con size-adjust, ascent-override, descent-override per far coincidere le metriche del fallback con il font custom. Il layout shift diventa invisibile.