Caricamento responsive dei web font, una nuova strategia
Ottimizzazione del caricamento dei font per dispositivi mobili più lenti con preloading responsive e dichiarazioni font-face responsive
Visualizzazione responsive dei font & strategia di preloading responsive dei font
Come specialista in Core Web Vitals vedo ogni giorno diverse soluzioni creative. La maggior parte non ha molto senso, ma di tanto in tanto mi imbatto in una strategia così semplice ed elegante che ha perfettamente senso per certi siti.
Questo articolo spiega come implementare il preloading responsive dei font per desktop insieme a font display:optional per eliminare il Flash Of Unstyled Text (FOUT) mentre si effettua il 'caricamento predefinito' del font per dispositivi mobili e si utilizza font-display: swap.
suggerimento: questa strategia funziona bene per i siti con un critical rendering path più ampio.
Il problema del caricamento anticipato dei font
Quando si ottimizzano i Core Web Vitals c'è una semplice regola che si applica sempre:
"Tutto ciò che fai prima del Largest Contentful Paint rallenterà quel Largest Contentful Paint".
Questo principio si applica anche ai web font. Dare priorità al caricamento dei web font durante il caricamento della pagina può migliorare la user experience, ma se il tuo sito sta lottando per raggiungere le soglie dei Core Web Vitals, specialmente per tipi di dispositivi specifici, potresti dover bilanciare la UX con il miglioramento del LCP.
Consideriamo l'esempio di seguito di un sito di giornali olandese. Su un dispositivo mobile 3 font vengono accodati prima dell'elemento LCP. Questo fa sì che i 3 font competano per le prime risorse di rete e ritardino i tempi dell'immagine.
Strategia responsive per i font in soccorso!
In casi come questo in cui c'è molta concorrenza precoce sulla rete ha senso distinguere tra i tipi di dispositivo. Tipicamente i dispositivi desktop più veloci su reti cablate (e connessioni di rete più veloci) possono gestire più risorse di rete iniziali contemporaneamente e ha perfettamente senso fare il preload di alcuni file di font critici.
I dispositivi mobili, d'altra parte, potrebbero essere utilizzati durante il tragitto per andare al lavoro in condizioni di rete non ottimali. Inoltre, i dispositivi mobili hanno spesso CPU più lente e meno memoria disponibile rispetto ai desktop. Queste limitazioni implicano che trattare il caricamento dei font in modo diverso in base al tipo di dispositivo può avere senso.
- Desktop: Effettuare il preloading dei font migliora le prestazioni di rendering su dispositivi con larghezza di banda e potenza di elaborazione migliori. Usa font-display: optional per ridurre al minimo il blocco ed eliminare i problemi di scambio dei font. Questo assicura che il font venga utilizzato solo se disponibile entro 100 ms dalla richiesta, mentre il preloading assicura che l'obiettivo venga raggiunto.
- Mobile: Non effettuare il preload del font a causa della competizione di rete. Usa font-display: swap per un rendering del testo più rapido. Questo approccio visualizza immediatamente i font di fallback mentre il font personalizzato continua a caricarsi in background, offrendo un'esperienza migliore sui dispositivi meno potenti.
Implementazione tramite <link rel="preload"> e Media Queries
Invece di caricare il font universalmente, puoi usare l'attributo media nel tag <link> dell'HTML insieme ai CSS per applicare diverse strategie per i font in base al tipo di dispositivo.
Struttura HTML
<head>
<!-- Preload font for desktop only -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Global font settings */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Desktop font settings */
@static/cache/static/img/clients/dpgmedia.webp (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head>
Vantaggi di questo approccio
- Focus sulla UX Desktop: Il desktop effettua il rendering con il web font immediatamente, prevenendo il FOUT o FOIT.
- Focus sulle prestazioni Mobile:
font-display: swapassicura che gli utenti vedano il testo immediatamente, anche se il font personalizzato non è ancora stato caricato. - Semplicità dichiarativa: Evita JavaScript, riducendo la complessità e migliorando la manutenibilità.
Caso d'uso nel mondo reale
Come detto nell'introduzione: questa strategia si basa su un esempio del mondo reale in cui mi sono imbattuto. Un sito di e-commerce rivolto sia agli utenti desktop che a quelli mobile ha implementato questa strategia. Il risultato:
- Desktop: CLS e UX migliorati con font formattati che appaiono quasi immediatamente.
- Mobile: First Contentful Paint e Largest Contentful Paint più veloci hanno garantito un'esperienza utente veloce, anche su connessioni più lente.
Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
