Come ridurre il carico dei font su Shopify senza compromettere il design del brand

Soluzione rapida con Thunder

Se PageSpeed Insights mostra avvisi sui font, la via più rapida è installare Thunder, testare gli stessi URL di prodotto e collezione e osservare se LCP, FCP e rendering del testo migliorano. Thunder nasce dalla ricerca sulla velocità condotta su oltre 20,000 negozi Shopify ottimizzati e gestisce il lavoro comune sul caricamento delle risorse che la maggior parte dei merchant non dovrebbe modificare a mano.

Per un quadro più ampio delle prestazioni, abbinate questa lettura alla guida completa all'ottimizzazione della velocità di Shopify, alla guida all'ottimizzazione dei font Shopify e alla panoramica delle funzionalità di Thunder. I font sono solo una parte dei Core Web Vitals, ma possono frenare silenziosamente negozi altrimenti ben ottimizzati.

Perché il carico dei font danneggia i Core Web Vitals di Shopify

I font influiscono sulla velocità perché il testo non può essere disegnato correttamente finché il browser non sa quale typeface, quale file e quale comportamento di fallback usare. Se il tema richiede più famiglie di font da un dominio esterno, il browser deve aprire connessioni, scaricare un foglio di stile, individuare i file dei font effettivi e poi recuperare ogni file WOFF2. Su mobile, quella catena può competere direttamente con l'immagine hero che determina il Largest Contentful Paint.

Lo schema tipico di Shopify è pesante: un font per i titoli in regular e bold, un font per il corpo in regular, medium, semibold e bold, più un font di icone lasciato da un page builder o da un'app di recensioni. Questo può generare da sei a dieci richieste di font prima ancora che l'acquirente abbia letto il titolo di un prodotto. Il negozio può sembrare curato una volta caricato tutto, ma la prima impressione arriva in ritardo.

Anche il cambio di font può causare spostamenti del layout. Se il font di fallback è molto più largo o più alto del font finale del brand, i titoli dei prodotti, le righe dei prezzi, i pulsanti e le etichette di navigazione possono spostarsi. Ecco perché il lavoro sui font va di pari passo con le correzioni del CLS, non solo con quelle dell'LCP.

Procedura manuale passo passo: ridurre il carico dei font in sicurezza

1. Fate l'inventario di ogni richiesta di font

Aprite Chrome DevTools, caricate la homepage e una pagina prodotto, poi filtrate il pannello Network per "font". Annotate ogni famiglia, peso, origine e dimensione. Ripetete con il throttling mobile attivo. State cercando duplicati, pesi inutilizzati, font di app e vecchi font di icone.

2. Mantenete solo i pesi che il tema utilizza

Molti negozi caricano le varianti 300, 400, 500, 600, 700 e corsivo quando il design usa solo 400 e 700. Cercate font-weight nel CSS del tema prima di eliminare qualsiasi cosa. Se nessun elemento visibile usa 500 o 600, rimuovete quei file.

3. Ospitate in autonomia i font importanti come WOFF2

Shopify può servire gli asset dal proprio CDN, il che di solito è più veloce che scaricare CSS da un host di font di terze parti a ogni pagina. Caricate negli asset del tema i file WOFF2 esatti di cui avete bisogno, poi definiteli nel CSS:

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

In un articolo Astro possiamo mostrare il Liquid direttamente, ma in un tema Shopify questo codice va nel foglio di stile o in un piccolo snippet dei font caricato da theme.liquid.

4. Precaricate un font critico, non l'intero sistema tipografico

Il preload è utile quando il primo testo visibile ha bisogno di un file specifico. È dannoso quando precaricate ogni peso, perché quei download possono sottrarre banda all'immagine LCP. Iniziate con un solo font:

<link
  rel="preload"
  href="{{ 'brand-sans-regular.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin
>

5. Abbinate i font di fallback per ridurre gli spostamenti del layout

Usate uno stack di fallback con proporzioni simili. Se il font del vostro brand è un sans-serif pulito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif di solito si comporta bene. Se il font dei titoli è condensato o ad alto contrasto, fate un test prima/dopo con i filmstrip di WebPageTest o con il pannello Performance.

Correzione manuale vs correzione con Thunder

Cosa non rompere mentre riducete il carico dei font

Non rimuovete i font usati nel cart drawer, nella navigazione, nei badge di prodotto, nel selettore di localizzazione o nella guida alle taglie senza verificare quegli stati. Non precaricate font che compaiono solo sotto la piega. Non impilate più app di ottimizzazione dei font sopra una riscrittura a livello di tema. E non giudicate il successo da una singola esecuzione di Lighthouse: usate le mediane prima/dopo e i trend reali della Web Performance Dashboard di Shopify.

Se il vostro negozio ha anche script pesanti, sistemate i font insieme all'ottimizzazione JavaScript di Shopify e alla pulizia di CSS e JavaScript inutilizzati. Una configurazione pulita dei font aiuta, ma gli script lenti di terze parti possono comunque ritardare il thread principale e far sembrare la pagina bloccata.

FAQ